Solved

Setting Up Add To Cart Metric to Show All Products

  • 30 April 2022
  • 3 replies
  • 1163 views

Badge +1

I’m trying to get the Add To Cart Metric working for my Shopify site (https://bigdill.com) so I can setup a true Abandoned Cart flow vs Abandoned Checkout that is native in Klaviyo. I followed the instructions listed in the Klaviyo FAQ regarding setting up the Add to Cart Metric in Shopify and got it working but is only sending over one product at a time instead of all the items in the cart. Ideally we want to send one abaonded cart email with the entire contents vs an email that just displays one item.

 

A few years back I worked with Klaviyo on this for a different site and was provided with the below code, but don’t quite remember how to set it up. So far I’ve tried adding it to the bottom of our product.liquid page, theme.liquid page, and even tried adding to GTM as a new custom html tag. I’m not sure if my error is needing to change something in the code below for my new site or placing it in the wrong locaiton in the code/GTM. I’m also open to any ways of using the Klaviyo Add to Cart metric that I could then combine products from individual events into a single comibned email.

Here is the previous code I used a few years back that worked well:

var _learnq = _learnq || [];
$(document).ajaxComplete(function(event,request, settings){
  if(settings.url == "/cart/add.js"){
    console.log('added')
    jQuery.getJSON('/cart.js', function(cart) {
      cart.total_price =  cart.total_price/100;
      cart.$value = cart.total_price;
      cart.total_discount =  cart.total_discount/100;
      cart.original_total_price =  cart.original_total_price/100;
      for (var cart_item in cart.items) {
        cart.items[cart_item].original_price =  cart.items[cart_item].original_price/100;
        cart.items[cart_item].discounted_price =  cart.items[cart_item].discounted_price/100;
        cart.items[cart_item].line_price =  cart.items[cart_item].line_price/100;
        cart.items[cart_item].price =  cart.items[cart_item].price/100;
        cart.items[cart_item].original_line_price =  cart.items[cart_item].original_line_price/100;
      }
      if (typeof item !== 'undefined') {
        $.extend( cart, item );
      }
      _learnq.push(['track', 'Added to Cart', cart]);
      console.log('sent')
    });
  }
});

icon

Best answer by Dov 4 May 2022, 16:25

View original

3 replies

Userlevel 3
Badge +1

Do you want to display multiple dynamic product on abandoned cart flows? ( when someone abandoned the cart) 

 

I’m not talking about abandoned checkout flow. 

Userlevel 7
Badge +61

Hi @Tbax,

Thanks for sharing this with us. And thanks @ayyub_here for your comment!

@Tbax, I’m glad to hear you were able to get Added to Cart up and running successfully 👌. The default code Klaviyo provides for Added to Cart for Shopify is only meant to ingest a single item at a time per event. More generally, for any event-triggered flows, Klaviyo will ingest one event per message, so you won’t be able to combine products from discrete events into a single combined email. With that said, we have a wonderful developer database that you can use as a reference, and more specifically you can check out the developer guide to adding Added to Cart which contains some sample code that includes multiple items in the Added to Cart payload.

You may be interested to explore our documentation on adding recently viewed items into your emails as well.

Here are some additional guides if you want to dig further into our APIs:

Guide to Integrating a Standard Ecommerce Platform

Getting Started with Klaviyo APIs

Track API (for event metrics based on customer behavior)

Identify API (for custom properties)

Track and Identify API Reference

 

You can also browse our Klaviyo Agency Directory if you’d like to seek further assistance on this.

I hope that’s helpful and thanks for being a member of our community.

Badge +1

Hi, we are trying to display multiple products in a single email, similar to how an Abandoned Checkout works in Klaviyo today. I have accomplished this in my past with Klaviyo using the script above, and worked succesfully. What I’m struggling with remembering is how and where to ingest the above code into my new site. I believe last time my developer used GTM to place the above code but not 100% sure.

Reply