Solved

Spent a whole week trying to get AddtoCart to Collections Pages

  • 9 February 2022
  • 5 replies
  • 395 views

Userlevel 2
Badge +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]);

});

icon

Best answer by stephen.trumble 10 February 2022, 03:15

View original

5 replies

Userlevel 7
Badge +60

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!

Userlevel 2
Badge +5

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.

Badge +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

Userlevel 2
Badge +5

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.

Badge +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

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?

Reply