Google Tag Manager自定义JS变量点击返回相同索引值问题排查

核心问题 #

你的代码完全误解了Google Tag Manager（GTM）自定义JavaScript变量的运行逻辑：

1. GTM自定义JS变量的函数会每次需要获取变量值时完整执行一遍，而不是仅执行一次绑定事件。你当前的代码在函数内直接循环绑定点击事件，这会导致每次触发变量读取（比如点击元素时）都重复绑定事件，不仅冗余，还会引发逻辑混乱。
2. 事件回调myScript的返回值根本不会被GTM捕获——GTM自定义变量需要函数直接返回目标值，或者返回一个能在触发时计算值的函数，而不是把返回值写在事件回调里。
3. 即便闭包试图保存index，但由于变量函数执行时机的问题，最终也无法正确关联点击事件与对应元素的索引。

正确写法 #

你不需要提前绑定事件，而是利用GTM内置的点击变量，在点击发生时动态计算当前元素的索引：

function() {
  // 获取GTM内置的点击元素变量（需提前启用）
  const clickedElement = {{Click Element}};
  // 向上查找最近的.staff-container父元素
  const targetContainer = clickedElement.closest('.staff-container');
  
  if (!targetContainer) return null;
  
  // 获取所有.staff-container元素并转为数组
  const allContainers = Array.from(document.querySelectorAll('.staff-container'));
  // 返回当前容器的索引
  return `Clicked : ${allContainers.indexOf(targetContainer)}`;
}

写法说明 #

• 使用{{Click Element}}（GTM内置变量，需在变量设置的「内置变量」中勾选启用）获取当前点击的元素。
• 通过closest('.staff-container')定位点击元素所属的目标容器，避免了你原代码中children[0].children[0]这种依赖固定DOM结构的脆弱写法。
• 将querySelectorAll返回的类数组转为真实数组，用indexOf直接计算当前容器的索引。

额外注意事项 #

• 不要在自定义变量中绑定事件——GTM的触发器机制会负责事件监听，变量只需专注计算并返回目标值即可。

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