javascript - Google 跟踪代码管理器中的纯 JavaScript 内部促销

Question

我的任务是创建一个纯 JS 内部促销跟踪器并通过 GTM 实现它。我不确定我是否以一种非常复杂的方式完成了这件事，或者没有接受任何建议!

目前我有以下标签:

此函数检查稍后引用的元素是否位于视口(viewport)中

  function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );
}

然后，我抓取页面上我想要检查的所有元素是否在 View 中，并将它们插入数组中。

这是我用来执行此操作的脚本。注意:我已经在列表上执行了模数除法，因为页面上还有其他项目满足该选择器，但我只想选择第 5 个项目。

var id = document.getElementById('foo');
var list = id.getElementsByTagName('ba');
var items = [];
var position = [];
var j = 1;


for (var i = 0; i < list.length; i++) {
    if (i % 5 == 0) {

        items.push(list[i]);
        j = j + 1;
    }
}

然后，我想检查这些元素在滚动时是否位于用户视口(viewport)中，同时使用以下脚本构建要推送到数据层的电子商务对象:

window.onscroll = myfunction;
var ecommerceObject;
var event;
function myfunction() {
    for (var i = 0; i < cars.length; i++) {
        if (isInViewport(list[i]) === true) {
            ecommerceObject['ecommerce']['promoView'] = {
              'event' : 'promoview',  
              'promotions': [{
                    'id': items[i].innerText.split("\n")[1],
                    'name': items[i].id
                }]
                             };
            window.dataLayer.push(ecommerceObject);
        }
    }

}

我目前的问题是，每当我滚动时，我都会重复检查满足我的选择器的所有项目，这意味着直到某个项目不再位于视口(viewport)中之前，我将多次将同一项目推送到数据层。

无论如何我可以:

A - 每次用户滚动时停止将相同的项目推送到数据层，而只推送一次

B - 压缩我的代码，使其不在三个单独的脚本中

非常感谢您花时间查看此内容!

Answer 1

A) 您可以使用 bool 值来检测数据层推送是否已执行，如下所示:

window.onscroll = myfunction;
var ecommerceObject;
var event;
var done = false; // example of a new variable 
function myfunction() {
    for (var i = 0; i < cars.length; i++) {
        if (isInViewport(list[i]) === true && !done) { //execute only if NOT done
            done = true; //set done to true
            ecommerceObject['ecommerce']['promoView'] = {
              'event' : 'promoview',  
              'promotions': [{
                    'id': items[i].innerText.split("\n")[1],
                    'name': items[i].id
                }]
                             };
            window.dataLayer.push(ecommerceObject);
        }
    }

}

B)您首先将其放在 3 个单独的脚本中的原因是什么？