Using Instant Audiences with a Custom 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. There are detailed instructions for:

1. Using Instant Audiences with a WooCommerce Store
2. Using Instant Audiences with a Neto Store
3. Using Instant Audiences with a Shopify Headless Store

If your custom build is not covered by these guides, please keep reading below!

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.

Step 2: Tracking Customer Events

Event triggers determine when Instant interaction events are sent and contain the payload data for Klaviyo.

1. 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

Example: Checkout started events

To track when a customer starts the checkout flow, you'll need to execute the following JavaScript code as soon as someone visits the checkout page. The payload data serves as a placeholder to demonstrate the required data structure for Instant Audiences.

window.InstantJS.track("CHECKOUT_STARTED", [
  {
    provider: "KLAVIYO",
    event: {
      CheckoutURL: "",
      Items: [
        {
          ProductName: "",
          Quantity: "1",
          ItemPrice: "19.95",
          ImageURL:
            ""
        },
        {
          ProductName: "",
          Quantity: "1",
          ItemPrice: "221.95",
          ImageURL:
            ""
        },
      ],
    },
  },
]);

Example: Add to cart events

To track when a customer adds an item to their cart, you'll need to execute the following JavaScript code when the “Add to Cart” button is clicked.

One implementation method is to add an event listener to the "Add to Cart" button on relevant pages. When clicked, this will trigger the code shown below. The payload data serves as a placeholder to demonstrate the required data structure for Instant Audiences.

window.InstantJS.track("ITEM_ADDED_TO_CART", [
  {
    provider: "KLAVIYO",
    event: {
      CheckoutURL: "",
      Items: [
        {
          ProductName: "",
          Quantity: "1",
          ItemPrice: "19.95",
          ImageURL: "",
        },
        {
          ProductName: "",
          Quantity: "1",
          ItemPrice: "221.95",
          ImageURL: "",
        },
      ],
    },
  },
]);

window.InstantJS.track("PRODUCT_VIEWED", [
  {
    provider: "KLAVIYO",
    event: {
      ProductName: "",
      ItemPrice: "370.00",
      ImageURL: ""
    },
  },
]);

Step 3: Update Event Properties

In the code snippet above, the PRODUCT_VIEWED event has a structured event payload:

event: {
  ProductName: "",
  ItemPrice: "370.00",
  ImageURL: ""
}

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_price' in your templates, you will need to change the 'ItemPrice' property to 'item_price'. Similarly, this must be done for any properties your email templates require that are not included in our payload.