将innerHTML值推送到Tag Manager的数据层

Question

我是HTML和CSS的新手，很抱歉，如果之前发布的那样。

我正在为新网站构建标记，用于跟踪网页上各个部分的浏览次数。

这些部分的名称包含在h2.title的一个名为“innerHTML”的变量中。我似乎无法将其推入dataLayer，以便Tag Manager在触发器中使用。

我该怎么做？

Answer 1

您可以在页面HTML中添加此Javascript代码。

window.dataLayer = window.dataLayer || [];
window.addEventListener('scroll', function() { 
    var sections = document.querySelectorAll('h2.title');
    for(i=0;i<sections.length;i++)
    {
        if (checkVisible(sections[i])) {
            var sectionTitle = sections[i].innerText;
            if(dataLayer.length == 0 || dataLayer[dataLayer.length-1]["sectionTitle"] != sectionTitle){
                dataLayer.push({"sectionTitle":sectionTitle });
            }
        }
    }
});

function checkVisible(elm) {
    var rect = elm.getBoundingClientRect();
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

如果在用户屏幕中显示部分标题，则此代码将使用键“sectionTitle”将标题推送到dataLayer。

然后您可以在GTM中读取数据层并设置propper标签/触发器

Answer 2

考虑使用元素可见性触发类型 https://support.google.com/tagmanager/answer/6106961#element_visibility 如果你想坚持使用Dom变量，可以解释它是如何工作的： 默认情况下，DOM Element变量返回所选元素的文本内容。在您的情况下，这似乎与innerHTML相同。 因此，您可以将此变量用作触发器中的条件。 这是一个例子。 我的页面上有一个标签 <h1 id="title">test page 1</h1> 我创建了一个DOM元素变量
此变量解析为测试第1页＆＃39; 现在我可以在触发器中使用它作为条件