2017-01-12 32 views
0

我一直负责创建纯JS内部促销跟踪器,并通过GTM实现此功能。我不确定我是以非常复杂的方式完成的,还是不愿意提出任何建议!Google Tag管理器中的纯JavaScript内部促销

目前我有以下标签:

此功能可以检查一个元素,以后引用,中视

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

然后我要检查,如果这些元素都是在用户视口中他们时滚动使用下面的脚本建设被推送到数据层的电子商务对象:

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 - 停止具有相同的项目推到数据层每次用户滚动,只有已将其推一次

乙 - 凝聚我的代码,以便它不是在三个独立的脚本

非常感谢花时间来看这个!

回答

1

A)你可以使用一个布尔值来检测,如果数据层推已execued如下:

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个不同的脚本?