如何通过GTM自定义JavaScript变量为点击按钮分配字符串值

首先，你的脚本存在几个关键问题，导致它无法正常工作：

1. 闭包陷阱导致索引错误 #

在for循环中用var声明的i是函数级作用域，当点击事件触发时，循环早已执行完毕，i的值会变成3（因为按钮总数是3），此时theSpotlight[i]就是undefined，根本匹配不上你的判断条件。

2. 赋值运算符替代了比较运算符 #

你写的if (theSpotlight[i] = 0)是赋值操作（把0赋值给theSpotlight[i]），而不是比较操作，正确的比较应该用===（严格相等），比如if (i === 0)。

3. 逻辑不符合GTM自定义变量的运行机制 #

你试图提前给按钮绑定点击事件，但GTM的自定义JavaScript变量是在事件触发时才执行的，不需要手动添加事件监听——你的点击触发器已经在监听按钮点击了，变量只需要在触发时判断当前点击的是哪个按钮即可。

正确的实现方案 #

从你提到的UA事件标签、GA等信息推断，你应该是在使用Google Tag Manager，我们可以利用GTM内置的{{Click Element}}变量来获取当前点击的按钮，然后判断它在目标按钮列表中的位置：

方案1：遍历NodeList匹配元素 #

function() {
  // 获取所有目标按钮的NodeList
  const targetButtons = document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button');
  // 获取当前点击的元素（GTM内置变量，需提前启用）
  const clickedElement = {{Click Element}};
  
  // 遍历找到点击元素的索引
  for (let i = 0; i < targetButtons.length; i++) {
    if (targetButtons[i] === clickedElement) {
      // 返回对应的唯一字符串，索引+1是为了从1开始计数
      return `Spotlight ${i + 1}`;
    }
  }
  
  // 如果未匹配到目标按钮，返回默认值
  return 'n/a';
}

方案2：转数组用indexOf简化代码 #

function() {
  // 将NodeList转为数组，方便使用indexOf方法
  const targetButtons = Array.from(document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button'));
  const clickedElement = {{Click Element}};
  
  const buttonIndex = targetButtons.indexOf(clickedElement);
  // 检查索引是否有效，有效则返回对应字符串，否则返回默认值
  return buttonIndex !== -1 ? `Spotlight ${buttonIndex + 1}` : 'n/a';
}

注意事项 #

1. 确保你在GTM中启用了{{Click Element}}内置变量（在变量设置中找到并勾选它）。
2. 把上述代码作为自定义JavaScript变量保存，然后在UA事件标签的「事件标签」字段中引用这个变量即可。
3. 不需要保留原来的事件监听代码，GTM的点击触发器已经足够捕获按钮点击事件。

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