如何调整GTM自定义变量代码，返回实际点击按钮的onclick值？

我们的网站使用可重复区块展示“相关”或“推荐”资源，尝试通过GTM的CTA点击事件追踪这些元素的点击行为。由于图片链接采用button的onclick事件而非普通链接，需要返回该onclick属性的值。

编写了如下代码，但它总是返回列表中第一个按钮的onclick值（而非实际点击的按钮），请问该如何调整？

function() {
var regex = /location\.href=['"]([^'"]+)['"]/;
var code = document.querySelector("div > div.cards-wrapper > div > button").getAttribute("onclick");
var match = regex.exec(code);
var url = match ? match[1] : null;

return url
}

解决方案 #

问题核心是document.querySelector只会返回页面中第一个匹配选择器的元素，和用户实际点击的元素无关。要获取点击的按钮，需利用GTM点击场景下的上下文变量：

修改后的代码 #

function() {
  var regex = /location\.href=['"]([^'"]+)['"]/;
  // 获取当前点击元素对应的按钮（若点击的是按钮内部子元素，向上查找最近的button）
  var targetBtn = this.closest('button');
  if (!targetBtn) return null;
  
  var code = targetBtn.getAttribute("onclick");
  var match = regex.exec(code);
  return match ? match[1] : null;
}

关键说明 #

1. this的作用：在GTM的点击触发型自定义JS变量中，this指向用户实际点击的DOM元素。
2. closest('button')的作用：如果用户点击的是按钮内部的图片、文字等子元素，这个方法会向上查找最近的button父元素，确保能正确获取到带onclick属性的按钮。
3. 移除全局匹配的document.querySelector：改为基于点击上下文获取目标元素，精准匹配用户点击的按钮。

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