How to Set Up Tracking for a Headless Shopify Store with Vendo + Mixpanel

When using a headless Shopify setup, tracking users from browsing to checkout can be tricky. Unlike standard Shopify, headless sites must handle user identity on their own.

⚠️ Why This Matters

In a headless setup:

On the website, user identity is based on the device ID set by Mixpanel.
On the checkout page, user identity is based on the Shopify ID provided by Shopify.

These two environments use different IDs for the same user. you need to link the device ID (from the website) with the Shopify ID (in checkout)

Note: This solution only works if you're using Mixpanel’s Original ID Merge — not the simplified identity model.

✅ Step 1: Pass the Device ID to Checkout via Cookie

Use the following code snippet on your headless site (website) to read the current Mixpanel Device ID and save it in a cookie:

if (typeof window !== 'undefined') {
  try {
    // Safely get distinctId from Mixpanel, fallback to empty string
    const distinctId = window.mixpanel?.get_distinct_id() || '';

    // Set cookie to persist device ID for use in Shopify Checkout
    document.cookie = `device_id=${encodeURIComponent(distinctId)}; domain=${COOKIE_DOMAIN}; path=${COOKIE_PATH}; max-age=${ONE_YEAR_IN_SECONDS}`;
  } catch (error) {
    console.error('Failed to set device ID cookie:', error);
  }
}

🔐 Variables you'll need to define:

COOKIE_DOMAIN — usually your root domain, e.g., .yourdomain.com
COOKIE_PATH — usually /
ONE_YEAR_IN_SECONDS — e.g., 60 * 60 * 24 * 365

✅ Step 2: Merge IDs on the Checkout Page

Once the device ID cookie is set, update your Shopify Checkout tracking script to read that cookie and perform an alias call in Mixpanel to link the IDs.

Paste this into your Shopify Customer Events section:

analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);

  function getCookieValue(cookieName) {
    let name = cookieName + '=';
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i].trim();
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  }

  function waitForCookieAndExecuteMixpanel() {
    const device_id = getCookieValue('device_id');
    const shopify_id = getCookieValue('_shopify_y');
    const email = event.data.checkout.email;

    if (device_id !== '') {
      console.log('Old Device ID:', { device_id });
      console.log('New Device ID (Shopify):', { shopify_id });

      // Mixpanel JS SDK
      (function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
        for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?nMIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]);


      // Initialize Mixpanel, replace xxx with proejct token
      mixpanel.init('xxx', {
        debug: true,
        ignore_dnt: true,
      });

      // Link identities
      mixpanel.alias(shopify_id, device_id);

    } else {
      // Wait and try again
      setTimeout(waitForCookieAndExecuteMixpanel, 500);
    }
  }

  waitForCookieAndExecuteMixpanel();
});

🧪 Testing Your Setup

Open your headless storefront
Confirm the device_id cookie is being set
Go through the checkout and inspect the network requests for Mixpanel
Verify that the alias() call includes both the device_id and _shopify_y

💬 Need Help?

If you're stuck or unsure which identity model you're using, reach out to our support team — we're here to help.