Set up Reclaim Add to Cart for BigCommerce

Using Reclaim Add to Cart Feature

This feature can identify abandoned cart contents for both unknown, non-logged in users (Resolve contacts) and known, non-logged in customers (emails in your Resolve suppression list). 

If you use this feature, we will send all of those Add to Cart events to 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 > Your View Script.

This feature works for any e-commerce website, but we will show examples for BigCommerce in this tutorial.

Click here for a link to all our tutorials on how to add the script to your site, in case you need a refresher.

At present we can sync Add to Cart events to Klaviyo, Mailchimp, and Drip. 

ON YOUR WEBSITE:

1. Add the following script to the on-click event for adding an item to your cart, such as an “Add to Cart” button:

geq.addToCart(item);

**This feature works for any e-commerce platform, but we have specific examples for BigCommerce**

IN BIGCOMMERCE

Note: You must first have Viewed Product tracking installed in Klaviyo for the Added to Cart event to function properly. Most Klaviyo users install this during the BigCommerce integration process. The instructions for that can be found in this documentation.

Snippet 1: For buttons with an ID

1. Open your BigCommerce admin and navigate to Storefront > My Themes. Find your current theme, and click the Advanced Settings dropdown.

2. Search for the product.html file, and click on it.

3. Paste this snippet directly below the Klaviyo Viewed Product snippet—or replace the current Added to Cart script with this if you already have it installed (ensure the formatting copies/pastes correctly):

var _learnq = _learnq || [];
document.getElementById("form-action-addToCart").addEventListener('click', function () {
  geq.addToCart(item);
  _learnq.push(['track', 'Added to Cart', item]);
});

4. Next, check to see if you need to modify your snippet. You’ll need to check the ID of the “Add to Cart” button on your site and see if it matches the “Add to Cart” variable in the snippet, which has the default ‘form-action-addToCart’.

5. To find the ID of the button, open up one of your site’s product pages. Right-click your “Add to Cart” button, and select Inspect.

When the console opens, you’ll see the source code of the “Add to Cart” button like in this example:

6. If the button ID isn’t ‘form-action-addToCart’, you’ll need to change the variable text within the quotes to match the button’s ID. (If it doesn’t show a button ID, skip to the next section below.)

7. When you’re done, save your product.html file. 

Snippet 1: For buttons without IDs

If your “Add to Cart button does not have a button ID (which you can determine by following the steps in the previous section) and instead uses a class notation, you will need to use an alternate snippet.

1. Paste the following alternate snippet at the bottom of your product.html file (ensure the formatting copies/pastes correctly):

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

This code will likely need to be modified with your class name.

2. Compare your button class name in between the quotations with the contents in between the parentheses after ‘getElementsByClassName’ in the code snippet above. If these two don’t match, change the code snippet to reflect the class name for your button.

3. Save your product.html file

Once you save, you’ve finished adding the snippet and can now track the Added to Cart event. 

IN KLAVIYO: SET UP YOUR FLOW(S)

Once your existing Klaviyo snippet is modified/edited to include our script, 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 AddedtoCart 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:

STEP 2

Add a 30 minute delay after the Trigger.

STEP 3

Add a conditional split. The purpose of this is to create a fork in your flow for those who are Retention.com contacts (ie, unknown, not logged in) and those that are known but not logged in to compare performance between the two segments.

Note that this requires our Klaviyo integration identifier to be turned on. Contact us if you need this enabled. 

Select Properties about someone > data_source > equals GE:

STEP 4

Copy your flow content over to the No side of the split – both sides should receive the same email flows.

STEP 5

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 6

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.