Shopify + Mixpanel Integration

Question

I use Shopify as my store page for selling items, and Mixpanel is integrated to track users through the entire purchase process. With 4 different events: viewing the product, adding to the basket, the beginning of ordering and ordering.

In live view, all this happens accordingly, but my problem is that Mixpanel assigns a completely different identifier identifier when the user completes the check. Therefore, in the "Funnels" section, I do not show the completion speed, since users are lost along the way due to a different identifier.

I have the following code in the "More Materials and Scripts" section (along with the start of the Mixpanel code):

<script type="text/javascript"> mixpanel.track("Checkout", { "Checkout Total": "{{ total_price | money_without_currency }}" }); mixpanel.identify({{ customer.id }}); mixpanel.people.set({ "$name": "{{ customer.first_name }} {{ customer.last_name }}", "$email": "{{ customer.email }}", "last_updated": new Date() }); mixpanel.people.track_charge({{ total_price | money_without_currency }}); </script> 

Users do not subscribe, and I use "customer.id" in all other necessary code snippets in the Shopify theme.

Does anyone know how to fix this problem so that I can see the full user journey during the completion sequence?

Answer 1

I managed to get this working by clicking the MixPanel identifier in the cart.liquid file as a product attribute, as shown below:

 <input type="hidden" id="mixpanel_id" name="attributes[mixpanel_id]" value="" /> <script> $(document).ready(function(){ document.getElementById("mixpanel_id").value = mixpanel.get_distinct_id(); }); </script> 

Then I was able to get the MixPanel ID when confirming the order in the additional content and scripts of the verification section and identify the user as usual:

  <script type="text/javascript"> mixpanel.track("Order Completed", { "Checkout Total": "{{ total_price | money_without_currency }}" }); mixpanel.identify('{{ attributes.mixpanel_id }}'); mixpanel.people.set({ "$name": "{{ customer.first_name }} {{ customer.last_name }}", "$email": "{{ customer.email }}", "last_updated": new Date() }); mixpanel.people.track_charge({{ total_price | money_without_currency }}); </script> 

Answer 2

Get this work seamlessly in Shopify and share knowledge for those who want to integrate Shopify with Mixpanel.

One of the main problems is that the store’s domain is different from the verification domain, which means that the unique Mixpanel ID gives users changes when they reach the verification domain (checkout.shopify.com). Shopify does not allow you to control any pages during the verification process for security reasons, so you need to associate the identifier that users had while viewing with the one that was specified during the verification process. To do this, we store the variable in Shopify and retrieve it using JavaScript in the ticket office and pass it to the Mixpanel code to identify the customer.

The following was the starting point for breaking the binding of the client ID on the site using the Checkout pages (this message :)): * Shopify + Mixpanel integration

The purpose of this integration is: * Install the Mixpanel library * Track important e-commerce events: a product is viewed, a product added to the basket, a product removed from the basket and the order is completed.

In the topic .liquid

In the head tag, load the Mixpanel library and assign the Shopify customer ID if the user is logged in:

 <!-- start Mixpanel --> <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" "); for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.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";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]); mixpanel.init("<project_token>");</script> {% if customer %} <script> mixpanel.identify('{{customer.id}}'); </script> {% endif %} <script type="text/javascript"> mixpanel.track_links("#nav a", "click nav link", { "referrer": document.referrer }); </script> <!-- end Mixpanel --> 

Product Pages (product.liquid)

Mixpanel trigger action when it is viewed and when it is added to the cart

 <script> mixpanel.track( "Product Viewed", {"name": "{{product.title}}", "price": "{{ product.price | money_without_currency }}", "brand": "{{product.vendor}}", "category": "{{ collection.title }}", "variant": "{% for variant in product.variants %}{{ variant.sku }}{% endfor %}" }); </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $( document ).ready(function() { $("#add-to-cart").click(function(){ mixpanel.track("Added to Cart", {"name": "{{ product.title }}"}); }); }); </script> 

Cart Page (cart.liquid)

Save the separate Mixpanel user ID in the Shopify variable using the hidden form input tag, which can be found on the "Thank you" page during the verification process. In addition, events when a product is removed from the basket.

Before closing the tag for the cart form:

 <!-- Begin Mixpanel integration for hidden input to make the ID match between domains --> <input type="hidden" id="mixpanel_id" name="attributes[mixpanel_id]" value="" /> <!-- End Mixpanel integration --> 

At the bottom of the template

JS code to extract the Mixpanel identifier and save it in the input form and track the event when you click the Delete link:

 <!-- Begin Mixpanel --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(document).ready(function() { window.onload = function() { document.getElementById("mixpanel_id").value = mixpanel.get_distinct_id(); }; $(".cart-item-remove").click(function(){ mixpanel.track("Removed from Cart", {"name": "{% for item in cart.items %}{{item.product.title}}, {% endfor %}"}); }); }); </script> <!-- End Mixpanel --> 

Payment settings

Shopify does not allow direct access to checkout pages, but you can enable the code to execute on the checkout / thank you page of the checkout flow. Here we add the Mixpanel library, extract the Mixpanel identifier stored in the Shopify product variable, and track the completion of the order.

 <!-- start Mixpanel --> <script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" "); for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.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";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]); mixpanel.init("<project_token>");</script><!-- end Mixpanel --> <script> // Retrieve Mixpanel ID mixpanel.identify('{{ attributes.mixpanel_id }}'); mixpanel.people.set({ "$name": "{{ customer.first_name }} {{ customer.last_name }}", "$email": "{{ customer.email }}", "last_updated": new Date() }); mixpanel.people.track_charge("{{order.total_price | money_without_currency}}".replace(",","")); mixpanel.track("Order Completed"); </script> <!-- End Mixpanel --> 

This is the result of the integration of Mixpanel into Shopify for White Tale Coffee , a scalable path with the great customer support from Mixpanel (shout at Marissa!).