谷歌标签管理器中的自定义 Javascript 返回未定义

Question

在我的页脚中，我有一个结构如下的 div 部分：

<div id="text_icl-7" class="widget widget_text_icl">        
<div class="textwidget">
<p style="text align:justify;">
<img src="image.jpg" alt="YC logo">
Some text
</p>
</div>
</div>

我想将文本值捕获到一个变量中，所以我在 gtm 中写了这个：

function () {
var desc = document.getElementById("text_icl-7").childNodes[1];
var p = desc.childNodes[1].childNodes[2];
return p;
}

问题是，调试页面时，变量的值是未定义的。 我在另一个自定义页面中尝试脚本并且它有效，我以这种方式编写脚本：

(function(d) {
var desc = document.getElementById("text_icl-7").childNodes[1];
var p = desc.childNodes[1].childNodes[2];
console.log(p)


})(document)

在控制台中我得到文本但在标签管理器中没有，为什么？ 谢谢

Answer 1

我无法调试为什么您会得到未定义的值，但我怀疑自定义 JavaScript 变量不是您在此实例中所需要的。

您可以使用 Google 标签管理器“DOM 变量”返回包含在 DOM 元素中的文本。 将变量配置为使用 CSS 选择器来选择与#text_icl-7 > p匹配的元素。 默认情况下，将“属性”字段留空将返回元素中包含的文本。

Answer 2

我得到了 gtm 论坛的帮助。 正确的脚本是：

function() {
  var el = document.querySelector('#text_icl-7');
  return el && (el.textContent || el.innerText);
}

现在它有效了，也许 dom 变量的解决方案也有效，谢谢

Answer 3

抱歉回复晚了，但这是我的解决方案，您需要在脚本开头定义变量并在结尾返回它。 下面举例。

这不起作用：

function(){
  document.querySelectorAll('.some-class').forEach(function(item){
    var displayStyle = item.style.display;

    if (displayStyle === 'block'){
      return item.getAttribute('id');
    }
  })
}

但这有效：

function(){
  var result = '';
  document.querySelectorAll('.some-class').forEach(function(item){
    var displayStyle = item.style.display;

    if (displayStyle === 'block'){
      result = item.getAttribute('id');
    }
  })
  return result;
}