Shopify
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:
- Mixpanel SDK + Autocapture: collect data automatically (minimal setup)
- 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
-
Copy the Mixpanel SDK code snippet at the top of this guide
-
Go to your Store Dashboard > Sales Channels > Online Store > Theme and click “Edit code”
-
Open the theme.liquid file and scroll down to the closing
</head>
tag -
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)
-
Go to your Mixpanel Dashboard > Project Settings and copy your Project Token under Access Keys
-
Back in your Shopify
theme.liquid
file, enable Mixpanel’s SDK by adding your Project Token to themixpanel.init
code (wrapped inscript
tags). Altogether, it should look like this: -
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
-
Copy the Mixpanel SDK code snippet at the top of this guide and remove the
<script></script>
wrapper tags -
Go to your Shopify Store > Settings > Customer Events, click “Add custom Pixel”, and name your Pixel something snazzy
-
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:
// Subscribe to Shopify Pixel Event API (https://shopify.dev/docs/api/web-pixels-api/standard-events) analytics.subscribe('EVENT_NAME', (event) => { // Paste Mixpanel SDK code snippet sans <script> tags (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 ? MIXPANEL_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 SDK mixpanel.init('YOUR_PROJECT_TOKEN'); // Define and track events example mixpanel.track('My plain text event name', { productTitle: web.pixel.event.property.chain.here productPrice: web.pixel.event.property.chain.here }) });
Putting this recipe to work, here’s an example of how to track
product_viewed
events:// Subscribe to Shopify Pixel Event API analytics.subscribe('product_viewed', (event) => { // Load Mixpanel 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 ? MIXPANEL_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 SDK mixpanel.init('YOUR_PROJECT_TOKEN'); // Track product_viewed const productVariant = event.data.productVariant; mixpanel.track('Product viewed', { productTitle: productVariant.title, productPrice: productVariant.price.amount }); });
And, another example of gathering
checkout_completed
events:// Subscribe to Shopify Pixel Event API analytics.subscribe('checkout_completed', (event) => { // Load Mixpanel 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 ? MIXPANEL_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 SDK mixpanel.init('YOUR_PROJECT_TOKEN'); // Track checkout_completed const checkout = event.data.checkout; mixpanel.track('Checkout completed', { value: checkout.totalPrice.amount, created_at: event.timestamp, order_number: checkout.order.id, userId: event.clientId, order_id: checkout.order.id, products: checkout.lineItems.map((item) => { return { product_id: item.id, title: item.variant.product.title, quantity: item.quantity, price: item.variant.price.amount, currency: item.variant.price.currencyCode, sku: item.variant.sku, size: item.variant.product.size } }) });
-
Click “Test” to confirm the Shopify Web Pixel API is connected (next, we’ll confirm Mixpanel is receiving those events from Shopify)
-
Connect the Pixel to release it into the wild
-
Visit your Shopify storefront and trigger your custom events
-
Verify data is flowing into your Mixpanel dashboard and enjoy tracking custom conversions in real time! 🎉
Was this page useful?