将 innerHTML 值推送到跟踪代码管理器的数据层

Question

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

我正在为一个新网站构建标签，以跟踪页面上的部分被查看的次数。

这些部分的名称包含在 h2.title 的一个名为 "innerHTML" 的变量中。我似乎无法将其推送到数据层中以供跟踪代码管理器在触发器中使用。

我该怎么做？

Answer 1

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

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" 将标题推送到数据层。

然后就可以在GTM中读取datalayer并设置propper tags/triggers

Answer 2

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

将 innerHTML 值推送到跟踪代码管理器的数据层

Push innerHTML value to data layer of Tag Manager

javascript

innerhtml

google-tag-manager