Contributor I

Solved

Add to cart Snippet now showing in klaviyo analytics

Forum|Forum|5 years ago
June 26, 2021
3 replies
488 views

Hi there,

I have been trying to add the Add To Cart snippet into Klaviyo for 2 days now and can’t not figure out what I’m doing wrong. On my website, there isn’t any clear representation of what the ID should be. Any help is appreciated, thank you!

This topic has been closed for replies.

Best answer by David To

Hello @TZ210,

Thanks for sharing your question with the Klaviyo Community!

Assuming that the screenshot in blue is the code for your button, it appears your button is actually using a class notation as opposed to an ID which is why your add to cart code isn’t working.

I would recommend following the instructions found under the Alternate Code Snippet for "Add to Cart" Button without an ID subsection of the How to Create a Custom "Added to Cart" Event for Shopify article to properly implement the add to cart functionality. Since your button is using a class notation, you’ll actually need to adjust and use the below base code:

<script type="text/javascript">
  var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
  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>

I’ve also included some other Community post below that may further guide you in this process:

I hope this helps!

David

David ToAnswer

Klaviyo Employee

Hello @TZ210,

Thanks for sharing your question with the Klaviyo Community!

Assuming that the screenshot in blue is the code for your button, it appears your button is actually using a class notation as opposed to an ID which is why your add to cart code isn’t working.

I would recommend following the instructions found under the Alternate Code Snippet for "Add to Cart" Button without an ID subsection of the How to Create a Custom "Added to Cart" Event for Shopify article to properly implement the add to cart functionality. Since your button is using a class notation, you’ll actually need to adjust and use the below base code:

<script type="text/javascript">
  var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
  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>

I’ve also included some other Community post below that may further guide you in this process:

I hope this helps!

David

T

TZ210Author

Contributor I

Thank you, I have tried entering the words after class=”XXX” into the image attached below, and added to cart but still have no luck. Please see if I’m doing it correctly.

David To

Klaviyo Employee

Hey @TZ210,

That implementation does look correct!

After installing the code, the add to cart metric will not appear in your analytics immediately. The metric will only display in your analytics tab once at least one profile has triggered this event and recorded the metric. To self test and trigger this event, I would recommend ensuring that you have cookied your own browser prior to adding the product to the cart.

You can find my instructions on how to cookie and self identify your browser from my comment in a similar Community Post which I’ve included below:

You can cookie your own browser with your desired email by following these steps:
Navigate to your website/homepage in an incognito browser

Add the following to the end of your store URL, replacing example@gmail.com with your email address:
?utm_email=example@gmail.com
Example URL: wwww.ExampleWebsite.com/?utm_email=example@gmail.com

After you reload the page your browser should be cookied with your desired email address, which would create a profile within Klaviyo

Search in Klaviyo for your email address

Have a great day!

David

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials