Google Tag管理器，事件推送到數據層

Question

當用戶在網站的特定區域以至少1秒的時間進行鼠標懸停時，我編寫此代碼以通過Google Tag Manager將事件推送到數據層。問題是我有8個使用這段代碼的其他區域，並將其他信息推送到數據層（當然，我爲這些div定義了不同的ID），但這裏有一個難題：每個區域都會將相同的事件mouseover（上次爲Google跟蹤代碼管理器中的代碼創建的事件）。 我如何才能將這些事件合理地推送到數據層？

感謝， 阿提拉

有我的代碼的兩個例子：

var startTime; var endTime; var differenceTime; 

    document.getElementById("budapest-pin").onmouseover = function() {mouseOver()}; 
    document.getElementById("budapest-pin").onmouseout = function() {mouseOut()}; 

    function mouseOver() { 
    startTime = Date.now(); 
    }; 

    function mouseOut() { 
     endTime = Date.now(); 
     differenceTime = (endTime-startTime)/1000; 

     if(differenceTime>1) 
     { 
      dataLayer.push({'event': 'budapest'   
     }); 
     }; 
    }; 
</script> 

<script> 

    var startTime; var endTime; var differenceTime; 

    document.getElementById("szeged-pin").onmouseover = function() {mouseOver()}; 
    document.getElementById("szeged-pin").onmouseout = function() {mouseOut()}; 

    function mouseOver() { 
    startTime = Date.now(); 
    }; 

    function mouseOut() { 
     endTime = Date.now(); 
     differenceTime = (endTime-startTime)/1000; 

     if(differenceTime>1) { 
      dataLayer.push({'event': 'szeged' 

     }); 
     }; 
    }; 
</script> 

Answer 1

使用下面的代碼來設置監聽你的頁面上的活動：

var startTime = {}; 
var endTime = {}; 
document.getElementById("budapest-pin").onmouseover = function() { 
    mouseOver('budapest') 
}; 
document.getElementById("budapest-pin").onmouseout = function() { 
    mouseOut('budapest') 
}; 
document.getElementById("szeged-pin").onmouseover = function() { 
    mouseOver('szeged') 
}; 
document.getElementById("szeged-pin").onmouseout = function() { 
    mouseOut('szeged') 
}; 

function mouseOver(id) { 
    startTime[id] = Date.now(); 
}; 

function mouseOut(id) { 
    endTime[id] = Date.now(); 
    var differenceTime = (endTime[id] - startTime[id])/1000; 
    if (differenceTime > 1) { 
     dataLayer.push({ 
      'event': 'mytaghover', 
      'eventCategory': id, 
      'eventAction': 'hover', 
      'eventLabel': 'hovered ' + differenceTime + ' seconds' 
     }); 
    }; 
}; 

待辦事項遵循GTM中的步驟：

個

1. 創建3 GTM變量類型 '數據層變量' 和followint '標題' - '數據層變量名'：

   • dataLayer Category - eventCategory
   • dataLayer Action - eventAction
   • dataLayer Label - eventLabel

2. 創建帶標題的GTM觸發器MyHover trigger，鍵入「自定義事件」和「事件名稱」mytaghover

3. 創建類型爲「Google Analytics（分析）」的GTM標記。定義您的「跟蹤ID」。在「音軌類型」字段中選擇「事件」。使用步驟1中的適當變量填充'事件跟蹤參數'字段。在'開啓'部分選擇'更多'並選擇MyHover trigger。

4. 以'預覽'模式測試您的容器，然後發佈它。