BigCommerce 如何在 checkout page 添加 GTM？

2026-10-24支付阿杰

结论

不用寻找或直接修改 BigCommerce 托管的 checkout 源代码。

一般可以通过后台的 Script Manager（脚本管理器） 加载 GTM，并将“购买完成”事件设为仅在 Order Confirmation / Thank You Page（订单确认页） 执行。用户进入结账页，只能说明结账流程已经开始。订单编号、成交金额等数据要等订单创建成功后才可靠。

示例中的 {{checkout.order.id}} 和 {{#each checkout.order.items}} 是 Handlebars 模板表达式。直接粘贴到 Script Manager 后，它们不一定会被解析，很可能会原样发送给 GTM。只有当前店铺的 Stencil 订单确认模板确实提供这些上下文变量时，才能这样使用。

第一步：安装 GTM 容器

在 BigCommerce 后台找到：

Storefront → Script Manager → Create a Script

不同后台版本的菜单名称可能略有不同。脚本可以参考以下配置：

Location：Head
Select pages：至少选择 Checkout 和 Order Confirmation；如需跟踪整个站点，可以选择全部页面
Script category：通常选择 Analytics
Script type：Script
Load method：根据当前商店的兼容性测试结果选择；GTM 一般可以异步加载

填入 GTM 提供的标准容器代码，例如：

<script>
(function(w,d,s,l,i){
    w[l]=w[l]||[];
    w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
    var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),
        dl=l!='dataLayer'?'&l='+l:'';
    j.async=true;
    j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>

将 GTM-XXXXXXX 替换为实际的容器 ID。

GTM 提供的 <noscript> iframe 通常需要紧跟在 <body> 后面，而 Script Manager 未必能将它放到这个精确位置。对于依赖 JavaScript 的电商分析来说，它并不是购买跟踪能否成功的决定性部分。

第二步：只在订单确认页推送购买事件

在 Script Manager 中再创建一个脚本：

Location：Footer
Select pages：Order Confirmation
Script category：Analytics

如果店铺已经可以向脚本提供订单数据，建议采用 GA4 当前的电商事件结构：

<script>
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
        transaction_id: 'ORDER_ID',
        value: 129.90,
        tax: 9.90,
        shipping: 10.00,
        currency: 'USD',
        items: [
            {
                item_id: 'PRODUCT_ID',
                item_name: 'Product name',
                item_brand: 'Brand',
                item_category: 'Category',
                item_variant: 'SKU',
                price: 60.00,
                quantity: 2
            }
        ]
    }
});
</script>

这里的 ORDER_ID 等内容只是数据位置示例，不能直接用于生产环境。必须将它们替换为 BigCommerce 当前订单的真实数据。

Handlebars 代码应该放在哪里

如果使用的是可编辑 Stencil 主题，而且订单确认模板暴露了对应的订单对象，可以在主题的订单确认页面模板中加入数据层代码。相关模板通常属于 order-confirmation 页面，而不是结账表单内部。

变量名称必须以当前主题实际提供的上下文为准。有些环境可能提供 order，另一些定制实现则可能提供 checkout.order。不能只看示例就认定以下表达式一定可用：

{{checkout.order.id}}
{{checkout.order.total.value}}
{{#each checkout.order.items}}

如果这些表达式没有经过 Stencil 渲染，而是直接写入 Script Manager，浏览器收到的内容可能仍然是：

transaction_id: '{{checkout.order.id}}'

此时 GTM 收到的不是订单编号，而是一段普通字符串。

模板变量可用时的示例

以下示例仅适用于订单确认模板中确实存在题目所示变量的情况：

<script>
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
        transaction_id: '{{checkout.order.id}}',
        value: Number('{{checkout.order.total.value}}'),
        currency: '{{checkout.order.currency.code}}',
        items: [
            {{#each checkout.order.items}}
            {
                item_id: '{{product_id}}',
                item_name: '{{name}}',
                item_brand: '{{brand.name}}',
                item_category: '{{category}}',
                item_variant: '{{sku}}',
                price: Number('{{price.value}}'),
                quantity: Number('{{quantity}}')
            }{{#unless @last}},{{/unless}}
            {{/each}}
        ]
    }
});
</script>

其中，{{#unless @last}},{{/unless}} 用于避免数组最后一个对象后出现多余的逗号。currency、税费和运费等字段的路径，仍需按照实际模板上下文调整。

商品名称、品牌和分类中可能含有引号、换行符或其他特殊字符。将这些内容直接插入 JavaScript 字符串，可能引发语法错误。生产环境应使用主题支持的 JSON 序列化或转义方式，不能只用单引号包裹变量。

如果 Script Manager 取不到订单数据

可以采用以下三种方案：

使用 BigCommerce 当前提供的官方分析或 GTM 集成，由平台生成购买事件。
在可编辑的 Stencil 订单确认模板中输出订单数据，再将其推送到 dataLayer。
对于完全定制的 checkout，使用 BigCommerce Checkout SDK 或后端接口取得已完成订单的数据，再构造事件。

不要将管理 API token 写入浏览器脚本，也不要在前端直接调用需要私密凭据的订单 API。

GTM 中的配置

完成 dataLayer.push() 后，还需要在 GTM 容器中进行以下配置：

创建自定义事件触发器，事件名称设为 purchase
创建 GA4 Event 标签，事件名称设为 purchase
将 ecommerce 数据发送给 GA4
在 Preview 模式中确认事件只触发一次
发布 GTM 容器

如果继续使用题目中的 purchase-gtm 事件名称，也可以创建同名的自定义事件触发器。不过，它使用的旧式 actionField 数据结构不会自动转换成 GA4 推荐的购买参数，需要在 GTM 中逐项映射。

注意事项

购买事件应在订单确认页触发，不能在用户刚进入 checkout 时触发。
刷新订单确认页可能导致重复上报。可以在 GTM 或脚本中按照 transaction_id 去重，不应只依赖 GA4 侧去重。
不要将邮箱、姓名、电话和地址等个人信息发送给 GTM 或 GA4。
如果商店启用了 Cookie Consent，分析脚本应遵循用户的同意状态。
使用测试订单核对金额、币种、税费、运费、优惠和商品数量。
在浏览器控制台中检查 window.dataLayer，确认订单字段既不是空值，也不是尚未解析的 {{...}} 字符串。
修改主题模板前，应复制当前主题并在预览环境中验证。只安装 GTM 时，通常不需要修改 checkout 源码。