Stitching User Data Between Next.js and Shopify with Mixpanel | Mixpanel Community

Stitching User Data Between Next.js and Shopify with Mixpanel

hey I'm trying to stitch data between two websites. The flow is: I have a nextjs website using the mixpanel js SDK it has links to some shopify products. The shopify store also uses the mixpanel SDK. Now my usecase is when use goes from my nextjs website to shopify product page mixpanel should identify the user as same. Right now I'm using mixpanel.get_distinct_id() in my nextjs website and setting it as query param to the product link. Now in the Shopify I have added script in the theme.liquid file and getting the query param and using mixpanel.identify(distinct_id) but it doesn't seem to be working. It still assigns some anonymous distinct id to the user due to which in the dashboard it's identified as separate user. Can you help me out here. Also the mixpanel.identify(distinct_id) return -1 not sure why

14 comments

kapa.ai
APP
·
·
Hi Souvik K., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
I understand you're trying to track users across your NextJS website and Shopify store using Mixpanel. This is a common challenge with cross-domain tracking. Let me help you troubleshoot this issue.
The Problem with Your Current Approach
The issue you're experiencing is related to how Mixpanel handles identity management across different domains. When a user navigates from your NextJS site to Shopify, they're crossing domains, which creates challenges for maintaining the same identity.
Understanding Mixpanel Identity Management
Mixpanel's identity management works differently depending on whether you're using the Simplified or Original ID Merge API. In both cases, when using client-side SDKs, Mixpanel generates a $device_id for anonymous users, which becomes their distinct_id until they're identified.When a user moves between domains, Mixpanel typically generates a new $device_id on the second domain, creating a new user profile.
Solution: Proper Cross-Domain Identity Management
Here's how to fix your implementation:
On your NextJS website:
1. Instead of just passing the distinct_id, you should pass both the distinct_id AND whether this user is already identified.2. If the user is identified on your NextJS site, pass their actual user ID (not just the device ID) to Shopify.
On your Shopify store:
1. In your Shopify Web Pixel implementation, you need to properly handle the incoming ID: ```// In your Shopify theme.liquid or Web Pixel analytics.subscribe('page_viewed', (event) => { // Load Mixpanel SDK (function (f, b) { /** Mixpanel SDK code **/ })(document, window.mixpanel || []);
// Initialize Mixpanel SDK mixpanel.init('YOUR_PROJECT_TOKEN'); // Get the ID from URL params const urlParams = new URLSearchParams(window.location.search); const incomingId = urlParams.get('distinct_id'); const isIdentified = urlParams.get('is_identified') === 'true'; if (incomingId) { // If the user is already identified, use that ID if (isIdentified) { mixpanel.identify(incomingId); } // If not identified but we have a device ID, we need to merge else { // For Simplified ID Merge API mixpanel.identify(incomingId); } } // Track page view after identity is established mixpanel.track('Page Viewed', { page: window.location.pathname });
});```
Why Your Current Approach Isn't Working
1. The -1 return value from mixpanel.identify() is normal - this method doesn't return a meaningful value in the JavaScript SDK.2. Your approach might not be working because: - You might be using the wrong ID type (device ID vs user ID) - The timing of your identify call might be incorrect - You might need to properly merge identities rather than just identify
Server-Side Considerations
If you're using server-side tracking anywhere, remember that server-side libraries require you to manage IDs yourself: > "Since the Node.js SDK is a server-side library, IDs are not generated by the SDK. Instead, you will need to generate and manage the distinct_id yourself and include it in your events and profile data." Mixpanel SDKs: Node.js
Additional Recommendations
1. Check which ID Merge API version your project is using in your project settings.2. Consider using a consistent user ID across both domains if users authenticate on your NextJS site.3. Make sure you're not calling .reset() unnecessarily, which would generate a new device ID.4. For debugging, use the Activity Feed in Mixpanel to see if your identity merges are working - these update faster than other reports.Let me know if you need more specific help with your implementation!
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Souvik K.
·
·
kapa.ai there is no auth in the side. I just want that the navigation from nextjs site to shopify we are maintaining the journey and know the user is same.
am I doing it right? like using distinct id in the identify or should I be using something else?
my shopify script is at the end in the <head> tag
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
I understand you're trying to track the same user journey from your NextJS site to Shopify without authentication. Let me help clarify the best approach for your scenario.
Using distinct_id with identify()
Yes, you're on the right track by passing the distinct_id from your NextJS site to Shopify and using mixpanel.identify(). However, there are some important details to get right:
For Simplified ID Merge API
If your project is using the Simplified ID Merge API (which is likely if it's a newer project), the correct approach is: 1. On your NextJS site: Get the current distinct_id using mixpanel.get_distinct_id() and pass it as a query parameter to Shopify.2. On Shopify: You should set this as the $device_id rather than directly calling identify: LBKS// In your Shopify theme.liquid const urlParams = new URLSearchParams(window.location.search); const incomingId = urlParams.get('distinct_id');LBKSif (incomingId) { // Set the incoming ID as the $device_id mixpanel.track('Page Viewed', { '$device_id': incomingId }); }LBKSThis approach tells Mixpanel to use the same device ID from your NextJS site, maintaining the user identity.
For Original ID Merge API
If you're using the Original ID Merge API, you would need to send an $identify event: LBKS// In your Shopify theme.liquid const urlParams = new URLSearchParams(window.location.search); const incomingId = urlParams.get('distinct_id');LBKSif (incomingId) { // Track an identify event to merge the IDs mixpanel.track('$identify', { '$anon_id': mixpanel.get_distinct_id(), '$identified_id': incomingId }); }LBKS
Script Placement
Having your script in the <head> tag is good for ensuring it loads early, but you need to make sure: 1. The Mixpanel SDK is fully loaded before you try to use it 2. Your identify call happens before any tracking eventsAccording to Mixpanel's best practices for ID management: > "Call .identify() at these specific points in user journeys, you would be able to link the pre and post-login events to the same user on Mixpanel." Identifying Users (Simplified)Even though you don't have authentication, the same principle applies to maintaining identity across domains.
Checking Your Implementation
To verify if your implementation is working: 1. Use the Activity Feed in Mixpanel to see if events from both domains are attributed to the same user 2. It may take up to 24 hours for ID merges to fully propagate through the system, as noted in the FAQWould you like me to provide a more complete code example for your Shopify implementation based on which ID Merge API you're using?
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Souvik K.
·
·
how do I differentiate betwen original mergee api and simplifed merge api? I'm using JS sdk in next js and mixpanel script in the liquid file kapa.ai
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
To differentiate between Original ID Merge API and Simplified ID Merge API in your Mixpanel implementation, you need to check your project settings. Here's how to determine which version you're using:
Checking Your ID Merge API Version
1. Log in to your Mixpanel account 2. Navigate to your Project Settings 3. Look for "Identity Merge" in the settings menu 4. The selected option will show whether you're using "Original API" or "Simplified API"You can access this directly at: https://mixpanel.com/settings/project/id-management
Key Differences Between the APIs
Original ID Merge API
- Uses special events ($identify, $create_alias, $merge) to link identifiers - Has a limit of 500 IDs per ID cluster - Requires explicit identity events to merge users
Simplified ID Merge API
- Uses $device_id and $user_id properties directly on events - No limit on the number of device IDs that can be merged to a user ID - Merging happens automatically when both properties appear in the same event - Introduced in March 2023 and is the default for new organizations created after April 2024
Implementation Differences
For your NextJS and Shopify implementation, the code will differ based on which API you're using:
For Original ID Merge API:
if (incomingId) { // Send an $identify event to merge IDs mixpanel.track('$identify', { '$identified_id': incomingId, '$anon_id': mixpanel.get_distinct_id() }); }LBKS```
For Simplified ID Merge API:
if (incomingId) { // Include the incoming ID as $device_id in your events mixpanel.track('Page Viewed', { '$device_id': incomingId }); }LBKS```LBKSLBKSYou can also look at your existing events in Mixpanel to see which properties they contain. If you see `$device_id` and `$user_id` properties on your events, you're likely using Simplified ID Merge. If you see events with names like `$identify` or `$create_alias`, you're using Original ID Merge.LBKS[Migrating to Simplified ID Merge](https://docs.mixpanel.com/docs/tracking-methods/id-management/migrating-to-simplified-id-merge-system#understanding-simplified-id-merge) provides more details on the differences between these systems.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
👍1
1
Souvik K.
·
·
kapa.ai that works but when {autocapture: false} in autocapture it uses different distinct id
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
I understand the issue you're experiencing - when you set {autocapture: false} in your Mixpanel configuration, it's using a different distinct ID than your manually tracked events.This behavior is related to how Mixpanel handles identity management when different tracking methods are used. When you disable autocapture, it might be affecting how the distinct ID is maintained across your implementation.
Why This Is Happening
The issue is likely occurring because: 1. When autocapture is enabled, Mixpanel automatically attaches the current distinct ID to all autocaptured events 2. When you disable autocapture but still have manual tracking, you need to ensure the same distinct ID is consistently used
Solution for Cross-Domain Tracking with Autocapture Disabled
Since you're disabling autocapture, you need to be extra careful about maintaining the same distinct ID across domains:
For Simplified ID Merge API:
const urlParams = new URLSearchParams(window.location.search); const incomingId = urlParams.get('distinct_id');LBKSif (incomingId) { // First, initialize Mixpanel with autocapture disabled mixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: false }); // For all manually tracked events, include the $device_id property mixpanel.track('Page Viewed', { '$device_id': incomingId, // other properties... }); }LBKS```
For Original ID Merge API:
const urlParams = new URLSearchParams(window.location.search); const incomingId = urlParams.get('distinct_id');LBKSif (incomingId) { // First, initialize Mixpanel with autocapture disabled mixpanel.init('YOUR_PROJECT_TOKEN', { autocapture: false }); // Then explicitly identify with the incoming ID mixpanel.identify(incomingId); // Now track events normally mixpanel.track('Page Viewed', { // properties... }); }LBKS```
Important Considerations
1. Make sure your Mixpanel initialization happens before any tracking calls 2. The initialization with {autocapture: false} should be consistent across both your NextJS and Shopify implementations 3. If you're using the Simplified ID Merge API, remember to include the $device_id property in all manually tracked eventsBy ensuring consistent identity management with autocapture disabled, you should be able to maintain the same distinct ID across your NextJS and Shopify domains.Would you like me to provide more specific guidance based on your exact implementation details?
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.
Souvik K.
·
·
kapa.ai how can I setup mixpanel with shopify web pixel
kapa.ai
APP
·
·
Let me check the knowledge base for you again. One moment! 📚
kapa.ai
APP
·
·
I'd be happy to explain how to set up Mixpanel with Shopify Web Pixel. This is a great approach for tracking customer events in your Shopify store, especially for capturing checkout events that aren't accessible through standard JavaScript implementations.
Setting up Mixpanel with Shopify Web Pixel
Here's a step-by-step guide: 1. Copy the Mixpanel SDK code snippet from the JavaScript SDK documentation (remove the <script> </script> wrapper tags)2. Go to your Shopify Store > Settings > Customer Events, click "Add custom Pixel", and give your pixel a name3. Add code that will: - Subscribe to Shopify's Pixel Event API - Load the Mixpanel SDK - Define and track customer eventsHere's an example implementation for tracking product views: ```// 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 }); });LBKSLBKSFor tracking checkout completions, you can use: LBKSLBKS// 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 } }) });```4. Click "Test" to confirm the Shopify Web Pixel API is connected 5. Connect the Pixel to deploy it to your store 6. Visit your Shopify storefront and trigger the events 7. Verify data is flowing into your Mixpanel dashboard
Cross-Domain Tracking Considerations
Since you mentioned cross-domain tracking in our previous conversations, you can modify the Web Pixel implementation to maintain user identity: ```analytics.subscribe('page_viewed', (event) => { // Load Mixpanel SDK...
// Get the distinct_id from URL params if it exists const urlParams = new URLSearchParams(window.location.search); const incomingId = urlParams.get('distinct_id'); if (incomingId) { // For Simplified ID Merge API mixpanel.track('Page Viewed', { '$device_id': incomingId, // other properties... }); }
});```This approach will help maintain the same user identity between your NextJS site and Shopify store.For more detailed information, you can refer to the Shopify integration guide.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.

14 comments

The Problem with Your Current Approach

Understanding Mixpanel Identity Management

Solution: Proper Cross-Domain Identity Management

On your NextJS website:

On your Shopify store:

Why Your Current Approach Isn't Working

Server-Side Considerations

Additional Recommendations

Using distinct_id with identify()

For Simplified ID Merge API

For Original ID Merge API

Script Placement

Checking Your Implementation

Checking Your ID Merge API Version

Key Differences Between the APIs

Original ID Merge API

Simplified ID Merge API

Implementation Differences

For Original ID Merge API:

For Simplified ID Merge API:

Why This Is Happening

Solution for Cross-Domain Tracking with Autocapture Disabled

For Simplified ID Merge API:

For Original ID Merge API:

Important Considerations

Setting up Mixpanel with Shopify Web Pixel

Cross-Domain Tracking Considerations