Overview
Have you noticed that your Klaviyo isn't registering Add to Cart events after installing UpCart?
This is because UpCart is designed to consume all add to cart events so that it can handle the behaviour. This means other scripts, like Klaviyo’s, won’t be able to see the event anymore.
There’s a few possible solutions you can try to resolve this, but before you begin make sure you have Onsite Tracking (with Viewed Product tracking) enabled in Klaviyo. Klaviyo's documentation goes over how to do this.
Solution #1
This solution is faster to implement but may cause some unexpected behaviour which will be described below.
Turn on the Enhanced AJAX API Compatibility setting in UpCart.
This setting can be used to tell UpCart to stop interfering with the Add to Cart process.
This is may cause unexpected behaviour because the Add to Cart event will now be handled by other scripts. So if another app wants to go to the Shopify cart page instead of opening UpCart, they will!
Make sure to test if any Add to Cart buttons start taking the customer to the Shopify cart page. If so, disable the setting and then use Solution #2 instead to prevent this behaviour.
Solution #2 (Recommended)
While this solution is more difficult to implement, it's a great alternative that would prevent any issues you may have experienced with the first solution.
For this solution, you'll want to go to the Custom HTML section
UpCart > Settings > Custom HTML
You'll then want to ensure you're in the "Scripts (Before Load)" HTML location by clicking on the dropdown pictured below.
Insert this script into the Custom HTML field.
<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 the Script Does
The script makes it so that every time UpCart detects an Add to Cart event, it tells Klaviyo to track a "Added to Cart" event.
Afterwards, it then prints a message in the web browser’s console letting us know whether this succeeded or failed.
This message is purely there as a visual so that we can see if it worked or not.
Testing the Script
Klaviyo provides documentation here that goes over how to test your new Add to Cart event tracking. We recommend following their documentation and reaching out to them if you have any questions in regards to it!