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. 以'预览'模式测试您的容器，然后发布它。