Skip to main content
Solved

Adding the “Added to Cart” Snippet won't generate the Custom Liquid block for Viewed Product tracking.


Forum|alt.badge.img+2

Currently migrating a Shopify store to a version 2.0 of the Turbo theme, I have followed the documentation for adding the liquid block for tracking the add to cart event. The issue is that at the last point (#6) says: 

“6. In the left bar, your new Custom Liquid block for Added to Cart should automatically have been placed below the other sections on the page, including your Custom Liquid block for Klaviyo’s Viewed Product tracking.

https://help.klaviyo.com/hc/en-us/articles/115001396711-Guide-to-Creating-an-Added-to-Cart-Event-for-Shopify#adding-the--added-to-cart--snippet2

Any Ideas of why this is NOT happening?? Also, within the customizer, under Theme settings and App embeds, Klaviyo onsite JS appears active.

https://help.klaviyo.com/hc/en-us/articles/115005076767-Guide-to-Klaviyo-Onsite-Tracking#before-you-begin1

Should Mention that I don’t have access to the Klaviyo account. I am a developer tasked with this, currently about to add manually what’s supposed to happen automatically, the view product Snippet.

<script type="text/javascript">
var _learng = _learng || [];
var item = {
  Name: {{ product.title|json }},
  ProductID: {{ product.id|json }},
  Categories: {{ Feet sect feecmell name see lag }},
  ImageURL: "https:{{ product.featured_image.src|img_url: 'grande' }}",
  URL: "{{ shop.secure_url }}{{ product.urt }}",
  Brand: {{ product.vendor|json }},
  Price: {{ product.price|money|json }},
  CompareAtPrice: {{ product .compare_at_price_max|money|json }}
};
_learng.push(['track', 'Viewed Product', item]);
_learng.push(['trackViewedItem', {
Title: item.Name,
ItemId: item.ProductID,
Categories: item.Categories,
ImageUrl: item. ImageURL,
Url: item.URL,
Metadata: {
  Brand: item.Brand,
  Price: item.Price,
  CompareAtPrice: item.CompareAtPrice
  }
 }
);
</script>
I will appreciate any kind of response!! Thanks in advance.

Best answer by retention

Hey @Jordan - welcome to the community.

A few things to start to make sure I understand what you’re trying to do.  The “Add to Cart” tracking and the “Viewed Product” are separate track events. One tracks every time a known user views a product (fires for every product detail page).  And the other, tracks only when someone “Adds to Cart” which is typically invoked from a button click. 

The “Add to Cart” event requires an event listener for a specific button ID (or class) on an onClick or onSubmit event, and then hands off to the javascript function to send the track event to Klaviyo.  

If you are using the code from Klaviyo’s documentation, the “Add to Cart” tracking uses the same item object from the Viewed Product tracking snippet so you don’t have to define an “Item” twice on the same product page.

So, if Viewed Product is not working, follow this guide here: 

Once you have Viewed Product working, there’s troubleshooting for the Add to Cart.  Typically, most people seem to run into the problem fo figuring out the Button ID or Class to invoke the event listener.  You can follow the same guide you already referenced to work it through, or take a look at some of these past threads for some more insights:

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 944 replies
  • Answer
  • April 27, 2022

Hey @Jordan - welcome to the community.

A few things to start to make sure I understand what you’re trying to do.  The “Add to Cart” tracking and the “Viewed Product” are separate track events. One tracks every time a known user views a product (fires for every product detail page).  And the other, tracks only when someone “Adds to Cart” which is typically invoked from a button click. 

The “Add to Cart” event requires an event listener for a specific button ID (or class) on an onClick or onSubmit event, and then hands off to the javascript function to send the track event to Klaviyo.  

If you are using the code from Klaviyo’s documentation, the “Add to Cart” tracking uses the same item object from the Viewed Product tracking snippet so you don’t have to define an “Item” twice on the same product page.

So, if Viewed Product is not working, follow this guide here: 

Once you have Viewed Product working, there’s troubleshooting for the Add to Cart.  Typically, most people seem to run into the problem fo figuring out the Button ID or Class to invoke the event listener.  You can follow the same guide you already referenced to work it through, or take a look at some of these past threads for some more insights:

 


David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • April 27, 2022

Hey @Jordan,

I don’t think I could have put it any better than @retention already has. When installing your Add to Cart, one of the requirements for it to function would be the Viewed Product event snippet which would be a separate installation. 

From your explanation, it sounds like when installing the Add to Cart event, the site may not have the Viewed Product event snippet installed; hence the confusion on step 6 of the instructions and why you aren’t seeing another Custom Liquid block:

6. In the left bar, your new Custom Liquid block for Added to Cart should automatically have been placed below the other sections on the page, including your Custom Liquid block for Klaviyo’s Viewed Product tracking. 

 

David