如何在GTM中配置WordPress/WooCommerce购物车数据适配wph上报格式？

步骤1：创建GTM变量获取并格式化购物车数据 #

1.1 定义原始购物车数据层变量 #

• 进入GTM后台，依次点击「变量」-「用户定义变量」-「新建」
• 选择变量类型为「数据层变量」，变量名称填cartContent，保存为 DLV - Cart Content

1.2 定义格式化商品数组的自定义JS变量 #

新建用户定义变量，类型选择「自定义JavaScript」，填入如下代码，保存为 JS - Formatted WPH Contents：

function() {
  // 获取原始购物车商品列表，无数据时返回空数组
  const cartItems = {{DLV - Cart Content}}?.items || [];
  // 遍历商品映射为wph要求的格式
  return cartItems.map(item => ({
    id: item.id,
    name: item.name,
    category: item.category,
    ean: item.sku, // 若SKU不是EAN码，可修改为对应EAN字段的取值逻辑
    price: parseFloat(item.price),
    in_stock: item.stocklevel > 0 ? true : false,
    quantity: parseInt(item.quantity),
    weight: item.weight || '' // 无重量字段可留空，或补充WooCommerce商品重量取值逻辑
  }));
}

步骤2：配置触发规则 #

• 若使用的WooCommerce GTM插件会在加购成功后自动推送add_to_cart事件到数据层，直接创建自定义事件触发器，事件名称填add_to_cart，保存为 Trigger - AddToCart
• 若无自动事件推送，可创建点击触发器，绑定页面上加购按钮的CSS选择器作为触发条件

步骤3：创建事件上报标签 #

新建标签，类型选择「自定义HTML」，填入如下代码，触发条件选择上一步创建的 Trigger - AddToCart，保存为 Tag - WPH AddToCart Track：

<script>
wph('track', 'AddToCart', {
    content_type: 'category',
    contents: {{JS - Formatted WPH Contents}}
})
</script>

步骤4：测试验证 #

• 开启GTM预览模式，在站点执行加购操作，确认上述自定义标签正常触发
• 打开浏览器控制台网络面板，过滤wph相关请求，检查上报的contents数组的条目数量、字段值是否和当前购物车商品一致

注意事项 #

• 若购物车数据中无商品重量字段，可直接删除weight参数，或通过WooCommerce钩子提前把商品重量注入到数据层的cartContent.items中
• 若EAN码和SKU不共用，可修改字段映射逻辑，从商品自定义字段中取对应EAN值
• 数值类型字段（price、quantity）建议强制类型转换，避免上报格式错误

内容的提问来源于stack exchange，提问作者Eryk