My goal with this code is to trigger an event in the data layer through Google Tag Manager whenever a user hovers over a specific area on the website for at least 1 second. The challenge I'm facing is that I have 8 other areas on the site using the same code, each pushing different information to the data layer (with distinct IDs). However, all these areas end up triggering the same event upon hover (the last event set up as a Tag in Google Tag Manager).
How can I ensure that these events are pushed correctly to the data layer?
Thank you, Attila
Below are two examples of the code:
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>