Guide to Creating an "Added to Cart" Event for BigCommerce

read
Last updated at:

You Will Learn

Learn how to create an Added to Cart event for BigCommerce that tracks when a customer adds an item to their cart and can trigger an abandoned cart flow. Added to Cart events do not automatically track when you integrate with BigCommerce; you must first add (and potentially modify) a JavaScript snippet (included in this guide) to your BigCommerce theme files.

  • You do not need to create the Added to Cart event to send an abandoned cart flow; the Added to Cart abandoned cart flow is separate from the standard abandoned cart flow, which is triggered by Started Checkout
  • Klaviyo’s built-in BigCommerce integration already tracks a Started Checkout event when a customer enters their email during the checkout process after adding item(s) to their cart. 

Before You Begin

The Added to Cart event is only tracked for users previously cookied by Klaviyo

You must already have Viewed Product tracking installed in order for the Added to Cart event to function properly. Typically, Klaviyo customers install this during the BigCommerce integration process and the instructions can be found in our integration how-to article

Adding the Snippet

1. To enable Added to Cart tracking, you’ll need to add a code snippet to your BigCommerce product.html file. To find the file, open your BigCommerce admin and navigate to Storefront > My Themes, find your current theme, and click the Advanced Settings dropdown. Then, search for the product.html file and click to open it. 

2. Paste the snippet below directly underneath the Klaviyo Viewed Product snippet.

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

The following screenshot shows this snippet added to the bottom of the product.html file.

BigCommerce HTML editor with product.html file open and added to cart snippet highlighted at the bottom

3. Next, check if you need to modify your snippet. To do this, 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 highlighted in the snippet below, whose default is form-action-addToCart.

Klaviyo’s Added to Cart snippet on a black background, with button ID form action add To Cart in yellow

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

Example BigCommerce product page showing demo image on left and add to cart button on right, with right click menu open and Inspect highlighted in blue

4. The console will open, showing the source code of the “Add to Cart” button. The following image shows the ID of the "Add to Cart" button highlighted in the console. 

BigCommerce product page with browser console open, showing button ID highlighted within console.

The ID of the button on the page shown here matches form-action-addToCart, so no changes need to be made. 

  • If the ID of the “Add to Cart” button on your site isn’t form-action-addToCart, you’ll need to change the variable text within the quotes to match the button’s ID

If your source code isn’t showing a button ID, skip ahead to the next section and learn how to use an alternate snippet with class notation instead of button notation. 

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

You’ve finished adding the snippet and will now track the Added to Cart event. 

Alternate Snippet for "Add to Cart" Button without a Button ID

For styling reasons, some sites use a class notation instead of a button ID for “Add to Cart” buttons.

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’ll use an alternate code snippet to enable the Added to Cart event. 

1. If your button is defined by class notation, paste the following alternate snippet at the bottom of your product.html file:

<script text="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>

2. This code will likely need to be modified with your class name. Compare your button class name in between the quotations, highlighted in the following example, with the contents in between the parentheses after getElementsByClassName in the code snippet above. For example, the class name in the screenshot is btn product-form_cart-submit btn--secondary-accent and the class in the snippet is named add-to-cart.

Console showing BigCommerce store add to cart button code with class name btn product form cart submit btn secondary account highlighted in yellow

If these two don't match, change the code snippet to reflect the class name for your button.

For example, the code snippet below has been modified with the classname value btn product-form_cart-submit btn--secondary-accent surrounded by double quotations.

Klaviyo alternate Added to Cart snippet on black background with class name btn product form cart submit btn secondary accent

3. Save your product.html file

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

Troubleshooting Your Added to Cart Snippet

After you’ve added the snippet, it should watch the "Add to Cart'' button and track an Added to Cart event whenever a cookied visitor clicks this button. 

This event functions similarly to the Viewed Product event. Each item someone adds to their cart will trigger a new event. You can view these events by:

  1. Navigating to Analytics > Metrics
  2. Searching for the event
  3. Clicking Activity Feed

Klaviyo activity feed for Added to Cart metric showing list of example metrics from users with email addresses and timestamps

If you don’t see Added to Cart events in your account, try the following:

  • Make sure your Klaviyo.js (also known as the Active on Site snippet) is working, which is necessary for Added to Cart to function properly. This should have been added to your site automatically when you integrated with Klaviyo, but you can check that it’s working by following the steps in the confirming web tracking installation section of our How to Integrate with BigCommerce article.
  • Check that your Viewed Product tracking is working, which is also necessary for Added to Cart to function properly. This snippet is added manually, and you can learn how to add and test it in the Viewed Product section of our How to Integrate article

If you are still encountering problems with your Added to Cart snippet, it could be due to an issue with identifying the “Add to Cart” button. In this case, please contact Klaviyo support

The "Added to Cart" Abandoned Cart Flow

When creating an abandoned cart flow (either using Added to Cart or Started Checkout) you can leverage Klaviyo SMS in addition to email. For compliance reasons, make sure to only send one SMS in your flow and if you are using multiple types of abandoned cart flows, make sure to only use SMS in one of them. 

To get started with an abandoned cart flow using the Added to Cart event, we recommend using the pre-built flow available in Klaviyo's Flow Library which has the proper flow filters already set up.

Standard abandoned cart reminder flow card in Klaviyo Flow Library with arrow

In the Essentials section of the library, you will find the standard abandoned cart reminder flow. This flow is triggered by the Started Checkout event.

You can also use an abandoned cart flow specifically triggered by the Added to Cart event. To use this flow, click into the "Prevent lost sales" goal section. The abandoned cart flow triggered by Added to Cart tends to target more casual potential shoppers who have yet to start checkout.

Added to cart trigger abandoned cart reminder card in Klaviyo Flow Library with arrow

You can also filter or search for all abandoned cart reminder flows by searching "abandoned cart" in the toolbar or navigating to the Prevent lost sales goal section on the library landing page.

Klaviyo flow library with abandoned cart in search bar and seven search results showing different flow types

If you implemented our standard BigCommerce Added to Cart snippet, this flow will be ready to go with all the recommended filters and dynamic email content ready to power personalized cart followup emails.

Additional Resources

x
Was this article helpful?
38 out of 73 found this helpful