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

Question

in my footer i have a div section structured as follow:

<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>

I want capture into a variable the text value, so i write this in gtm:

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

The problem is that, debugging the page, the variable's value is undefined. I try the script in another custom page and it works, i write the script in this way:

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


})(document)

In console i get the text but not in tag manager, why?? thanks

Answer 1

I can't debug why you're getting undefined values, but I suspect a custom JavaScript variable is not what you need in this instance.

You can return the text contained within a DOM element by using a Google Tag Manager 'DOM Variable'. Configure your variable to use a CSS selector that selects elements that match #text_icl-7 > p . Leaving the 'attribute' field empty will return the text contained with the element by default.

Answer 2

i was helped by gtm forum. The corret script is:

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

Now it works, maybe the solution of a dom variable also would works, thanks

Answer 3

Sorry to respond to late this but here is my solution, you need define the variable at the beginning of the script and return it at the end. Example below.

This NOT works:

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

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

But this works:

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

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