Shopify + Mixpanel 集成
Shopify + Mixpanel Integration
我使用 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'。
有谁知道如何解决这个问题,以便我可以在漏斗中看到完整的用户旅程和完成率?
我设法通过将 MixPanel id 作为产品属性推送到 cart.liquid 文件中来实现此功能,如下所示:
<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>
在 Shopify 中顺利运行,并与其他想要将 Shopify 与 Mixpanel 集成的人分享经验。
其中一个大问题是商店域与结帐域不同,这意味着 Mixpanel 为用户提供的唯一 ID 在到达结帐域时会发生变化 (checkout.shopify.com)。出于安全目的,Shopify 不允许控制结帐过程中的任何页面,因此需要一种变通方法,将用户在浏览时所拥有的 ID 与结帐过程中提供的 ID 相关联。为此,我们在 Shopify 中存储一个变量,并在结帐时使用 JavaScript 检索它,并将其传递给 Mixpanel 代码以识别客户。
以下是破解将网站上的客户 ID 与结帐页面绑定的起点(post :)):
*
此集成的目标是:
* 安装混合面板库
* 跟踪重要的电子商务事件:查看产品、将产品添加到购物车、从购物车中移除产品以及完成订单
在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,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.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 变量中,可以在结帐过程中的感谢页面中检索到该变量。此外,当产品从购物车中移除时的事件。
在购物车表单关闭标签之前:
<!-- 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 -->
在模板底部
用于检索 Mixpanel ID 并存储到表单输入中的 JS 代码,并在单击“删除”时跟踪事件 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 -->
结帐设置
Shopify 不允许直接访问结帐页面,但您可以在结帐流程的订单 Status/Thank 您页面中包含要执行的代码。在这里,我们添加 Mixpanel 库,检索存储在 Shopify 产品变量中的 Mixpanel 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 -->
这是 White Tale Coffee, a Scalable Path 项目在 Shopify 中集成 Mixpanel 的输出,在 Mixpanel 的强大客户支持的帮助下(向 Marissa 致敬!)。
我使用 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'。
有谁知道如何解决这个问题,以便我可以在漏斗中看到完整的用户旅程和完成率?
我设法通过将 MixPanel id 作为产品属性推送到 cart.liquid 文件中来实现此功能,如下所示:
<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>
在 Shopify 中顺利运行,并与其他想要将 Shopify 与 Mixpanel 集成的人分享经验。
其中一个大问题是商店域与结帐域不同,这意味着 Mixpanel 为用户提供的唯一 ID 在到达结帐域时会发生变化 (checkout.shopify.com)。出于安全目的,Shopify 不允许控制结帐过程中的任何页面,因此需要一种变通方法,将用户在浏览时所拥有的 ID 与结帐过程中提供的 ID 相关联。为此,我们在 Shopify 中存储一个变量,并在结帐时使用 JavaScript 检索它,并将其传递给 Mixpanel 代码以识别客户。
以下是破解将网站上的客户 ID 与结帐页面绑定的起点(post :)):
*
此集成的目标是: * 安装混合面板库 * 跟踪重要的电子商务事件:查看产品、将产品添加到购物车、从购物车中移除产品以及完成订单
在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,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.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 变量中,可以在结帐过程中的感谢页面中检索到该变量。此外,当产品从购物车中移除时的事件。
在购物车表单关闭标签之前:
<!-- 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 -->
在模板底部
用于检索 Mixpanel ID 并存储到表单输入中的 JS 代码,并在单击“删除”时跟踪事件 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 -->
结帐设置
Shopify 不允许直接访问结帐页面,但您可以在结帐流程的订单 Status/Thank 您页面中包含要执行的代码。在这里,我们添加 Mixpanel 库,检索存储在 Shopify 产品变量中的 Mixpanel 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 -->
这是 White Tale Coffee, a Scalable Path 项目在 Shopify 中集成 Mixpanel 的输出,在 Mixpanel 的强大客户支持的帮助下(向 Marissa 致敬!)。