> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Klaviyo Add to Cart Event Tracking in Upcart

> This article explains how to enable accurate Klaviyo event tracking when customers add items to their cart using Upcart.

# Overview

By default, Upcart takes over Shopify's cart functionality, which can prevent third-party apps like **Klaviyo** from detecting cart updates. Fortunately, there are two reliable ways to restore **Add to Cart (ATC)** tracking in Klaviyo while keeping Upcart active.

Before you begin, make sure **Klaviyo Onsite Tracking** is properly configured. You can follow their setup guide here:\
👉 [Klaviyo Onsite Tracking Setup Guide](https://help.klaviyo.com/hc/en-us/articles/4425956184731)

***

## Option 1: Use AJAX Compatibility (Fastest Setup)

Upcart includes a setting that restores compatibility with other apps by exposing Shopify's native cart update behavior. When this is enabled, Klaviyo can once again listen for Add to Cart events.

## How to enable:

1. Go to **Upcart > Cart Editor > Settings**
2. Enable the setting: **Enhanced AJAX API Compatibility**
3. Click **Save** and test the result

⚠️ **Important: Enhanced AJAX API Compatibility trade-offs**\
This setting is **disabled by default** for most stores. Enable it ONLY if your store uses a non-standard AJAX cart API and Upcart is not intercepting add-to-cart events. When enabled, other apps gain more control over cart behavior, which can cause redirect loops or send customers to the Shopify cart page instead of opening the Upcart drawer. If enabling this setting causes redirects, disable it and switch to **Option 2** instead, using the manual Upcart API (`upcartRegisterAddToCart`).

For complete guidance on this setting, see [Enhanced AJAX API Compatibility](/upcart/enhanced_ajax_api_compatibility).

***

## Option 2 (Recommended): Add a Custom Klaviyo Script

This method gives you the best of both worlds, **Upcart stays in full control**, and **Klaviyo tracking still works**.

## Steps:

1. Open **Upcart > Cart Editor > Settings**
2. Scroll down to the **Custom HTML** section
3. From the dropdown, choose **Scripts (Before Load)**
4. Paste the following script:

Modern API (recommended):

```
<script>
  window.upcartSubscribeAddedToCart(function(event) { TrackATC(); });
  window.upcartSubscribeUpsellsAddedToCart(function(event) { TrackATC(); });
</script>
```

Legacy API (still works but deprecated):

```
<script>  
  function TrackATC(){  
    var _learnq = window._learnq || [];  
    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,  
          };  
          _learnq.push(['track', 'Added to Cart', cart]);  
          console.log("Klaviyo ATC");  
        }).catch((e) => {  
          console.error('Klaviyo add to cart tracking failed', e);  
        })  
      );  
  }  
  
  window.upcartOnAddToCart = () => { TrackATC(); };  
  window.upcartOnAddUpsell = () => { TrackATC(); };  
</script>
```

***

## What this does:

* Sends an "Added to Cart" event to Klaviyo any time a product or upsell is added using Upcart
* Adds a confirmation message (`Klaviyo ATC`) to your browser console so you know it's working

***

## How to Test Your Setup

To confirm your Klaviyo integration is working properly:

* Follow [Klaviyo's guide to testing Add to Cart events](https://help.klaviyo.com/hc/en-us/articles/4425956184731)
* Use your browser's **Console** tab to verify the "Klaviyo ATC" log appears after adding a product
* Check Klaviyo's analytics dashboard for ATC event data

If you still don't see tracking data, confirm that Klaviyo's onsite scripts are installed and enabled. For help, contact [Klaviyo Help Center](https://help.klaviyo.com/hc/en-us).

***

## Summary

|                                          |                                          |                                    |
| ---------------------------------------- | ---------------------------------------- | ---------------------------------- |
| Method                                   | Benefits                                 | When to Use                        |
| **Option 1** – Enable AJAX Compatibility | Fastest setup, no code required          | When other apps don't interfere    |
| **Option 2** – Add Custom Script         | Most reliable, Upcart remains in control | When Option 1 causes cart redirect |

If you're using Klaviyo and Upcart together, this guide should help you track events smoothly while keeping your cart drawer experience intact.

***

Need more help? Reach out to us via in-app support.