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

に私は、私のページ上のすべての要素をつかむていることを確認しますチェックしたいものを見たい場合は、配列にプッシュしてください。

これはこれを行うために使用しているスクリプトです。 N.B.私はそのセレクタを満たすページ上の他の項目があるので、リストのモジュラス除算を実行しましたが、私は各5番目の項目を選択したいだけです。次のスクリプトを使用してdataLayerにプッシュするeコマースオブジェクトを構築しながら、彼らがスクロールするよう

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に複数回プッシュされた同じアイテムを取得することを意味する、自分のセレクタを満たすすべてのアイテムを繰り返しチェックしています。そうでないように私のコードを凝縮 - 同じアイテムがdataLayerにユーザーがスクロールとだけ、それは一度

Bをプッシュしているたびにプッシュされた停止 -

Aは：

は、私ができることをとにかくあり3つの別々のスクリプトで

ありがとう、これを見て時間を割いてくれてありがとう！

Answer 1

A）あなたはdataLayerプッシュは以下のように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つの別々のスクリプトでそれを持っている理由は何ですか？