Google跟蹤代碼管理器中的純JavaScript內部促銷

Question

我的任務是創建一個純JS內部促銷跟蹤器並通過GTM實施。 我不確定是否以非常復雜的方式完成了此操作，還是不願意接受任何建議！

目前，我有以下標簽：

此函數檢查視口中是否存在稍后引用的元素

  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)
  );
}

然后，我將要檢查的頁面上的所有元素都顯示在視圖中，並將它們推入數組。

這是我用來執行此操作的腳本。 注意：我在列表上執行了模數划分，因為頁面上還有其他滿足該選擇器的項目，但是我只想選擇第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;
    }
}

然后，我想檢查這些元素中的每個元素在滾動時是否在用戶視口中，同時使用以下腳本構建要推到dataLayer的電子商務對象：

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);
        }
    }

}

目前我的問題是，每當我滾動時，我都會反復檢查所有滿足選擇器要求的項目，這意味着直到某個項目不在視口中之前，我都會多次將同一項目推入dataLayer。

無論如何，我可以：

A-每次用戶滾動時，都不會將相同的項目推送到dataLayer，而僅將其推送一次

B-壓縮我的代碼，使其不在三個單獨的腳本中

非常感謝您抽出寶貴的時間查看此信息！

Answer 1

A）您可以使用布爾值來檢測是否已如下執行dataLayer推送：

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個單獨的腳本中擁有它的原因是什么？