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

[Ethan]

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]

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.