Custom "Added to Cart" Event - Shogun

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.

2. 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.
3. 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.