Shopify Checkout Events and Context Items – Evolv AI

This article describes 3 steps to sending events from the Shopify checkout experience to Evolv AI.

With Shopify's new Extensible Checkout, Shopify prevents third-party JavaScript snippets from being added to pages in the checkout flow. Since the Evolv snippet can't load on the checkout pages, Evolv cannot apply changes to the checkout page, trigger events, or set data on the Evolv context via Javascript.

To send events to Evolv, we can leverage Shopify's Customer Events to send offline events and data to Evolv.

3 Steps to Sending Shopify Customer Events to Evolv AI

1. Checkout Completed and Checkout Value

The following code should be added as a Customer Event in the Shopify admin. The code will send the order value and checkout completed event to Evolv.

analytics.subscribe("checkout_completed", (event) => {
  // insert your environment ID here
  const ENV_ID = "";

  // insert your checkout event key
  const CHECKOUT_EVENT = "";

  // user ID - this value may exist in a cookie if
  // your snippet contains the `data-evolv-use-cookies` attribute
  const UID = localStorage.getItem("evolv:uid");

  // the current timestamp
  const DATE = Date.now();

  // the order value
  const CHECKOUT_VALUE = event.data.checkout.totalPrice.amount;

  fetch(`https://participants.evolv.ai/v1/${ENV_ID}/data`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      client: "shopify",
      messages: [
        {
          type: "context.initialized",
          timestamp: DATE,
          append: true,
          payload: {
            events: [
              {
                type: CHECKOUT_EVENT,
                timestamp: DATE,
              },
            ],
            checkout_value: CHECKOUT_VALUE,
          },
        },
      ],
      uid: UID,
    }),
  });

  fetch(
    `https://participants.evolv.ai/v1/${ENV_ID}/events?type=${CHECKOUT_EVENT}&uid=${UID}`
  );
});