Instant has native integrations into Shopify and BigCommerce. Alternative platforms like Neto 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!
- Navigate to "Settings & tools" and then "All settings & tools".
- In the "Settings & tools page", select "Custom Scripts".
- The "Custom Scripts" page will show all current custom scripts installed. Select "New" to add a new custom script.
- Paste the code snippet below into the "Page Header" section. This will ensure it is added to every page.
- When complete, click the "Save" button!
<script>
function getCartForInstantEvent(callback) {
// Wait for k4n.checkout to be available
if (window.k4n && window.k4n.checkout && Array.isArray(k4n.checkout.items)) {
// Execute the callback with the cart items
callback(k4n.checkout);
} else {
setTimeout(() => getCartForInstantEvent(callback), 1000);
}
}
function getProductData() {
if (window.k4n && window.k4n.product) {
return {
Title: decodeURIComponent(k4n.product.name),
ItemId: parseInt(k4n.product.product_id),
ProductID: parseInt(k4n.product.product_id),
Categories: k4n.product.categories.map(decodeURIComponent),
ImageUrl: decodeURIComponent(k4n.product.image),
Url: decodeURIComponent(k4n.product.url),
Metadata: {
Price: parseFloat(k4n.product.price),
},
};
}
return null;
}
function getCartItem(item) {
return {
image: decodeURIComponent(item.image),
name: decodeURIComponent(item.name),
product_id: item.product_id,
qty: item.qty,
sku: item.sku,
total: item.total,
unit_price: item.unit_price,
url: decodeURIComponent(item.url)
}
}
// Track Product Viewed
document.addEventListener("DOMContentLoaded", () => {
const product = getProductData();
if (product) {
window.InstantJS.track("PRODUCT_VIEWED", [
{
provider: "KLAVIYO",
event: product,
},
]);
}
});
// Track Add to Cart with dynamic selectors
document.addEventListener("DOMContentLoaded", () => {
const addToCartButtons = document.querySelectorAll("[name='add-to-cart'], [name='addToCart'], [class*='addtocart'], [class*='add-to-cart'], [class*='btn-add-to-cart']"); // Add other potential selectors here
addToCartButtons.forEach(button => {
button.addEventListener("click", () => {
const product = getProductData();
let cartItems;
if(window.nCartCache) {
cartItems = window.nCartCache
}
if (product) {
window.InstantJS.track("ITEM_ADDED_TO_CART", [
{
provider: "KLAVIYO",
event: {
...product,
items: cartItems
},
},
]);
}
});
});
});
// Track Cart Viewed
document.addEventListener("DOMContentLoaded", () => {
if (window.location.href.includes("cart") && !window.location.href.includes("payment")) {
getCartForInstantEvent(function (checkout) {
window.InstantJS.track("CART_VIEWED", [
{
provider: "KLAVIYO",
event: {
items: checkout.items.map((item) => {
return getCartItem(item)
}),
total: checkout.total
},
},
]);
});
}
});
// Track Checkout Started
document.addEventListener("DOMContentLoaded", () => {
if (window.location.href.includes("cart") && window.location.href.includes("payment")) {
getCartForInstantEvent(function (checkout) {
window.InstantJS.track("CHECKOUT_STARTED", [
{
provider: "KLAVIYO",
event: {
items: checkout.items.map((item) => {
return getCartItem(item)
}),
total: checkout.total
},
},
]);
});
}
});
</script>
Step 3: Update Event Properties
In the code snippet above, the following events have a structured payload:
- PRODUCT_VIEWED
- ITEM_ADDED_TO_CART
- CART_VIEWED
- CHECKOUT_STARTED
event: {
image: decodeURIComponent(item.image),
name: decodeURIComponent(item.name),
product_id: item.product_id,
qty: item.qty,
sku: item.sku,
total: item.total,
unit_price: item.unit_price,
url: decodeURIComponent(item.url)
}
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_name' in your templates, you will need to change the 'name' property to 'item_name'. 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.