如何在Google Tag Manager中用自定义HTML获取商品详情

我正在用Google Tag Manager（GTM）的自定义HTML代码为电商网站设置事件追踪，需要补充代码捕获商品详情变量。目前DataLayer中存在数组形式的商品数据（从截图可见，DataLayer包含ecommerce对象，其下add属性内的products数组存储着商品ID、名称、价格、数量等详情），想请教如何获取这些数据。

现有代码如下：

<script type = "text/javascript">
   var vendor = window.vendor || [];
   vendor.track("Added To Cart", {{Add to Cart}});
</script>

方案1：直接从DataLayer提取数据 #

你可以通过遍历或直接访问DataLayer的固定结构来获取商品数组：

<script type="text/javascript">
var cartProducts = [];
// 遍历DataLayer定位目标商品数据
window.dataLayer.forEach(function(item) {
  if (item.ecommerce && item.ecommerce.add && item.ecommerce.add.products) {
    cartProducts = item.ecommerce.add.products;
  }
});

// 若DataLayer结构固定，也可直接获取最新的加购商品数据
// var targetItem = window.dataLayer.find(item => item.ecommerce?.add?.products);
// var cartProducts = targetItem ? targetItem.ecommerce.add.products : [];

var vendor = window.vendor || [];
// 将商品数组传入追踪方法，也可按需提取单商品信息
vendor.track("Added To Cart", {
  products: cartProducts,
  // 单商品场景可直接取第一个元素：product: cartProducts[0] || {}
});
</script>

方案2：通过GTM自定义变量获取数据 #

1. 进入GTM后台，依次点击变量 → 用户定义变量 → 新建变量
2. 选择数据层变量，设置数据层变量名称为ecommerce.add.products
3. 为变量命名（例如DL-加购商品数组）
4. 在自定义HTML代码中直接调用该变量：

<script type="text/javascript">
var vendor = window.vendor || [];
var cartProducts = {{DL-加购商品数组}} || [];
vendor.track("Added To Cart", {
  products: cartProducts
});
</script>

关键注意点 #

• 确保DataLayer数据在自定义HTML标签触发之前已被推送，否则会获取不到数据
• 多商品加购时可遍历数组处理每个商品；单商品场景直接取数组第一个元素即可
• 可根据需求提取商品关键字段（如id、name），整理后再传入track方法

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