How do you integrate Instant Audiences into a custom or headless store?

Instant has native integrations into platforms like Shopify and BigCommerce, however some sites may be headless sites such as a PWA / React app - where the frontend is hosted separately to the back office platform. Or, you may be running an eCommerce store on an alternative platform like Salesforce, WooCommerce etc.

For these websites, Audiences will need to be integrated through a custom integration.

Please contact your customer success manager if you run into any issues - we are happy to guide you or your developers through this implementation if needed.

Steps to integrate Audiences into a headless store:

To integrate Audiences into a headless store please complete the following:

Proceed to the Instant dashboard and go to Audiences > Setup > Ecommerce Platform > Custom. You will see a pixel underneath the Custom section.
Add this pixel to the <head> tag of your website's HTML.
Throughout your website, where you would be sending events to Klaviyo, also send them to Instant Audiences by copy pasting the following snippet just below. See examples below.

window.InstantJS.track("EVENT_TYPE", [{
    provider: "KLAVIYO",
    event: EVENT_DATA
}]);

Replace EVENT_TYPE with the type of event you wish to send.
Replace EVENT_DATA with the data you'd like to send to Audiences. Audiences will then send this data through to your marketing integrations such as Klaviyo. Please note that the structure of this event data payload does not matter. Audiences will simply forward this payload through to Klaviyo.

Note that the available events are as follows:

PAGE_VIEWED, COLLECTION_VIEWED, PRODUCT_VIEWED, ITEM_ADDED_TO_CART, CART_VIEWED, CHECKOUT_STARTED

Once you have completed your custom integration, please reach out to your customer success manager to verify the integration.

Examples:

Example #1: Klaviyo Viewed Product. If your current viewed product tracking looks like the below, then add the call to InstantJS that is in bold:

var _learnq = window._learnq || [];
_learnq.push(['track', 'Viewed Product', item]);

_learnq.push([
    'trackViewedItem', {
        Title: item.ProductName,
        ItemId: item.ProductID,
        Categories: item.Categories,
        ImageUrl: item.ImageURL,
        Url: item.URL,
        Metadata: {
            Brand: item.Brand,
            Price: item.Price,
            CompareAtPrice: item.CompareAtPrice
        }
    }
]);

window.InstantJS.track("PRODUCT_VIEWED", [{
    provider: "KLAVIYO",
    event: {
        MyCustomField: "my_custom_field",
        Title: item.ProductName,
        ItemId: item.ProductID,
        Categories: item.Categories,
        ImageUrl: item.ImageURL,
        Url: item.URL
    }
}]);

Example #2: Klaviyo Add to Cart. If your current add to cart tracking for Klaviyo looks like the below, then add the call to InstantJS that is in bold:

var _learnq = _learnq || [];
var classname = document.getElementsByClassName("add-to-cart");

var addToCart = function() {
    _learnq.push(['track', 'Added to Cart', item]);

    window.InstantJS.track("ITEM_ADDED_TO_CART", [{
        provider: "KLAVIYO",
        event: item
    }]);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', addToCart, false);
}