Shopify Customer Event

Overview

This guide walks you through adding the Webeyez tracking code as a Customer Event in Shopify. This ensures accurate tracking of user behavior and enables Webeyez to deliver actionable insights across your storefront.

Prerequisites

Before you begin, make sure you have:

• Access to your Shopify Admin

Step-by-Step Setup

1. Access Customer Events

1. Log in to your Shopify Admin
2. Navigate to:
   Settings → Customer Events

2. Add a Custom Pixel

1. Click “Add custom pixel”
2. Give it a clear name, e.g.:
3. • Webeyez Tracking
3. Click “Add pixel”

3. Insert Webeyez Code

1. In the code editor, paste the code below (it's the same code for all companies)
   

/** This snippet to be injected to the shopify app **/
const events = [
  "checkout_address_info_submitted",
  "checkout_completed",
  "checkout_contact_info_submitted",
  "checkout_shipping_info_submitted",
  "checkout_started",
  "payment_info_submitted",
  "page_viewed",
  "collection_viewed",
  "product_added_to_cart",
  "product_viewed",
  "search_submitted",
  "cart_viewed",
];
const checkoutEvents = [
  "checkout_address_info_submitted",
  "checkout_completed",
  "checkout_contact_info_submitted",
  "checkout_shipping_info_submitted",
  "checkout_started",
];
const formDataParams = {
  shopify_data: "shopify_data",
  shopify_session_id: "shopify_sessionKey",
  webeyez_session_id: "sessionKey",
  webeyez_user_id: "wz_userKey",
  page_id: "page_id",
};
const errorMessages = {
  defaultError: "Error",
};
async function sendData(event, eventType) {
  let webeyez_session_id = null;
  const browserApi = typeof browser !== 'undefined' ? browser : null;

  if (browserApi && browserApi.localStorage) {
    webeyez_session_id = await browserApi.localStorage.getItem("wz_sid_storage");
  } else if (typeof localStorage !== 'undefined') {
    webeyez_session_id = localStorage.getItem("wz_sid_storage");
  }

  // Silent - if no sid is found, do not activate any code/send data on the extensibility
  if (!webeyez_session_id) {
    return;
  }

  const data = {};
  const pathname = event.context.document.location.pathname;

  // Use sessionStorage instead of cookie for page ID tracking
  let pageIdSession = null;
  if (browserApi && browserApi.sessionStorage) {
    pageIdSession = await browserApi.sessionStorage.getItem(pathname);
  } else if (typeof sessionStorage !== 'undefined') {
    pageIdSession = sessionStorage.getItem(pathname);
  }

  if (pageIdSession) {
    data[formDataParams.page_id] = pageIdSession;
  } else {
    const randomPageId = new Date().getTime().toString();
    if (browserApi && browserApi.sessionStorage) {
      await browserApi.sessionStorage.setItem(pathname, randomPageId);
    } else if (typeof sessionStorage !== 'undefined') {
      sessionStorage.setItem(pathname, randomPageId);
    }
    data[formDataParams.page_id] = randomPageId;
  }

  data[formDataParams.shopify_data] = JSON.stringify({ ...event });
  data[formDataParams.webeyez_session_id] = webeyez_session_id;

  const url = "https://ingest.webeyez.com/shopify-ingest";
  const response = await fetch(url, {
    method: "POST",
    headers: {},
    body: JSON.stringify(data),
  });
  if (!response.ok) throw new Error(errorMessages.defaultError);
}
events.forEach((event_item) =>
  analytics.subscribe(event_item, (event) => {
    sendData(event, event_item);
  })
);
// Listen for the custom event from the main storefront tracker
analytics.subscribe("webeyez_session_init", async (event) => {
  if (event.customData && event.customData.sid) {
    const browserApi = typeof browser !== 'undefined' ? browser : null;
    if (browserApi && browserApi.localStorage) {
      await browserApi.localStorage.setItem("wz_sid_storage", event.customData.sid);
    } else if (typeof localStorage !== 'undefined') {
      localStorage.setItem("wz_sid_storage", event.customData.sid);
    }
  }
});

4. Configure Permissions

Ensure the following settings are enabled:

• Customer events tracking
• Analytics / Marketing permissions (if applicable)

5. Save & Connect

1. Click Save
2. Click Connect to activate the pixel