html - 来自一个元素的 dataLayer.push 会破坏另一个元素的 dataLayer.push

Question

我正在 build WP website using DIVI theme .应该被插入 dataLayer 的标签被默认的“未设置”值卡在某个地方。

为了推送我使用脚本的值:

<script>
    function init() {
        dataLayer.push({'sectionLabel': 'Test section'});
    }
    window.onload = init;
</script>

触发:

<p class="GASectionVisible"> 

它适用于 isolation但不在 main website 上.

现在有趣的部分:

我在同一页面上的切换上实现了非常相似的标签 - 它们仅在切换打开以显示具有触发类的内容后才被触发。它们工作得很好，但我认为它们会以某种方式破坏 dataLayer.push 新元素 - 标题。当我粘贴 完全相同的代码从标题到全新的空白页面，它们正确触发和推送信息并按预期传递值 .当我将他们的确切副本粘贴到我的网站上时，标签仍然会触发，但会显示标签“未设置”。

唯一的 解决方法 我想是把触发元素和脚本放在一个单独的页面上，然后通过 iFrame 将它嵌入到主站点上。它有效，但我无法在我需要跟踪的所有元素上做到这一点。

Answer 1

为什么它没有在 http://www.wro.place/smart-bedroom/ 上触发的问题页面，因为您覆盖了 onload custom.min.js 中的函数。这意味着您下面的代码将永远不会触发，因为它已被覆盖。

<script>
  function init() {
    dataLayer.push({'sectionLabel': 'Test section'});
  }
  window.onload = init;
</script>`

正确的做法是

document.addEventListener('DOMContentLoaded', function () {
    dataLayer.push({'sectionLabel': 'Test section'});
}, false);

更新
根据评论中的讨论，新的解决方案是:

var firedSections = []
window.dataLayer = window.dataLayer || [];
window.addEventListener('scroll', function() { 
    var sections = document.querySelectorAll('.et_pb_section');
    for(i=0;i<sections.length;i++)
    {
        if (firedSections.indexOf(i) == -1 && checkVisible(sections[i])) {
          firedSections.push(i)
          dataLayer.push({'sectionLabel': 'Number '+i});
        }
    }
});


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

您需要添加此代码 页面上只有一次 滚动页面后，它将插入数据层。