Shopify + Mixpanel Integration

Question

I am using Shopify as my store page for selling items, with Mixpanel integrated to track users through the entire purchasing process. With 4 different events: Product Viewed, Added to Cart, Began Checkout and Order Completed.

In the live view all of these come up accordingly, but my problem is it seems Mixpanel is assigning a completely different distinct_id when the user completes the checkout. Therefore in the Funnels section, I am not shown the completion rate as the users are lost along the way due to the different id.

I have the following code in the Additional content & scripts section (along with the start 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 are not signing up and i'm using the 'customer.id' throughout the other necessary code snippets in the Shopify theme.

Does anyone know how to fix this issue so I can see the full user journey in Funnels with the completion rate?

Answer 1

Got this working smoothly in Shopify, and sharing the learnings for anyone else wanting to integrate Shopify with Mixpanel.

One of the big issues is that the shop domain is different than the checkout domain, meaning that the unique ID Mixpanel gives to users changes when they reach the checkout domain (checkout.shopify.com). Shopify does not allow control over any pages within the checkout process for security purposes, so there needs to be a work-around to tie the ID the users had while browsing with the one given within the checkout process. For this purpose we store a variable within Shopify, and retrieve it with JavaScript in the checkout, and pass it to the Mixpanel code to identify the customer.

The following was a starting point to crack tying the customer ID on the site with the Checkout pages (this post :) ): * Shopify + Mixpanel Integration

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

In theme.liquid

Within the head tag, load the Mixpanel library and assign 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)

Trigger Mixpanel action when it's viewed, as well as when it's added to 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)

Store the Mixpanel distinct user ID into Shopify variable through a hidden form input tag, which can be retrieved in Thank You page within the checkout process. Also, an events for when a product is removed from cart.

Before closing tag for 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 retrieve Mixpanel ID and store into form input, and track event on click of Remove 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 -->

Checkout Settings

Shopify does not allow direct access to the checkout pages, but you can include code to execute in the Order Status/Thank You page of the checkout flow. Here we add the Mixpanel library, retrieve the Mixpanel ID stored within the Shopify product variable, and track the Order Completion.

<!-- 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 output of integrating Mixpanel within Shopify for White Tale Coffee, a Scalable Path project, with the assistance of the great customer support from Mixpanel (Shout out to Marissa!).