GTM中add_to_cart事件items数组产品重复问题咨询

问题根源 #

你手动在items数组里写了3个完全相同的产品对象，且所用的GTM变量是全局选取所有匹配CSS选择器的元素，导致每次重复获取同一个产品信息；同时代码未读取购物车抽屉里的全部商品，仅取当前添加的产品，因此添加新品时旧商品信息丢失。

解决方案分两种场景（按需选择） #

场景1：只上报刚添加的单个商品（解决重复3条的问题）

删掉代码里多余的2个产品对象，改用JS从点击的添加按钮对应的产品卡片中提取信息，确保仅获取当前添加的商品：

<script>
document.addEventListener('click', function(e) {
  // 替换为你网站「添加到购物车」按钮的CSS选择器（类/ID均可）
  if (e.target.closest('.add-to-cart-btn')) {
    // 替换为你网站单个产品卡片的父容器选择器
    const productCard = e.target.closest('.product-card');
    if (!productCard) return;

    // 从产品卡片提取信息，替换为对应元素的选择器
    const itemId = productCard.querySelector('.product-id').textContent.trim();
    const itemName = productCard.querySelector('h2').textContent.trim();
    const itemPrice = productCard.querySelector('.price--item.price-regular').textContent.trim();
    // 若有数量输入框则替换为其选择器，无则默认数量为1
    const itemQuantity = productCard.querySelector('.quantity-input')?.value || 1;

    // 推送至dataLayer
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      "event": "add_to_cart",
      "ecommerce": {
        "currency": "{{currency_add_to_cart}}",
        "value": "{{estimated_total_initiate_checkout_js}}",
        "items": [
          {
            "item_id": itemId,
            "item_name": itemName,
            "price": itemPrice,
            "quantity": parseInt(itemQuantity)
          }
        ]
      }
    });
  }
});
</script>

场景2：上报购物车中的全部商品（解决旧商品丢失的问题）

若需上报购物车所有商品，遍历购物车抽屉里的每个商品条目，动态生成items数组：

<script>
document.addEventListener('click', function(e) {
  // 替换为你网站「添加到购物车」按钮的CSS选择器
  if (e.target.closest('.add-to-cart-btn')) {
    // 延迟执行，确保购物车抽屉已更新商品信息（时间可根据网站调整，300-1000ms均可）
    setTimeout(function() {
      // 替换为你网站购物车抽屉里单个商品条目的选择器
      const cartItems = document.querySelectorAll('.cart-drawer-item');
      const itemsArray = [];

      // 遍历每个购物车条目，提取信息
      cartItems.forEach(function(item) {
        const itemId = item.querySelector('.cart-item-id').textContent.trim();
        const itemName = item.querySelector('h2').textContent.trim();
        const itemPrice = item.querySelector('.price--item.price-regular').textContent.trim();
        const itemQuantity = item.querySelector('.cart-item-quantity').textContent.trim();

        itemsArray.push({
          "item_id": itemId,
          "item_name": itemName,
          "price": itemPrice,
          "quantity": parseInt(itemQuantity)
        });
      });

      // 推送至dataLayer
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        "event": "add_to_cart",
        "ecommerce": {
          "currency": "{{currency_add_to_cart}}",
          "value": "{{estimated_total_initiate_checkout_js}}",
          "items": itemsArray
        }
      });
    }, 500);
  }
});
</script>

GTM配置提示 #

1. 删除原自定义HTML代码，替换为上述任意一种代码
2. 触发器选择「点击 - 所有元素」，或更精准的「点击 - 特定元素」（选择你的「添加到购物车」按钮）
3. 使用GTM预览模式测试，查看dataLayer输出是否符合预期

内容的提问来源于stack exchange，提问作者I.mahadi