(GTM) Trigger fb pixel on hover

Question

I'm trying to trigger a fb pixel event when hovering a div (or else) in a page. However it looks like the event is being triggered a first time before I hover the div. When hovering the div, the event indicates the right parameters.

A very good thing also, would be to have additional information captured like the hovered div id or else.

Here is the code I inserted in my GTM tag. I'm triggering it on page load (All Pages).

<script> 
$(document).ready(function() {
var startHover = $.now();

$("#product_name").hover(
function(){
    startHover = $.now();
},
function(){
    var endHover = $.now();
    var msHovered = endHover - startHover;
    var seconds = msHovered/1000;
    if (seconds >= 1) {
        fbq('track', 'Hover', {
            domain: {{Page Hostname}},
            page_path: {{Page Path}}
        });
    }
}
);
});
</script>

HTML code:

<p id="product_name">Product 1</p>

Any help would be really pleased!

Many thanks.

Answer 1

I managed to find a solution to my problem. Basically I was triggering the tag on All Pages, so the fb event was triggered without content, the correct parameters being only sent when hovering #product_name.

I created a variable "event" and pushed a dataLayer "thereisHover".

dataLayer.push({
   'event': 'thereisHover'
});  

Then I separated the standard event into another tag which fires only when event = thereisHover.