嘿，很高兴你已经搞定了按钮点击的基础追踪！要把点击事件和对应商品名称绑定起来，这里有几个适合非开发者的实用方案，一步步来：

方案一：用GTM内置变量+DOM遍历（无需修改网站代码） #

这是最适合你的方案，完全在GTM里操作：

1. 启用必要的内置变量
   先进入GTM的「变量」页面，在「内置变量」里勾选点击元素（{{Click Element}}），这个变量能帮我们获取到被点击的按钮元素。

2. 创建自定义JavaScript变量（获取商品名称）

   • 新建变量，类型选「自定义JavaScript」
   • 粘贴以下代码（记得根据你网站的实际HTML结构调整class名！）：

     function() {
       // 获取点击的按钮元素
       const clickedButton = {{Click Element}};
       // 向上找到包含商品信息的父容器（替换成你页面中商品容器的class，比如.product-card）
       const productContainer = clickedButton.closest('.product-item');
       
       if (productContainer) {
         // 找到容器里的商品名称元素（替换成你页面中商品名称的class，比如.product-title）
         const productNameElement = productContainer.querySelector('.product-name');
         // 返回清理后的商品名称文本
         return productNameElement ? productNameElement.textContent.trim() : 'Unknown Product';
       }
       // 找不到容器时返回默认值
       return 'Unknown Product';
     }
     

   • 怎么找正确的class名？右键点击商品里的按钮→「检查」，在开发者工具里向上找包裹整个商品的父元素，看它的class属性；再找商品名称的元素，看它的class。

3. 在事件标签里关联商品名称
   打开你用来追踪点击的标签（比如GA4事件标签），添加一个事件参数：

   • 参数名：product_name（或者你想要的名称）
   • 参数值：选择你刚才创建的自定义JavaScript变量
     保存标签后，用GTM预览模式测试，点击按钮后查看变量值是否正确，再检查事件是否带了商品名称参数。

方案二：用数据层推送（需网站代码支持，更稳定） #

如果你能说服开发帮忙改一点点代码，这个方案更可靠：

让开发在每个「Sample Product」按钮上添加点击事件，把商品名称推送到GTM的数据层里：

// 给所有按钮绑定点击事件
document.querySelectorAll('.sample-product-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前商品的名称
    const productName = this.closest('.product-item').querySelector('.product-name').textContent.trim();
    // 推送到数据层
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      event: 'sampleProductClicked', // 自定义事件名
      productName: productName
    });
  });
});

然后在GTM里：

• 新建「自定义事件」触发器，触发条件为event等于sampleProductClicked
• 新建「数据层变量」，变量名填productName
• 在事件标签里用这个数据层变量作为参数值即可

注意事项 #

• 一定要用GTM的预览模式测试！点击按钮后，在预览面板里查看变量和事件数据是否正确。
• 如果搜索结果是动态加载的（比如滚动加载更多），确保你的触发器设置里没有限制静态元素，GTM默认支持动态元素，但最好测试一下新加载的商品按钮是否能正常追踪。
• 调整class名时，尽量用唯一的class，避免匹配到页面上的其他元素。

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