Instant has native integrations into Shopify and BigCommerce. Alternative platforms like WooCommerce require a custom integration. This custom integration involves three steps:
Please contact your customer success manager if you experience any issues. We are happy to guide you or your developers through this implementation if needed.
Step 1: Installing Instant's Pixel
The first step of the integration process requires adding Instant's pixel to your site. This allows Instant to identify anonymous shoppers who visit your website.
- If you're currently onboarding onto the product, your pixel can be found in the Connect Custom Store step.
- If you have already onboarded onto the product, proceed to the Instant dashboard and go to Configuration > Select Custom . You will see a pixel underneath the Custom section.
- Add this pixel to the <head> tag of your website's HTML.
Step 2: Tracking Customer Events
The second step of the integration process requires forwarding customer events to Instant Audiences, similar to how you would already be forwarding these events to Klaviyo!
- Open the WooCommerce Admin Panel, and navigate to Appearance, and then Theme File Editor.
- Select header.php from the list of theme files on the right hand side.
- Add the code snippet below directly to the header.php file.
<script>
function runOnPresence(variableName, callback, interval = 100) {
const checkInterval = setInterval(() => {
if (window[variableName]) {
callback(window[variableName]);
clearInterval(checkInterval);
}
}, interval);
}
function getCartForInstantEvent(callback) {
fetch(window.location.origin + "/wp-json/wc/store/v1/cart", {
method: "GET",
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
if (!response.ok) {
callback(null);
}
return response.json();
})
.then(response => {
console.log("response", response);
callback(response);
})
.catch(error => {
callback(cart);
});
}
runOnPresence('item', function (klItem) {
if (klItem) {
window.InstantJS.track("PRODUCT_VIEWED", [{
provider: "KLAVIYO",
event: {
'Title': klItem.title,
'ItemId': parseInt(klItem.product_id),
'ProductID': parseInt(klItem.product_id),
'variantId': parseInt(klItem.variant_id),
'Categories': klItem.categories,
'ImageUrl': klItem.image_url,
'Url': klItem.url,
'Metadata': {
'Price': parseFloat(klItem.price),
}
}
}]);
}
});
document.addEventListener("DOMContentLoaded", () =>
document.getElementsByName("add-to-cart")[0]?.addEventListener("click", event => {
runOnPresence('item', function (klItem) {
if (klItem) {
window.InstantJS.track("ITEM_ADDED_TO_CART", [{
provider: "KLAVIYO",
event: {
'Title': klItem.title,
'ItemId': parseInt(klItem.product_id),
'ProductID': parseInt(klItem.product_id),
'variantId': parseInt(klItem.variant_id),
'Categories': klItem.categories,
'ImageUrl': klItem.image_url,
'Url': klItem.url,
'Metadata': {
'Price': parseFloat(klItem.price),
}
}
}]);
}
});
})
);
if (window.location.href.includes('cart')) {
getCartForInstantEvent(function (cart) {
window.InstantJS.track("CART_VIEWED", [{
provider: "KLAVIYO",
event: {
cart
}
}]);
})
}
runOnPresence('kl_checkout', function (klCheckout) {
if (klCheckout.event_data) {
getCartForInstantEvent(function (cart) {
window.InstantJS.track("CHECKOUT_STARTED", [{
provider: "KLAVIYO",
event: {
...klCheckout.event_data,
cart
}
}]);
})
}
});
</script>
Step 3: Update Event Properties
In the code snippet above, the PRODUCT_VIEWED and ITEM_ADDED_TO_CART events have a structured event payload:
event: {
'Title': klItem.title,
'ItemId': parseInt(klItem.product_id),
'ProductID': parseInt(klItem.product_id),
'variantId': parseInt(klItem.variant_id),
'Categories': klItem.categories,
'ImageUrl': klItem.image_url,
'Url': klItem.url,
'Metadata': {
'Price': parseFloat(klItem.price),
}
}
The properties in this payload will need to match the properties used in your email templates. For example, if you use the property 'event.item_id' in your templates, you will need to change the 'ItemId' property to 'item_id'. Similarly, this must be done for any properties your email templates require that are not included in our payload.
Please ensure you are passing through all the necessary data required in your email templates.
If you make updates to your email templates without updating your integration, Klaviyo may receive incomplete data.
Once this is finalised, your integration with Instant Audiences is complete.
Please reach out to your customer success manager if you require any assistance.