如何获取全部商品名称？GTM自定义事件配置技术求助

你当前的代码通过截取整个购物车容器的文本并按固定字符串分割，只能拿到第一个商品名称——这种方式依赖静态文本内容，无法适配多个商品的场景。

正确的思路是通过DOM遍历定位每个独立商品元素，再逐一提取名称：

解决方案代码 #

编写自定义JavaScript函数遍历所有商品项并收集名称：

function getCartProductNames() {
  const cartContainer = document.querySelector('.cartAndCheckout__items');
  if (!cartContainer) return [];
  
  // 替换为购物车中单个商品项的实际选择器（比如每个商品的外层div类名）
  const productItems = cartContainer.querySelectorAll('.cart-item');
  const productNames = [];
  
  productItems.forEach(item => {
    // 替换为商品名称所在元素的实际选择器（比如类名、标签名）
    const nameElement = item.querySelector('.product-name');
    if (nameElement) {
      productNames.push(nameElement.textContent.trim());
    }
  });
  
  return productNames;
}

在GTM中使用步骤 #

1. 进入GTM后台，创建自定义JavaScript变量，将上述代码粘贴进去。
2. 在自定义事件标签中调用该变量：若需要字符串格式，可通过getCartProductNames().join(', ')拼接成逗号分隔的字符串。

关键注意事项 #

• 调整选择器：打开浏览器开发者工具（F12），检查购物车DOM结构，替换代码中.cart-item和.product-name为页面实际存在的选择器。
• 动态加载适配：若购物车通过AJAX动态加载，需结合GTM的DOM Ready事件或自定义触发器，确保商品加载完成后再执行变量。

内容的提问来源于stack exchange，提问作者miraç reisoğlu