Skip to main content
Mixpanel Autocapture gathers pageviews, clicks, scroll events (and more!) automatically. With minimal setup, you can easily unlock fine-grain insights into how customers are engaging with your Shopify storefront. Alternatively, for a powerful cross-platform, no-code solution that syncs your data across surfaces like ad and payment platforms, consider the Vendo/Mixpanel integration available in the Shopify app store. This guide explores two simple options to integrate Mixpanel’s Javascript SDK into your shop:
  1. Mixpanel SDK + Autocapture: collect data automatically (minimal setup)
  2. Mixpanel SDK + Shopify Web Pixel: define your own customer events (robust, yet approachable setup)
For optimal visibility, we recommend both! Shopify’s checkout flow is strict about only running proprietary scripts, but you can still fully capture conversion events by implementing Option 2 with the Shopify Web Pixel setup guide.

Install Mixpanel SDK with Autocapture

Automatically collect customer events with minimal steps
  1. Copy the Mixpanel SDK code snippet at the top of this guide
  2. Go to your Store Dashboard > Sales Channels > Online Store > Theme and click “Edit code”
  3. Open the theme.liquid file and scroll down to the closing </head> tag
  4. Paste the code snippet you just copied to add Mixpanel’s SDK (we’re almost there—we just need to do one more thing to enable it)
  5. Go to your Mixpanel Dashboard > Project Settings and copy your Project Token under Access Keys
  6. Back in your Shopify theme.liquid file, enable Mixpanel’s SDK by adding your Project Token to the mixpanel.init code (wrapped in script tags). Altogether, it should look like this:
  7. Confirm the configuration in your Mixpanel Project and enjoy a data pipeline flowing with [Auto] tracked events!

Mixpanel SDK + Shopify Web Pixel

Define your own customer events with an approachable setup
  1. Copy the Mixpanel SDK code snippet at the top of this guide and remove the <script></script> wrapper tags
  2. Go to your Shopify Store > Settings > Customer Events, click “Add custom Pixel”, and name your Pixel something snazzy
  3. Add some code to get your Pixel up and running. This code is a three-part recipe that will:
    • Subscribe to Shopify’s Pixel Event API
    • Load the Mixpanel SDK snippet that you copied in step 1
    • Define and track the customer events we’d like to collect (reference the complete property list in Shopify’s Web Pixel Event API docs)
    An outline of this structure looks like this:
    Putting this recipe to work, here’s an example of how to track product_viewed events:
    And, another example of gathering checkout_completed events:
  4. Click “Test” to confirm the Shopify Web Pixel API is connected (next, we’ll confirm Mixpanel is receiving those events from Shopify)
  5. Connect the Pixel to release it into the wild
  6. Visit your Shopify storefront and trigger your custom events
  7. Verify data is flowing into your Mixpanel dashboard and enjoy tracking custom conversions in real time! 🎉