返回博客

博客

Shopify 或 WooCommerce 店铺的服务器端跟踪:什么会触发、什么不会、该安装什么

发布于 · 阅读约 5 分钟

服务器容器不会让店铺自动上报购买。它只是把浏览器发送的内容,从你自己的主机名而不是 Google 的主机名转发出去——这件事值得做:广告拦截器和 Safari 加在一起,会丢掉店铺相当一部分转化。但购买必须先被发送出来,而在大多数店铺运行的两个平台上,开箱即用时没有任何东西会发送它。这是我们希望在第一天就能交到每位客户手上的文章。

七个事件,以及它们唯一的共同点

GA4 为购买漏斗定义了七个事件:view_item_list、view_item、add_to_cart、remove_from_cart、begin_checkout、add_payment_info 和 purchase。名称是 GA4 的,不属于任何平台——同样的七个事件适用于 Shopify、WooCommerce 和你自己搭建的店铺。

它们共享的是一套机制。每一个都是向页面 dataLayer 的一次推送,名称一字不差,携带一个符合 GA4 格式的 ecommerce 对象。Tag Manager 的触发器监听这个名称;GA4 事件代码读取 ecommerce 对象并发送。名称拼错、对象多嵌套了一层、或者推送在了错误的页面上,代码就会永远停在那里,没有任何报错。购买推送长这样:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ ecommerce: null });
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORD-10442',
    value: 89.90,
    currency: 'EUR',
    items: [
      { item_id: 'SKU-118', item_name: 'Trail jacket', price: 89.90, quantity: 1 }
    ]
  }
});

先推送 ecommerce: null 不是装饰。没有它,上一个事件的商品可能会渗入下一个事件,三页之前的 view_item 就会出现在 purchase 里。

Shopify:主题看不到结账页

安装在 Shopify 主题里的容器会在店面加载——商品页、系列页、购物车。它不会在结账页和感谢页加载,这些页面由 Shopify 用自己的域名和自己的模板提供。所以安装在主题里的容器可以发送 view_item 和 add_to_cart,但无论怎么配置,都永远不会发送 begin_checkout、add_payment_info 或 purchase。

这三个来自 Custom Pixel。Shopify 的像素沙盒公开了结账事件(checkout_started、payment_info_submitted、checkout_completed),并允许像素推送到它自己的 dataLayer——一小段脚本把每个事件映射到上面的 GA4 事件名和格式。店面事件仍然来自主题,所以完整的配置需要两部分:浏览一侧用 dataLayer 应用或主题代码片段,结账一侧用 Custom Pixel。

还有一个决定要做。Shopify 的 Google 与 YouTube 渠道可以在任何容器之外直接发送 GA4 事件。如果你在那里连接了一个 GA4 媒体资源,同时又让同一个媒体资源经过你的容器,每次购买都会被计两次。选一条路。如果目标是第一方收集,容器就是那条路,渠道里的 Analytics 连接保持关闭。

WooCommerce:核心什么都不推送

WooCommerce 本身不写任何 dataLayer。写的是插件——GTM4WP 是大多数人的选择——它的 GA4 电商选项会在正确的页面以正确的格式生成这七个事件:商品页上的 view_item、按钮上的 add_to_cart、结账页上的 begin_checkout、订单完成页上的 purchase。

WooCommerce 的经典故障是购买被重复计算,原因很明确:订单完成页被重新加载了。访客刷新了它,从支付服务商跳回了它,或者主题两次重定向经过了它,于是 purchase 带着同一个 transaction_id 再次推送。GA4 在同一会话内按 transaction_id 对购买去重,能挡住大部分情况,但挡不住第二天的重新加载。插件的「每个订单只触发一次」设置值得打开;它把标记保存在服务器端,重新加载无法重置它。

SignalHost 为你构建什么

告诉向导这个网站是店铺,它就会在你的网页容器里为七个事件各添加一个自定义事件触发器和一个 GA4 事件代码——十四个实体,全部带 SH 前缀,永远不会与你已有的东西冲突。每个代码直接从 dataLayer 发送 ecommerce 对象,所以 items、value、currency 和 transaction_id 无需逐字段设变量就能通过,并且每个代码都显式写明你的衡量 ID 而不是继承它。

你的店铺上不会安装任何东西。触发器只是监听;推送来自插件或像素。选择「没有网店」会省略这十四个实体,其他一切不变——页面浏览、scroll 和其余标准事件无论如何都会经过容器。

服务器端没有任何按事件的配置。服务器容器的 GA4 代码会转发收到的每一个事件,不管它叫什么,所以你网站上的新事件不需要我们这边做任何改动。如果你连接了 Meta Conversions API 和 TikTok Events API 目标,它们会自行映射同样的七个名称;同一次推送,purchase 在 Meta 变成 Purchase,在 TikTok 变成 CompletePayment。

用一笔测试订单验证

在测试模式下下一笔真实订单,或者下一笔便宜的、之后退款的订单,然后观察容器页面的事件清单。你应该依次看到 view_item、add_to_cart、begin_checkout、add_payment_info 和 purchase——各一次。Shopify 上缺少 purchase,意味着 Custom Pixel 没有安装或没有推送;WooCommerce 上缺少 begin_checkout,通常意味着插件的结账事件被禁用了。

如果你让 Google Ads 转化经过容器,purchase 就是转化事件,它的价值、货币和交易 ID 都从同一个 ecommerce 对象读取。没有 value 的购买推送会记录一次价值为零的转化——在报告里那是一个真实的数字,而且是错的。

别再把数据丢给广告拦截器

每月一万次请求,长期免费。四分钟就能知道它是否有用。