Solved

Custom "Added to Cart" Event - Shogun

  • 21 September 2021
  • 1 reply
  • 361 views

Badge +1

In need of some desperate help!

NOTE: - I’m using Shogun which i feel is making things a-lot harder than what it needs to be

I’m trying to set up Custom "Added to Cart" Event. I’m using the The "Added to Cart" Snippet [id] to put into my Product.Liquid file. I’ve also got the Web Traffic Tracking code added above it. 

I’ve tried to fire the snipped for each change i make by cooking my browser.  

Active on Site works and can see the traffic but i can’t get the API of Added to Cart to appear under Analytics. 

Ive also tried using [Class] as an alternative. Still no luck.

I would appear i have both ID and Class - but let me know. 

 

  1. Should i be using ID or Class 
  2. Should this go in Product.Liquid or Product.shogun.custom.liquid
  3. What is my Button ID [or] Class

Thank you

 

//Klaviyo Web Traffic Tracking

<script type="text/javascript">
var _learnq = _learnq || [];

var item = {
Name: {{ product.title|json }},
ProductID: {{ product.id|json }},
Categories: {{ product.collections|map:'title'|json }},
ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
URL: "{{ shop.secure_url }}{{ product.url }}",
Brand: {{ product.vendor|json }},
Price: {{ product.price|money|json }},
CompareAtPrice: {{ product.compare_at_price_max|money|json }}
};

_learnq.push(['track', 'Viewed Product', item]);
_learnq.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>

//Klaviyo ATC Snippet

<script type="text/javascript">
var _learnq = _learnq || [];
document.getElementById("s-81fb3052-b61c-4944-84eb-0ef985ca0d8f.shg-btn").addEventListener('click',function (){
_learnq.push(['track', 'Added to Cart', item]);
});
</script>

Screen Shots

 

From the Crome Browser 
From Code Editor in Shopify using Theme Debut with Shogun page editor

 

icon

Best answer by Dov 22 September 2021, 16:07

View original

1 reply

Userlevel 7
Badge +56

Hello @Brayds,

Thanks for sharing this question with the Klaviyo Community.

Indeed, Added to Cart can be a little tricky. It looks like you’re having an issue because you’re including the values for both the ID and class of the button within the getElementbyId snippet.

  1. Instead, you should be trying both independently. What I mean by this is you should try grabbing just the ID using the getElementById snippet (what you have in the screenshot) and then use just the ID of the button “s-81fb3052-b61c-4944-84eb-0ef985ca0d8f”. Do not include the class of the button “shg.btn”. So first I would remove the class value that you have in that snippet (shg-btn) so the snippet will look like this with only the ID:
<script type="text/javascript">
var _learnq = _learnq || [];
document.getElementById("s-81fb3052-b61c-4944-84eb-0ef985ca0d8f").addEventListener('click',function (){
_learnq.push(['track', 'Added to Cart', item]);
});
</script>

Next, self-identify the browser and try adding an item to the cart. A browser is self-identified only after somebody has done at least one of the following: filled out a Klaviyo sign-up form, previously clicked through a Klaviyo email, self-identified using a UTM parameter. Only after one of these actions are taken and a user (including yourself) subsequently adds an item to their cart, will an Added to Cart metric appear under Analytics > Metrics in Klaviyo.

If this does not work, I would try the same process except using the alternative code snippet for class instead of ID, and updating the getElementByClassName value, to only include the class value so it will look like this:

<script type="text/javascript">
var _learnq = _learnq || [];
var classname = document.getElementsByClassName("shg-btn");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

And then try repeating the same steps of self-identifying the browser to trigger an Added to Cart metric in the account.

  1. Both of these snippets (Viewed Product and Added to Cart) should exist in both Product.Liquid and any custom product.liquid files, so both files should have both snippets.
  2. You can see both the ID (s-81fb3052-b61c-4944-84eb-0ef985ca0d8f) and the class (shg-btn) when you inspect the button, visible in your screenshot including the source code on the page, on the right-hand side.

If you are still having trouble after this, I would double-check your site to see if you have duplicate instances of Klaviyo javascript.

<script type="text/javascript" async 
src="https://static.klaviyo.com/onsite/js/klaviyo.js?company_id=API_KEY"></script>

You can search for this by inspecting your site page and CMD + F for “company_id”. If that leads you to multiple Klaviyo javascript snippets, that may be the cause of the issue. Removing duplicates scripts of javascript can currently only be done by a Klaviyo support staff member. Therefore, you’ll need to reach out to support  to get this remedied. Once this is done, I would again try self-identifying the browser to see if Added to Cart appears in the account.

Please keep us updated on this. Thanks and have a great day.

Reply