• Google Analytics 4

  The Challenge of Capturing Variant Titles in GTM's DataLayer for Shopify

  Posted by Cameron on 13 May 2022 at 1:22 pm

  Hey there! I’ve been working hard trying to fix up the GTM and dataLayer for the non plus store on Shopify. My goal is to make sure the item_variant value is correctly updated in the items array for GA4. Here’s an example of what I’ve coded so far in liquid:

  
  
  {% if template contains 'product' %}  
     // Code pushing data to 'view_item' event goes here...
  {% endif %}
  
  
  {% if template contains 'product' %}  
     // Code pushing data to 'add_to_cart' event goes here...
  {% endif %}
  

  So here’s the issue. item_variant should reflect the variant of the product that was viewed or added to cart – like S,M,XL or 1 pack, 2 pack etc. When a customer just views a product, the item_variant value updates correctly. However, if the variant is changed on the product page (which also tweaks the url with a parameter like ?variant=37281560494243), the item_variant still retains the old value like the view_item event.

  But, I noticed something curious. In the native google ads add_to_cart event in the dataLayer, the item_variant actually does change to reflect the correct value. Here’s what it looks like:

  
  eventModel: {
      ...
      items: [{
          ...
          variant: "2 pack"
      }]
  }
  

  I’ve tried different tricks to fix it like assigning other variables like {{ product.selected_variant.title }} and {{ item.variant.title }}. But nothing seems to help. Any ideas?

  Aniket replied 1 year, 4 months ago 3 Members · 2 Replies
• 2 Replies

• 

  Ethan

  Member

  25 July 2022 at 9:37 pm

  Good news, I figured it out on my own! For keeping the variant title or id of the item updated on a ‘cart addition’, the trick is to add an iteration on product.variants within the ecommerce variable. Then point it to the suitable liquid variable – this could be variant.title or variant.id.

  
  {% if template contains 'product' %}
   dataLayer.push({
     'ecommerce': null
   });
   var ecommerce = {
     'items': [{
       'item_id': {{product.id | json}},                 
       {% for variant in product.variants %}
       'item_variant': {{variant.title | json}},
       {% endfor %}               
       'item_name': {{product.title | json}},
       'price': {{product.price | divided_by: 100.0 | json}},
       'item_brand': {{product.vendor | json}},
       'item_category': {{product.type | json}},
       'item_list_name': {{collection.title | json}},
       'description': {{product.description | strip_newlines | strip_html | json}},
       'imageURL': 'https:{{product.featured_image.src|img_url:'grande'}}', 
       'productURL' : '{{product.url}}'
     }]
   };              
   $(__DL__.cartTriggers).click(function(){
     dataLayer.push({                    
       'event': 'add_to_cart',
       ecommerce
     });                  
   });              
  {% endif %}
  

  So there you have it! This code should take care of keeping the variant updated when adding to the cart.

• 

  Aniket

  Member

  17 November 2022 at 1:47 pm

  It seems like the issue might be arising due to the data layer for ‘add_to_cart’ event not being updated properly when a variant on the product page is changed. Most likely the script which populates the dataLayer for the add_to_cart event is not triggered or does not execute when the variant is changed. The GTM would need to be implemented in a way that it listens for the variant change event as well. Keep in mind, however, that products.selected_variant.title or item.variant.title will only update on page load or when the Liquid object is refreshed.

  Without seeing the full code, it’s challenging to provide concrete solutions. You should aim to ensure variant changes are being listened to and that GTM is informed about these changes. You might want to consider adding a JS event listener or using Shopify’s AJAX API for this purpose to track changes in real-time.

  Another possible issue could be that the ‘add_to_cart’ event script is cached and does not update the variant information when the customer changes it. Make sure the ‘add_to_cart’ event tracking script fetches the latest variant information every time an item is added to the cart.

  If you are using GA4, it is vastly different from Universal Analytics and implements events differently. You may want to look into GA4’s event structure and correctly configure it for expected results.

Log In to Reply