我使用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中顺利运行,并为想要将Shopify与Mixpanel集成的其他人分享学习知识.
其中一个重要问题是商店域名与结帐域名不同,这意味着唯一ID Mixpanel会在用户到达结帐域时为其提供更改(checkout.shopify.com).出于安全考虑,Shopify不允许控制结账过程中的任何页面,因此需要一种解决方法来将用户在浏览时使用的ID与结账过程中给出的ID联系起来.为此,我们在Shopify中存储变量,并在结帐时使用JavaScript检索它,并将其传递给Mixpanel代码以识别客户.
以下是使用Checkout页面破解在网站上绑定客户ID的起点(本文:)：
* Shopify + Mixpanel Integration
这种整合的目标是：
*安装Mixpanel库
*跟踪重要的电子商务活动：查看产品,添加到购物车的产品,从购物车中移除的产品以及完成的订单
在theme.liquid中
在head标签内,加载Mixpanel库并在用户登录时分配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,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.liquid)
在查看时以及将其添加到购物车时触发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>
购物车页面(cart.liquid)
通过隐藏的表单输入标记将Mixpanel不同的用户ID存储到Shopify变量中,该标记可以在结帐过程中的Thank You页面中检索.此外,还有从购物车中取出产品的事件.
<!-- 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并存储到表单输入,并在点击Remove链接时跟踪事件：
<!-- 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不允许直接访问结帐页面,但您可以在结帐流程的订单状态/谢谢页面中包含要执行的代码.在这里,我们添加Mixpanel库,检索存储在Shopify产品变量中的Mixpanel ID,并跟踪订单完成.
<!-- start Mixpanel -->
<script type="text/javascript">(function(e,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 }}","last_updated": new Date()
});
mixpanel.people.track_charge("{{order.total_price | money_without_currency}}".replace(",",""));
mixpanel.track("Order Completed");
</script>
<!-- End Mixpanel -->
这是在Shopify for White Tale Coffee(Scalable Path项目)中集成Mixpanel的输出,在Mixpanel的大力客户支持下(Shout out to Marissa！).
