Tracking the Hover Intent with Google Tag Manager

At the moment, Google Tag Manager listeners are limited to Form Submits, Link Clicks and Clicks (for any DOM element). We are going to write a custom listener for hover intents by users. This means that we’re not only to do something when the user pass the mouse pointer over an element, but instead we’re waiting a certain time with the mouse over the element before submitting the action to GTM.

For this we’re going to use the mouseenter and the mouseleave javascript events.

The mouseenter event is fired when the mouse is moved over a DOM element, e mouseleave  in the other side is fired when the mouse leaves the DOM Element.

So we are going to start a time, when the mouseenter event occurs, and then the mouseleave event to disable the previous time. This way, if the pointer is not over an element for the set time, nothing will be sent to Google Tag Manager.

Instead of pushing our data as we usually do, this time we’ll do it the same way Google Tag Manager does with it’s built-in listeners, so we’ll be pushing a gtm.hover  event to the dataLayer that will look this way:

We’ll have the current gtm.element  info, and the gtm.elementClasses , gtm.elementId as we have with the others listeners in Google Tag Manager to allow us to set our triggers.

We’ll need to create a new tag, let’s call it for example : “TOOL – Hover Intents Listener” and let’s put the following code into that tag:

// Tracking Top Links Hover Menus
  function trackHoverIntent(selector, time) {
    var timeoutId;
    var elements = window.document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('mouseenter', function(event) {
        var targetElement = || event.srcElement;
        var classes = targetElement.className;
        var id =;
        if (!timeoutId) {
          timeoutId = window.setTimeout(function() {
              'event': 'gtm.hover',
              'gtm.element': targetElement,
              'gtm.elementClasses': classes,
              'gtm.elementId': id,
              'gtm.elementHoverTime': time
            timeoutId = null;
          }, time);

    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('mouseleave', function() {
        if (timeoutId) {
          timeoutId = null;

#Tip: Remember to put the code above betweentags if you don’t wanna inject a bunch of code into your visible HTML code.

Then we’ll need to add the listeners to the elements we want this way:

trackHoverIntent('img.thumbnail', 1500);

For example this code above will send a gtm.hover event everytime the visitor moves his mouse over an image with the class “thumbnail” for more than 1.5 seconds.


Author: David Vallejo

Google Analytics Consultant and implementer. I have some experience with Google Tag Manager Follow me: @thyng

3 thoughts on “Tracking the Hover Intent with Google Tag Manager”

    1. Yes, on any implementation the hit limits should be taken in mind. But I think you will hardly find many user’s bypassing the 500 hits/session limit (take in mind the limit excludes E-Comm hits).

      1. Its true that it is rare 🙂 It tends to be an issue on particular types of websites like casinos or online game sites where users interact a lot and have a longer stay.

        On any medium+ traffic site though imagine if someone set this up for their navigation for example.

Leave a Reply

Your email address will not be published. Required fields are marked *