Set up Reclaim for Add to Cart in Klaviyo

This feature can identify abandoned cart contents for both unknown, non-logged in users (Grow contacts) and known, non-logged in customers (emails in your Grow suppression list). If you use this feature, we will send all of those Add to Cart events to you.

NOTE: We must enable this feature for you. If you’ve not already spoken with someone on our team, please ensure you request that we enable this for you.

To use this feature, you must first ensure that you’re using the most recent version of our script on your website. You can find your script in your  account under Code Script > View Script. Click here for a link to all our tutorials on how to add the script to your site, in case you need a refresher.

If you're using our custom Shopify Integration app, the Category Views script will automatically be installed. For those not using this app, view the "On your website" section at the bottom.

Set up Add to Cart flow

Once you have setup the custom Shopify Integration app and we've enabled the feature for you, you will see our additional unique identifier, CartSource: GE, as seen below in a contact profile in Klaviyo:

Additionally, you can see these events successfully passing through in your Retention.com account when you see the Added to Cart option populate under Event Details. This is an easy way to confirm that our events have been successfully implemented:

STEP 1

Copy your existing Add to Cart abandonment flow in Klaviyo (not Abandoned checkout or Product/browse abandonment!) and name it Reclaim Add to Cart. 

Edit the Trigger Filter to include  Dimension where CartSource> Equals > GE and Save. If you're creating a new flow from scratch, use the Added to Cart event and use the same Trigger Filter specified in the previous sentence.

If you don't already have them, you should also add flow filters to exclude anyone who has Started Checkout or Placed Order (ie, what someone has/has not done > placed order > 0 times) before landing in this flow, eg:

You also need to update the flow filters to include:

What someone has done (or not done) > Person has Received Email > where Flow > equals [Add to Cart Reclaim flow] > zero times > in the last > 7 days

Note: Also add this filter to your existing Add to Cart/Abandoned Cart flow (non-Reclaim/Retention flow) to avoid contacts receiving Add to Cart emails from both flows.

STEP 2

Add a 30-minute delay after the Trigger.

STEP 3

Modify your original abandoned cart flow to exclude any contacts with CartSource equals GE. This will be a Trigger Filter where the Dimension should be set to CartSource is not set:

STEP 4

Contact us at support[at]retention.com and request that we enable Add to Cart events for your account. If you're working with our onboarding team, this will already be enabled.

On your website

If you aren't using our custom Shopify Integration app, you will need to add our Add to Cart script to your site builder:

geq.addToCart(item);

Next, edit the snippet.

Snippet 1: For buttons without redirects

You should update your script from this:

<script type="text/javascript">
var _learnq = _learnq || [];
function addedToCart() {
  fetch(window.location.origin + '/cart.js')
  .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    _learnq.push(['track', 'Added to Cart', cart])
  }))
} 
(function (ns, fetch) {
  ns.fetch = function() {
    const response = fetch.apply(this, arguments);
    response.then(res => {
      if ((window.location.origin + '/cart/add.js').includes(res.url)) {
        	addedToCart()
      }
    });
    return response
  }
}(window, window.fetch))
$(document).ajaxComplete(function(event, request, settings){
  if((typeof settings != "undefined") && settings.url == "/cart/add.js"){
      addedToCart()
  }
})

to this:

<script type="text/javascript">
var _learnq = _learnq || [];
function addedToCart() {
  fetch(window.location.origin + '/cart.js')
  .then(res => res.clone().json().then(data => {
    var cart = {
      total_price: data.total_price/100,
      $value: data.total_price/100,
      total_discount: data.total_discount,
      original_total_price: data.original_total_price/100,
      items: data.items
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    _learnq.push(['track', 'Added to Cart', cart])
    geq.addToCart (item);
  }))
} 
(function (ns, fetch) {
  ns.fetch = function() {
    const response = fetch.apply(this, arguments);
    response.then(res => {
      if ((window.location.origin + '/cart/add.js').includes(res.url)) {
        	addedToCart()
      }
    });
    return response
  }
}(window, window.fetch))
$(document).ajaxComplete(function(event, request, settings){
  if((typeof settings != "undefined") && settings.url == "/cart/add.js"){
      addedToCart()
  }
})

Snippet 2: For buttons with redirects defined by a button ID

You should update your script from this:

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

to this:

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

Snippet 3: For buttons with redirects defined by class notation

You should update your script from this:

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

to this:

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
geq.addToCart(item);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>