Please do not proceed with these steps unless you have been advised by the Instant team that it is required.
By default, the Instant pixel handles all event tracking end-to-end without any manual intervention.
As of September 2024, we have identified a number of merchants who experience issues with Shopify Customer events not sending through all events. Instant's native integration relies on Shopify Customer Events. These Customer Events bug(s) are unrelated to Instant, have been reported by other vendors e.g. here and are related to Shopify's recent updates.
This guide is only written for sites that have run into issues with Shopify's Customer Events tracking which prevents the native Instant integration from working.
For the below to work, please ensure you already have normal Klaviyo tracking enabled.
- Proceed to your Shopify dashboard and click on Sales channels > Online Store in your sidebar
- Click on the three dots next to Customize, and click on Edit code.
- Proceed into theme.liquid, which is located under layout.
- Locate in the theme.liquid file.
- Copy and paste the code below, and add it just above {{ content_for_header }}.
<script>
var audiencesManualTrackingInitialized = false;
const audiencesManualTracking = setInterval(() => {
if (
typeof item === 'undefined' ||
audiencesManualTrackingInitialized ||
!window.InstantJS
) {
return;
}
clearInterval(audiencesManualTracking);
audiencesManualTrackingInitialized = true;
window.InstantJS.track('PRODUCT_VIEWED', [
{
provider: 'KLAVIYO',
event: item,
},
]);
}, 500);
function audiencesAddedToCart() {
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);
}
window.InstantJS.track('ITEM_ADDED_TO_CART', [
{
event: cart,
provider: 'KLAVIYO',
},
]);
});
}
(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) &&
res.url !== ''
) {
audiencesAddedToCart();
}
});
return response;
};
})(window, window.fetch);
(function (ns) {
var originalXhrOpen = XMLHttpRequest.prototype.open;
var originalXhrSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.open = function (method, url) {
this._url = url;
return originalXhrOpen.apply(this, arguments);
};
XMLHttpRequest.prototype.send = function () {
this.addEventListener('load', function () {
if (this._url && this._url.includes('cart/add.js')) {
audiencesAddedToCart();
}
});
return originalXhrSend.apply(this, arguments);
};
})(window);
</script> - Once the code is added, click on "Save" in the top right.
More information regarding the underlying issue with Customer Events:
On some merchants, a bug is present which prevents the iframe for Shopify Customer Events to load. The Shopify Customer Events functionality provides the Instant pixel with a full event stream to record when someone viewed a product, or adds an item to cart, for example.
This bug will cause the Instant pixel to not receive this event stream.
To identify whether this bug exists, simply open the javascript console, and click repeatedly in any given area on the page.
For every time you click, you will see this error appear in your console.
