GA4 电商跟踪：Shopify 和 WooCommerce 怎么接

Google 的电商指南给购物路径的每一步都定了推荐事件，事件名照抄，不要自己改。一般的店铺，从分类页到下单完成用这 8 个就够了：

Google 的指南里还有几个，店铺用得上再加：

Google 的推荐事件参考文档列出了每个事件的参数，其中标为必填的是这些：

items 里的每个商品，至少要有 ID 或名称：

几个常用的选填参数：

gtag('event', 'purchase', {
  transaction_id: 'ORDER-1001',
  value: 58.00,
  currency: 'USD',
  tax: 4.64,
  shipping: 5.00,
  items: [
    {
      item_id: 'SHIRT-BLUE-M',
      item_name: 'Linen shirt',
      price: 29.00,
      quantity: 2,
    },
  ],
});

Shopify 的 GA4 帮助页让你装 Google & YouTube 销售渠道，再照 Google 的设置指南操作。开始前要先有一个带网站数据流的 GA4 媒体资源，Shopify 提醒新建媒体资源需要 Google Analytics 账号的编辑者权限。

1. 1

   安装应用

   登录 Shopify，安装 Google & YouTube 应用。

2. 2

   开始设置 GA4

   在应用的 Overview 页找到「Just want to set up Google Analytics 4」这一块，点「Get started」。

3. 3

   连接媒体资源

   选中你的 GA4 媒体资源，点「Connect」，再点「Confirm」。Google 说强烈建议用这种做法，而不是在应用设置里手动添加代码。

不用自己写事件代码。Google 的 Shopify 事件参考列出了应用会发的事件：流程图里的 8 个都有，另加 page_view 和 search。其它事件表里的，它只发 remove_from_cart。

应用发的 purchase 带齐了必填参数，另有税、运费和优惠码，还带一个 shopify_event_name，可以在 GA4 里拿来建过滤条件。

想自己发 GA4 事件 (比如通过 Google Tag Manager)，Shopify 给的做法是自定义像素 (Custom pixel)。自定义像素跑在宽松沙盒 (Lax sandbox) 里，Shopify 说明并不是所有像素功能都能在沙盒里用。Shopify 也不为自定义像素的添加和使用提供支持，出了问题要自己排查。

1. 1

   先清掉已有像素

   Shopify 要求添加自定义像素之前，先删掉或改掉已有的像素，免得客户事件被算两次。如果 Google & YouTube 应用已经在发 GA4 事件，再加自定义像素就是第二个发送方。

2. 2

   添加像素

   在 Shopify 后台进「设置 (Settings) → 客户事件 (Customer events)」，添加一个自定义像素，贴上代码，保存。

3. 3

   连接

   点「Connect pixel」。没连接之前它什么都不跟踪。

Shopify 事件和 GA4 事件怎么对应

代码里订阅 Shopify 的客户事件，再换成 GA4 的事件名发出去。Shopify 的 Google Tag Manager 教程是这样对应的：

同一份教程里，purchase 的参数从这些结账字段取：

WooCommerce 官方的 GA4 扩展叫 Google Analytics for WooCommerce。按它的文档设置：

1. 1

   安装扩展

   安装并启用 Google Analytics for WooCommerce。

2. 2

   填衡量 ID

   进「WooCommerce → Settings → Integration → Google Analytics」，填 G- 开头的衡量 ID (Measurement ID)。

3. 3

   打开需要的跟踪选项

   其中有：购买交易、加购和移出购物车、列表页的商品展示和点击、商品详情浏览、开始结账。

删掉其它 Google Analytics 插件和代码。扩展的常见问题里写着：重复的 Google Analytics 代码会造成跟踪冲突。

意见征求模式 (Consent mode) 方面，扩展默认把欧洲经济区 (EEA) 访客的所有同意项设为拒绝。它自己不带 Cookie 横幅，但接入了 WP Consent API。访客点同意后，横幅插件必须更新同意状态，否则数据到不了 Google Analytics。

1. 1

   看实时报告

   打开「报告 (Reports) → 实时 (Realtime)」，它显示过去 30 分钟的活动。「按事件名称统计的事件数」卡片能看出事件到底有没有进来。

2. 2

   打开调试模式

   用 Google Tag Assistant (tagassistant.google.com) 或 Tag Manager 的预览模式，也可以在 gtag 的 config 命令里加 debug_mode: true。以后要关掉，得把这个参数整个删掉，设成 false 关不掉。

3. 3

   打开 DebugView

   进「管理 (Admin) → 数据显示 (Data display) → DebugView」。秒流显示过去 60 秒的事件，调试设备 (Debug device) 下拉框可以选自己的设备。

4. 4

   走一遍购物路径

   依次打开商品页、加购、购物车、结账，每个事件应该按顺序各出现一次。

5. 5

   看参数

   点开事件看参数，和必填参数对一遍。

两个平台测试时各有一个坑：

Pixel Audit 在我们的服务器上做同样的事。它打开你的店铺，走一遍首页、商品、购物车、结账，报告 GA4 触发了哪些事件、带了什么参数，另外 7 种跟踪代码也一起查。它不下单，看不到 purchase，也看不到 Measurement Protocol 发的事件。