Google跟蹤代碼管理器，將事件推送到數據層

Question

每當用戶將鼠標懸停在網站的特定區域至少1秒鍾時，我都會編寫此代碼以通過Google跟蹤代碼管理器將事件推送到數據層。 問題是我還有其他8個區域使用此代碼並將其他信息推送到數據層（當然，我為這些div定義了不同的ID），但是這里出現了困難的部分：每個區域都將相同的事件推送到鼠標懸停（該事件最后一次在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變量，其類型為“數據層變量”，然后跟隨“標題”-“數據層變量名稱”：

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

2. 使用標題MyHover trigger創建GTM觸發器，鍵入“自定義事件”和“事件名稱” mytaghover

3. 創建類型為“ Google Analytics（分析）”的GTM標簽。 定義您的“跟蹤ID”。 在“跟蹤類型”字段中選擇“事件”。 在步驟1中使用適當的變量填充“事件跟蹤參數”字段。在“啟動”部分中，選擇“更多”，然后選擇MyHover trigger 。

4. 在“預覽”模式下測試您的容器，然后發布。