Shopify非Plus店铺GTM中dataLayer的item_variant值异常问题

问题根源 #

Liquid是服务端渲染机制，页面首次加载时product.selected_or_first_available_variant会输出当前选中的变体值，但变体切换是前端操作，服务端变量不会实时更新。add_to_cart事件如果仍依赖初始渲染的Liquid变量，自然会拿到旧值；而谷歌广告原生事件是监听前端DOM或Shopify内置的变体切换事件，所以能获取最新值。

解决步骤 #

1. 改用前端动态获取变体信息 #

利用Shopify内置的全局对象Shopify.selectedVariant，它会在用户切换变体时自动更新，包含当前选中变体的所有属性（id、title等）。

2. 修改add_to_cart事件的dataLayer推送逻辑 #

放弃服务端Liquid变量，在触发add_to_cart事件时直接从前端获取实时变体值：

// 监听加入购物车按钮点击事件
document.querySelector('[data-add-to-cart], [id*="AddToCart"]').addEventListener('click', function(e) {
  // 确保当前有选中的变体
  if (window.Shopify?.selectedVariant) {
    const variant = window.Shopify.selectedVariant;
    // 推送至dataLayer
    window.dataLayer.push({
      event: 'add_to_cart',
      items: [{
        item_id: variant.id.toString(),
        item_name: '{{ product.title }}', // 商品标题仍可复用服务端渲染值
        item_variant: variant.title,
        price: variant.price / 100, // 转换为元（Shopify默认存分为单位）
        quantity: parseInt(document.querySelector('[name="quantity"]').value) || 1
      }]
    });
  }
});

3. 保留view_item事件的初始值 #

首次进入商品页的view_item事件，仍可使用服务端Liquid变量确保初始值正确：

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'view_item',
  items: [{
    item_id: '{{ product.selected_or_first_available_variant.id }}',
    item_name: '{{ product.title }}',
    item_variant: '{{ product.selected_or_first_available_variant.title }}',
    price: {{ product.selected_or_first_available_variant.price | divided_by: 100 }}
  }]
});
</script>

4. 主题兼容性处理 #

如果你的主题没有自动维护Shopify.selectedVariant，可以手动监听变体选择器的切换事件来更新：

// 监听变体下拉框/选项组的change事件
document.querySelector('[name="id"], [data-variant-id]').addEventListener('change', function() {
  const variantId = this.value;
  // 从商品页的变体数据中匹配当前选中的变体
  const variant = {{ product.variants | json }}.find(v => v.id == variantId);
  if (variant) {
    window.Shopify = window.Shopify || {};
    window.Shopify.selectedVariant = variant;
  }
});

验证方法 #

1. 打开GTM预览模式，进入商品页
2. 切换变体后点击加入购物车
3. 在开发者工具的Console中查看dataLayer数组，确认add_to_cart事件的item_variant为当前选中的变体值

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