自定义 javascript 值未在 Google 跟踪代码管理器中更新

Question

我在 GTM 中创建了一个 Custom JavaScript 变量，用于在弹出表单中提取表单标题。

我正在使用元素可见性和 CSS 选择器来识别 forms。

这是一个包含多个 forms 的页面，因此我不想使用多个标签和触发器，而是想在一个页面上执行它并动态更改。

所以 CJS 是：

function() {
return  document.querySelector ('div._form-title').innerText
}

在控制台中测试时它工作得很好，但是当我在 Google 标签管理器的预览模式下测试它时，第一个工作正常，但是如果我打开任何其他 forms，以前的值会再次显示在新标签中。

就像它无法获取最新的一样。

标签在可见元素上触发并观察 DOM 变化，所以我本以为 CJS 变量会再次运行以获得更新的值，但事实并非如此。

有任何想法吗？

否则，在自动出现的变量中，当加载弹出窗口时，“单击文本”会作为整个表单文本出现。

因此，另一种方法是返回点击文本，但要缩短它——您知道如何返回例如“点击文本”变量的前 25 个字符吗？

提前致谢：）

Answer 1

在具有多个 forms（或匹配选择器的多个元素）的页面上，这将始终返回第一个匹配项。 这就是 document.querySelector 的工作方式，而不是特定于 GTM 的东西（也不要使用自定义 HTML 来获取 DOM 节点，使用内置的 DOM 变量类型 - 这避免了使用 eval，这有利于安全性和性能并允许如果这对您来说是个问题，请获取更严格的内容安全政策）。

如果您说使用点击文本是一种可行的替代方法，则无需缩短它（您可以在返回 {{Click Text}} 变量的 substring 的自定义 Javascript 变量中执行此操作，但由于您不必键入在这似乎不必要的任何地方删除点击文本），只需在触发器过滤器中使用starts with条件并匹配前 25 个字符：