GTM Integration

Product Page View indicates the total number of visits that has been made to the product details page (PDP) by the visitor irrespective of the source (search result page, category page, search engine, email, marketing campaigns, etc). This can be tracked by passing the product ID in the payload.

To integrate this event through GTM, we need to follow the below approach:

1. Create a Trigger in GTM to catch the product view.               

   Trigger Configuration: 

   TriggerName: UnbxdProductViewTrigger

   TriggerType: Custom Event  

   EventName: ProductView

   TriggerFiresOn: All Custom Events.                                                                                                                                            

2. Create a Variable in GTM to fetch the product ID from the dataLayer.                                                                 Variable Configuration: 

   VariableName: UnbxdProductViewPayload 

   Variable Type: Data Layer Variable 

   Data Layer Variable Name: ProductViewPayload                                                             

3. Create a Javascript tag with the below details                                 

   Tag Configuration:

   Tag Name: UnbxdProductViewTag

   Tag Type: Custom HTML

   HTML Content: 

   				
   					// Pass payload to Unbxd.track function
   // to call the tracker API 
    
   <script type="text/javascript">
      var u_payload = {{UnbxdProductViewPayload}};
      if (Unbxd && typeof Unbxd.track === 'function'
          && u_payload.hasOwnProperty("pid")){
          Unbxd.track('product_view', u_payload);
        } else {
          console.error('unbxdAnalytics.js is not loaded or payload incorrect!')
      }
   </script>
   
   				
   			

4. Pushing the event to the dataLayer through a product view.                         

   				
   					// Add payload to Datalayer variable ProductViewPayload 
   // Should be triggered when a user lands on product page
   
   <script type="text/javascript">
      window.dataLayer = window.dataLayer || [];
      dataLayer.push(
        {
         'event': 'ProductView',
         'ProductViewPayload':
          {
            'requestId': 'REQUEST ID',
            'pid': 'PRODUCT ID',
            'variantId': 'VARIANT ID OF SELECTED VARIANT'
          }
        });
   </script>
   				
   			

   .             

   Payload Details
   Attribute	Datatype	Value to be passed
   requestId	string	To be extracted from Unbxd search api response headers, from unx-request-id
   pid	string	Unique id for the product, to be taken from API response, if relevantDocumentType=”parent”, In search api response, or null
   variantId	string	variantId of the selected product variant, if relevantDocumentType=”variant”, In search api response, or null
   qty	string	quantity being added to cart by user
   price	string	unit price of the product (variant, if variant is selected)

Events Flow will be:

• As soon as the ‘Productview` event got pushed to the dataLayer.
• This initiates the trigger UnbxdProductViewTrigger which we created in the step-1.
• UnbxdProductViewTrigger executes the tag UnbxdProductViewTag: which we created in step-3.
• Inside UnbxdProductViewTrigger we have added an Unbxd analytics product view tag.
• Product view tracker code gets the data from the variable UnbxdProductViewPayload which we created in step-2.
• Finally, UnbxdProductViewTrigger event data will be updated in the Unbxd analytics database for the particular siteKey.