Skip to main content
Solved

Spent a whole week trying to get AddtoCart to Collections Pages

  • February 9, 2022
  • 5 replies
  • 433 views

Forum|alt.badge.img+5

I’m using Shopify and Gempages. There are two suboourn parameters that I’m trying to trigger for flows:

  1. addToCart from a Collection Page
  2. Product Removed from Cart

Klaviyo only seems to track AddtoCart correctly from Product Pages, but not collection pages, so I sucked it up and added the LittleData connection into Segment.io. Voila, I was so happy to get advanced data piped right into Klaviyo as a source, unfortunately, the two parameters I need above require the E-mail parameter to be attached and to the event and LittleData won’t do this.

So I emailed support and they sent me some code to put on collection pages from Josh Nelson, but when I put this code in Shopify or in GTM, the code returns an error.

Is there anyone using Shopify who can:

  1. Successfully track addToCart from Collection Pages
  2. Successfully track Remove from Cart Event
  3. Successfully integrated Segment.io or another CDP that can send this data

 

----Code from Josh----

var_learnq = _learnq || [];

{% assign my_product = ''%}

$('.add_to_cart').on('click', function(){

varvarIDx = $(this).parent('form').children('input[name="id"]').val();

console.log('varX: '+varIDx);

var_learnq = _learnq || [];

switch(varIDx) {

{% forproduct incollection.products %}

{% forvariant inproduct.variants %}

{% ifproduct.type == '5 - 7'%}

case'{{ variant.id }}':

{% assign my_product = product.handle %}

varvariantID = {{ variant.id }};

varvariantTitle = '{{ variant.title }}';

varvariantImg = '{{ variant.featured_image.src|img_url:'grande' }}';

varvariantURL = '{{ variant.url }}';

varitem = {

Name: {{ all_products[my_product].title | json }},

ProductID: {{ all_products[my_product].id|json }},

Categories: "{{ collection.title }}",

//          ImageURL: "https:{{ all_products[my_product].featured_image.src|img_url:'grande' }}",  

ImageURL: variantImg,

//          URL: "{{ shop.secure_url }}{{ all_products[my_product].url }}",

URL: "{{ shop.secure_url }}"+variantURL,

Brand: {{ all_products[my_product].vendor|json }},

Price: {{ all_products[my_product].price|money_without_currency|json }},

CompareAtPrice: {{ all_products[my_product].compare_at_price_max|money_without_currency|json }},

VariantID: variantID,

VariantTitle: variantTitle,

Currency: $('#xGE').attr('data-currency')

};

break;

{% endif %}

{% endfor %}

{% endfor %}

}

console.log(item);

_learnq.push(['track', 'Added to Cart', item]);

});

Best answer by stephen.trumble

Hey @jmacman 

Thank you for coming to the Klaviyo Community for help with this!

Since you have already received a response from Josh, I am reaching back out this him since he is an expert on this to see what happened and how we can fix it. I will update this thread as soon as i hear back from Josh on how we can troubleshoot this the best for your account!

Thank you so much for being part of the Klaviyo Community!

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

5 replies

stephen.trumble
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 1518 replies
  • Answer
  • February 10, 2022

Hey @jmacman 

Thank you for coming to the Klaviyo Community for help with this!

Since you have already received a response from Josh, I am reaching back out this him since he is an expert on this to see what happened and how we can fix it. I will update this thread as soon as i hear back from Josh on how we can troubleshoot this the best for your account!

Thank you so much for being part of the Klaviyo Community!


Forum|alt.badge.img+5
  • Author
  • Problem Solver II
  • 23 replies
  • March 1, 2022

I found no fix for this other than paying for expensive Segment.io. I had to change up my entire site just to work around this limitation. The JavaScript code didn’t work.


Forum|alt.badge.img+1

I am using the Flow Theme 2.0 in shopify.

The code when I go to inspect it on the website looks like this

There is a clear “ID”

 

So then I go next to the code provided by Klaviyo.

 

<script type="text/javascript">

var _learnq = _learnq || [];

document.getElementById("AddToCart").addEventListener('click',function (){

  _learnq.push(['track', 'Added to Cart', item]);

});</script>

 

Specifically in the getElementByID it shows the correct AddToCart without needing to even edit the code they give.

 

Using the 2.0 method, I can see in Klayvio the “viewed product” action happening. However, I cannot see the Added To Cart. 

 

It appears that everything I have done after reading many forums is correct.

 

Can someone help me figure out why the Added to Cart isn’t showing up, even though the button ID is correct. I have the viewed product custom liquid above the added to cart’s custom liquid. 

 

Very frustrating. 

 

Thanks


Forum|alt.badge.img+5
  • Author
  • Problem Solver II
  • 23 replies
  • March 9, 2022

Yeah, I’m trying to look at some other methods such as using a webhook using Integromat to get the data in there. It makes the store very limiting when you can’t use the Add to Cart Event from Collection pages. 

Feature Request: Klaviyo to have server-side tracking for more events like this.


Forum|alt.badge.img+2
  • Contributor I
  • 2 replies
  • April 25, 2022
Charlie.Willman wrote:

I am using the Flow Theme 2.0 in shopify.

The code when I go to inspect it on the website looks like this

There is a clear “ID”

 

So then I go next to the code provided by Klaviyo.

 

<script type="text/javascript">

var _learnq = _learnq || [];

document.getElementById("AddToCart").addEventListener('click',function (){

  _learnq.push(['track', 'Added to Cart', item]);

});</script>

 

Specifically in the getElementByID it shows the correct AddToCart without needing to even edit the code they give.

 

Using the 2.0 method, I can see in Klayvio the “viewed product” action happening. However, I cannot see the Added To Cart. 

 

It appears that everything I have done after reading many forums is correct.

 

Can someone help me figure out why the Added to Cart isn’t showing up, even though the button ID is correct. I have the viewed product custom liquid above the added to cart’s custom liquid. 

 

Very frustrating. 

 

Thanks

Still trying to resolve this too using the Flow theme. ID matches and works if running the script in the console, but now when on the page. Hopefully you have a solution and can share this?