Shopify + Mixpanel Integration

本文关键字：Integration Mixpanel Shopify 更新时间：2023-09-26

我正在使用Shopify作为我的商店页面来销售商品，并集成了Mixpanel以在整个购买过程中跟踪用户。有4个不同的事件：产品已查看，添加到购物车，开始结帐和订单完成。

在实时视图中，所有这些都相应地出现，但我的问题是，当用户完成结帐时，Mixpanel 似乎分配了一个完全不同的distinct_id。因此，在"漏斗"部分中，我没有显示完成率，因为由于不同的id，用户在此过程中丢失了。

我在附加内容和脚本部分有以下代码（以及启动 Mixpanel 代码）：

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

用户没有注册，我在 Shopify 主题中的其他必要代码片段中使用"customer.id"。

有谁知道如何解决此问题，以便我可以在 Funnels 中查看完整的用户旅程以及完成率？

让它在 Shopify 中顺利运行，并为其他想要将 Shopify 与 Mixpanel 集成的人分享学习。

其中一个大问题是商店域与结帐域不同，这意味着唯一 ID Mixpanel 会在用户到达结帐域（checkout.shopify.com）时向用户进行更改。Shopify 出于安全目的，不允许控制结帐过程中的任何页面，因此需要一种解决方法来将用户浏览时的ID与结帐过程中给出的ID相关联。为此，我们将一个变量存储在 Shopify 中，并在结帐时使用 JavaScript 检索它，并将其传递给 Mixpanel 代码以识别客户。

以下是破解将网站上的客户ID与结帐页面绑定的起点（这篇文章:)）：*购物+混合面板集成

此集成的目标是：* 安装混音面板库*跟踪重要的电子商务事件：查看的产品，添加到购物车的产品，从购物车中删除的产品以及完成的订单

在主题中.液体

在 head 标签中，加载混音面板库并在用户登录时分配 Shopify 客户 ID：

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

产品

页面（产品.液体）

在

查看时以及添加到购物车时触发混音面板操作

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

购物车页面（购物车.液体）

通过隐藏的表单输入标签将 Mixpanel 不同的用户 ID 存储到 Shopify 变量中，可以在结帐流程的感谢页面中检索该标签。此外，产品从购物车中删除时的事件。

在关闭购物车表单的标记之前：

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

在模板底部

JS代码检索Mixpanel ID并存储到表单输入中，并在单击删除链接时跟踪事件：

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

结帐设置

Shopify 不允许直接访问结帐页面，但您可以在结帐流程的"订单状态/感谢"页面中包含要执行的代码。在这里，我们添加混合面板库，检索存储在 Shopify 产品变量中的混合面板 ID，并跟踪订单完成情况。

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

这是在Mixpanel的强大客户支持的帮助下将Mixpanel集成到Shopify for White Tale Coffee（一个可扩展路径项目）中的输出（向Marissa大喊大叫！）。

我设法通过在 cart.liquid 文件中将 MixPanel id 作为产品属性推送来使其工作，如下所示：

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

然后，我能够在结帐部分的附加内容和脚本中确认订单时获得MixPanel ID，并将用户识别为正常用户，如下所示：

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