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

【问题标题】：Custom Javascript in google tag manager return undefined谷歌标签管理器中的自定义 Javascript 返回未定义
【发布时间】：2020-04-29 17:52:22
【问题描述】：

在我的页脚中，我有一个 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)

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

【问题讨论】：

标签： javascript google-tag-manager

【解决方案1】：

我无法调试为什么你会得到未定义的值，但我怀疑自定义 JavaScript 变量不是你在这种情况下需要的。

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

【讨论】：

【解决方案2】：

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

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

现在它可以工作了，也许 dom 变量的解决方案也可以工作，谢谢

【讨论】：

【解决方案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;
}

【讨论】：