为何Google Tag Manager自定义JS变量无法获取弹窗按钮innerText？

数据老陈

2026-7-15

问题描述

我尝试从网站上的Digioh弹窗中提取按钮文本。目前按钮点击时已能触发事件，但还想获取按钮文本。我写了如下Google Tag Manager自定义JavaScript变量代码，但它返回空值（而非undefined）。我对JavaScript了解不多，正在边做边学，请问忽略了什么？

补充说明：这些是Digioh弹窗，Google Tag Manager（GTM）通过集成方式安装，事件已推送至dataLayer，我希望添加更多信息。

我的GTM自定义JS变量代码：

function() {
  var el = document.querySelectorAll('[aria-label=&quot;Close Modal&quot;]')[0].innerText;
  return el;
}

弹窗示例代码：

<div id="button5_wrapper">
  <button id="button5" class="button5" aria-label="Close Modal">I'm not interested</button>
</div>
<div id="button6_wrapper">
  <button id="button6" class="button6" aria-label="Close Modal">I don't qualify</button>
</div>

问题分析与解决方法

选择器转义错误：代码里的"是HTML实体转义字符，在JavaScript中直接使用会导致选择器无法匹配到正确元素。应该将选择器改为[aria-label="Close Modal"]或者[aria-label='Close Modal']，用原生的引号格式。
错误选取第一个匹配元素：当前代码总是取页面中第一个符合aria-label="Close Modal"的按钮文本，但用户点击的可能是任意一个同类型按钮，结果自然不符合预期。GTM内置了{{Click Element}}变量，可以直接获取当前触发点击事件的元素，这才是正确的获取目标。
修正后的自定义JS变量代码：

function() {
  // 验证点击元素是否为目标按钮
  const clickEl = {{Click Element}};
  if (clickEl.hasAttribute('aria-label') && clickEl.getAttribute('aria-label') === 'Close Modal') {
    // 优先用innerText，兼容用textContent处理隐藏文本情况
    return clickEl.innerText || clickEl.textContent;
  }
  return '';
}

空值原因排查：如果原代码确实匹配到了元素但返回空，可能是按钮文本被CSS隐藏（如text-indent: -9999px、visibility: hidden），此时innerText会返回空，改用textContent可以获取到原始文本内容。
调试建议：使用GTM预览模式，查看{{Click Element}}的具体值，确认点击事件的目标元素是否为按钮本身（避免事件冒泡导致获取到父容器）。

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