如何在 Shopify 中仅为结账页面添加转化跟踪代码

转化跟踪将帮助你更好地了解你的 Shopify 网站的整体价值，以及你正在运行的任何线上营销活动。有了转化跟踪，你就能追踪自己卖出了多少产品，以及是哪个营销渠道把客户带到了你的网站。通过在店铺的结账页面添加转化跟踪，你可以轻松追踪客户到达结账并完成购买的频率。

它还能帮助你了解 Shopify 店铺的购买趋势。要按照最新的 Shopify 标准把转化跟踪代码添加到店铺的结账页面，你需要了解以下任务。

Google Analytics

首先，你需要使用 Shopify 的 Customer Events 框架添加店铺的 Google Analytics 转化跟踪代码。这里有一份关于如何使用 Shopify 的 Customer Events 与自定义像素系统进行设置的 指南。

跟踪订单

Shopify 已更新跟踪脚本的实现方式。已弃用的 Additional Scripts 区域以及 checkout.liquid 不再受支持。请按以下步骤设置转化跟踪：

• 在 Shopify 后台进入 Settings
• 点击 Customer Events
• 点击 Custom pixels
• 点击 Add pixel 创建新的自定义像素，或编辑现有像素
• 将你的跟踪代码粘贴到自定义像素代码编辑器中
• 点击 Save，然后点击 Connect pixel 以启用它
• 使用浏览器开发者工具或 Shopify Pixel Helper 进行测试

重要：自 2025 年 8 月 28 日起，checkout.liquid 脚本和 Additional Scripts 已不可再编辑。所有转化跟踪现在必须使用 Customer Events 框架，并通过自定义像素或应用像素来实现。如果你尚未迁移，旧版跟踪方式已停止工作。

添加转化跟踪

如果你只想在感谢页添加转化跟踪，可以创建一个订阅 checkout_completed 事件的自定义像素：

analytics.subscribe("checkout_completed", (event) => {
  /* Start Tracking Code */
  gtag('event', 'conversion', {
    'send_to': 'AW-xxxx/xxxx',
    'currency': event.data.checkout.currencyCode,
    'transaction_id': event.data.checkout.order.id,
    'value': event.data.checkout.totalPrice.amount
  });
  /* End Tracking Code */
});

安全沙盒跟踪环境

Shopify 现在会在一个安全的沙盒环境中运行所有结账自定义和像素。这提升了安全性、性能与客户隐私，但也意味着你的代码必须符合更严格的标准。自定义像素无法直接访问 DOM 元素或渲染用户界面元素，但可以订阅标准化的客户事件。

基础转化跟踪

假设第三方要求你集成类似下面这样的跟踪像素：

<img src="https://www.tracking.com/u?amount=<AMOUNT>&amp;order-id=<ORDER_ID>&amp;currency=<CURRENCY>" height="1" width="1" />

要在自定义像素中实现它，你需要订阅 checkout_completed 事件，并获取以下数据：

• 订单总价：event.data.checkout.totalPrice.amount
• 订单 ID：event.data.checkout.order.id
• 币种：event.data.checkout.currencyCode

当客户完成结账时，你的自定义像素会携带正确的数据触发：

analytics.subscribe("checkout_completed", (event) => {
  const img = document.createElement('img');
  img.src = `https://www.tracking.com/pixel.gif?amount=${event.data.checkout.totalPrice.amount}&order-id=${event.data.checkout.order.id}&currency=${event.data.checkout.currencyCode}`;
  img.height = 1;
  img.width = 1;
  document.body.appendChild(img);
});

当客户完成结账时，上面的代码将确保像素使用安全且更新的方法，并携带正确的数据触发。

购买后加购（upsell）跟踪

如果你在使用 Checkout Extensibility 应用提供的购买后加购（post-purchase upsell），你可以通过 checkout_completed 事件（它会在第一个加购优惠页面触发）以及额外的购买事件来跟踪转化，从而获得更深入的洞察：

analytics.subscribe("checkout_completed", (event) => {
  // Track initial purchase completion
  console.log('Purchase completed', event.data.checkout);
});

故障排查

• 自 2025 年 8 月 28 日起，Additional Scripts 区域已变为只读。所有跟踪都必须迁移到 Customer Events，并使用自定义像素或应用像素。
• 使用浏览器开发者工具的 Network（网络）标签页，验证 checkout_completed 事件是否已触发，以及你的跟踪代码是否成功执行。
• 你也可以使用 Shopify Pixel Helper 测试自定义像素，并验证事件是否被正确跟踪。
• 注意：由于 Shopify 结账环境采用沙盒机制，Google Tag Manager 无法调试 Customer Events。避免依赖 GTM 预览模式——请改用浏览器开发者控制台手动检查网络日志。
• 如果你正在从旧的跟踪方式迁移，请务必断开旧版像素连接，以避免重复统计转化。