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

I managed to get this working by pushing the MixPanel id through in the cart.liquid file as a product attribute, as 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>

I was then able to obtain the MixPanel id on confirmation of the order in the Additional content & scripts of the checkout section and identify the user as normal, like so:

    <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>