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

Question

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

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

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

我该怎么做？

Answer 1

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

Answer 2

您可以在页面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标签/触发器