Google Tag Manager, event push to data layer

Question

I write this code to push an event to the data layer via the Google Tag Manager whenever a user mouseover on a specific area of the website for at lesast 1 second. The problem is that I have 8 other area that uses this piece of code and push other information to the data layer (of course I defined different IDs for these divs), but here comes the hard part: Every single area pushes the same event on mouseover (the event which was created for last time as Tag in Google Tag Manager). How could I push these events corretly to the data layer?

Thanks, Attila

There are two examples of my codes:

    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

Use following code to setup listening events on your page:

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

Do following steps in GTM:

1. Create 3 GTM variables with type 'Data Layer Variable' and followint 'Title' - 'Data Layer Variable Name':

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

2. Create GTM trigger with title MyHover trigger, type 'Custom event' and 'Event name' mytaghover

3. Create GTM tag with type 'Google Analytics'. Define your 'Tracking ID'. Choose 'event' in 'Track Type' field. Fill fields of 'Event Tracking Parameters' with appropriate variables from step 1. In 'Fire On' section choose 'More' and select MyHover trigger.

4. Test your container in 'Preview' mode then publish it.