Solved

Add To Cart Metric not working - Gempages

  • 6 April 2023
  • 7 replies
  • 385 views

Hello everyone,

 

I’m stuck on setting up the “Add to cart” metric and I’m starting to run out of ideas.

 

I started out by trying the default script.

  1. I tried adding the code to a Custom Liquid Element in Gempages → Did not work.
  2. I tried adding the code to a Custom Liquid Element in Shopify → Did not work.

After the first script did not work I gave the button an id, namely: “AddToCart” with the following script:

 

<script type="text/javascript">
var _learnq = _learnq || [];
document.getElementById("AddToCart").addEventListener('click',function (){
_learnq.push(['track', 'Added to Cart', item]);
});</script>

Once again, I added the code to a Custom Liquid Element in Gempages and Shopify independently, which did not work.

 

I tried opting for the third script, which is defined by class name.
 

From this code I identified the Add To Cart button class to be: “gf_add-to-cart”

 

I tried the following script on Gempages and Shopify independently as in previous trials.

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


Lastly, every time I added a script I did the following steps:

  1. Open incognito browser and go to homepage → I added this to the end of the url: ?utm_email=myemail@gmail.com
  2. Reloaded the page
  3. Found a product and clicked on it
  4. Added Product to Cart
  5. Checked Klaviyo Metrics + Profile


I’m unsure if the app “UpCart” is interferring since it is also triggered on add to cart?

Appreciate anyone helping, thank you!

icon

Best answer by Taylor Tarpley 7 April 2023, 17:58

View original

7 replies

Userlevel 7
Badge +60

Hi@Slemming

 

Welcome to the Community! Sorry to hear how frustrating this has been, happy to help! 

 

Since you are using Upcart, have you make sure to change your endpoints in this Add to cart script? Upcart changes the endpoint that is used to add an item to the shopping cart from /cart/add.js to /cart/add.js?upcart=1

 

 

If you haven’t this might be the issue! Please replace everything in your Shopify admin from opening <script> tag to closing </script> tag. You can refer to our install directions if you do not remember where you previously installed the current script: Where should I paste my snippet?
 
After making this update, you can test this out as a cookied (identified) profile by doing the following:

  1. Copy this link: https://wishgarden-herbs.myshopify.com/?utm_email=bill.moran@wishgardenherbs.com
  2. Paste it into your same/current web browser window and press enter
  3. Proceed to view a product page
  4. Press the Add to Cart button
  5. Check your profile within Klaviyo to see that the Added to Cart event was properly recorded

 

Thanks for participating in the Community!

-Taylor

Hi @Taylor Tarpley,

Thank you, I’m glad to be here.

You are completely right, the issue was the endpoints, and your solution worked! 

 

Appreciate you so much for helping me out!

 

If anyone else ends up with this issue, my solution was:

  • Adding the code snippet to theme.liquid file in Shopify
  • Update endpoints on script as pointed out by Taylor, from /cart/add.js to /cart/add.js?upcart=1

 

Wishing you a wonderful weekend! 

 

-Lucas

Hi there, I have the same situation like you, my brand use Gempages and Upcart. I tried like you suggested, adding the code /cart/add.js?upcart=1 but it’s not working. 

One thing to note that my “add to cart” metric does record some people, but when I tested, it doesn’t appear with my email. The number of people that activates “add to cart” is below 15 people, while the active profiles are 25,000+. 

I tried both theme liquid and custom liquid block but it still doesn’t work. 
 

Also my Gempage pages button has some difference, some was coded with id, some without id. Not sure if that’s is the reason. 


Not sure if there’s any app that interferes the add to cart button or there’s any new update to the Upcart app. 

Many thanks if someone could help me with this. 

Userlevel 7
Badge +60

Hey @tianvu99,

This sort of behavior is typical if your add to cart button for your site is not using consistent button IDs or global classes. I’ve previously explained this a bit in the Community post below:

Ideally, you’ll want to ensure all the add to cart buttons for your site are using the same global class or button ID in order for Klaviyo to recognize they’ve been clicked on. 

I hope this helps!

David

Hey @tianvu99,

This sort of behavior is typical if your add to cart button for your site is not using consistent button IDs or global classes. I’ve previously explained this a bit in the Community post below:

Ideally, you’ll want to ensure all the add to cart buttons for your site are using the same global class or button ID in order for Klaviyo to recognize they’ve been clicked on. 

I hope this helps!

David

Thanks alot David, you’re my savior! Could you help me with two more question?

 

(1) is there any tutorial that can help me change or add an id to all the buttons without an IT help that I can do by myself? I mean I can add an ID to the code of the buttons, but I’m not sure if it will affect other things as I not an expert with coding, and my company doesn’t have an IT? 

(2) If I give all the buttons an ID and I the snippet for the ID like the instruction, that would solve the problem? Or not giving all the buttons an ID, but a class?

I read the link you gave and this is what makes me think it’s possible to give all the buttons an ID (or class) and try the snippet again, but my BIGGEST concern is: will adding or changing ID or class affect other things, as we are using Gempage and Upcart and it may affects the functionaility of these apps.


You'll want to work with your developer or theme's developer to use an ID that's consistent across all product pages, or add a class to all of their product pages (such as "add-to-cart"), so that we can track the metric off of a single identifier.

 

Thanks again David

Userlevel 7
Badge +60

Hey @tianvu99,

We don’t offer any tutorials on how to change or add an ID or class to a button. Because making changes to your site code and theme codes could impact various areas of your site, I would strongly advise working alongside your developer or reaching out to a developer you’re familiar with. 

If you need an introduction to a developer, I would suggest reaching out to ones through our Klaviyo Partner Directory who excel at Klaviyo. 

David

Badge

I’m confused about the endpoints part. I’m using this code in my main-product.liquid and this is working fine with default cart drawer but when i use upcart then it doesn’t. I’m not using gempages or anything like that, only upcart with dawn 12 theme.

 

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

 

Reply