Content rendering with GTM

Example code snippets for rendering Product Recommendations, when using Google Tag Manager (GTM).

Overview

This example code snippet illustrates how to render product recommendations on your channel when you are using Google Tag Manager.

Step 1: Add reference to CSS

Add the following script in the HEAD tag of your web site page, to use the example renderer widget. 

<link
rel="stylesheet"
href="https://my2.digitalexperience.ibm.com/2fec40e4-091c-40ca-b1df-d45cf19144da/wrtp/prod/Renderer.css"
type="text/css"/> <script type="text/javascript"
src="https://my2.digitalexperience.ibm.com/2fec40e4-091c-40ca-b1df-d45cf19144da/wrtp/prod/Renderer.js"></script>

Step 2: Configure Google Tag Manager integration

See this Knowledge Center page for GTM integration. Complete the following steps as described on this page:
  1. Step 1: Initialize the variables
  2. Step 2: Get Acoustic Exchange Capture Enablement Key
  3. Step 3: Add the code snippet to the custom GTM tag

Step 3: Add the rendering logic

For the Step 4: Rendering logic in the GTM integration procedure, use the following code snippet. 

var renderRecommendation = function(zoneArea, RESPONSE , RTP)
 {
  if (RESPONSE   !== 'PRNF404' && RESPONSE  !== undefined &&  zoneArea !== undefined)
   {
      for (var i = 0; i < RESPONSE.length; ++i) 
     {
       var element = document.createElement('div');
       element.id = RESPONSE[i].id;
       element.classList.add("wrtp-slide-2fec40e4-091c-40ca-b1df-d45cf19144da", "wrtp-slide-2fec40e4-091c-40ca-b1df-d45cf19144da-"+([i]));

       var id = RESPONSE[i].id;

         element.onclick = function() {
         var productId = event.currentTarget.id;
         var productDataList = RESPONSE ;
         var productData = productDataList.find(function(x){return x.id === productId});                                                                            
         RTP.trackProduct(productId, event);
         
     //Call Productview events here 
        window.location.href = '<Your product details page>';
       };
        element.style.background = "url(" + RESPONSE[i].images[0] + ") 50% 50% / cover no-repeat";
        zoneArea.append(element);
      }
      zoneArea.style.opacity = 1;
      wrtpRenderer(zoneArea);
      } else {
        console.log('Personalization: Error in getting the recommendation.');
            }
   }