为什么这段 JavaScript 代码没有在 Google 跟踪代码管理器中提取 aria-label insideText？

Question

我正在尝试从我的网站上设置的灯箱中提取按钮文本。单击按钮时它已经触发了一个事件，但我也想提取文本。

我通过研究想出了下面的代码，但它返回一个空值（不是未定义的）。我对 JavaScript 不太了解，所以如果有一些非常明显的事情，我很抱歉。我一边做一边学习。但我在这里错过了什么？

*编辑：我认为需要更多信息。

• 这些是 Digioh 灯箱，GTM 通过集成安装。他们将事件推送到数据层，但我想添加更多信息。

Google 跟踪代码管理器自定义 JavaScript 变量：

function() {
  var el = document.querySelectorAll('[aria-label="Close Modal"]')[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>

Answer 1

您遇到的问题是

innerText

属性不返回

aria-label

属性。它返回元素内的文本内容。您应该使用

getAttribute()

方法来获取元素的属性值。

在您的情况下，如果您想返回按钮内的文本（即“我不感兴趣”或“我不符合条件”），您应该保留

.innerText

:

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

这将返回第一个带有

aria-label="Close Modal"

的按钮的文本。

但是如果你想返回

aria-label

值（即“关闭模态”），你应该将

.innerText

更改为

.getAttribute('aria-label')

：

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

这将返回“关闭模态”。

请确保该函数运行时元素已经加载。如果元素尚未加载，此代码将返回

undefined

，因为

document.querySelectorAll('[aria-label="Close Modal"]')[0]

将是

undefined

。

如果您尝试在发生按钮单击事件时获取按钮文本（即“我不感兴趣”或“我不符合条件”），您可能需要在 GTM 中使用事件侦听器，侦听这些按钮上的

click

事件。然后，使用

event.target.innerText

访问所单击按钮的文本。这种方法将有助于确保函数响应按钮单击而运行，并确保它正确识别所单击的按钮。