Event Tracking for Mouseover/Hover on Element for X Seconds
A client of mine recently asked me to track ‘mouse interaction’ with an iframe that they embed on several pages. By ‘mouse interaction’, the client basically meant that they would like to track whenever users hovered their mouse cursor over the iframe for a certain amount of time. I’ve previously posted that you can track any mouse or keyboard interactions with Google Analytics. As long as they occur within the browser.
Luckily, there’s a widely supported browser event called ‘mouseover’. The mouseover event fires when a user moves the mouse cursor over a specified element - for instance, an iframe. But it can be used on any visible HTML element on the page. So, by combining this event with a timer, it’s possible to push a dataLayer event to Google Tag Manager. And then use that event to send an event hit Google Analytics.
In the end, we’ll end up tracking Google Analytics events whenever a user hovers his or hers mouse over our specified element.
We’ll start by setting up a Custom HTML Tag. This will contain the script that detects mouseovers on our element, and sends an event to Google Tag Manager when the user has hovered for the specified time. The tag should look like this:
Now, I’ve set the trigger to All Pages in the example. But you should create your own trigger so the tag only fires on pages where you want to setup the tracking. Grab the code in its entirety here:
<script>
var delay = function (elem, callback) {
var timeout = null;
elem.onmouseover = function() {
// Set timeout to be a timer which will invoke callback after 1s
timeout = setTimeout(callback, 5000);
};
elem.onmouseout = function() {
// Clear any timers set to timeout
clearTimeout(timeout);
}
};
delay(document.getElementById("id_of_element"), function() {
dataLayer.push({
"event":"elementHover"
});
});
</script>
Script courtesy of Stack Overflow user Robert; link.
In the code example above, I’m listening for mouseovers on the element with the ID ‘id_of_element’. It’s also in this script where we define the time that should pass before sending an event to GTM. In this example, it’s set at 5,000 milliseconds (which equals 5 seconds). If the user ‘leaves’ the element before the 5 seconds has passed, we’re not sending anything to GTM.
Next, go ahead and create a trigger. As you can tell from the code example, we’re sending a custom event called ‘elementHover’ to GTM. So the trigger should be of the Custom Event type and the Event name should be set to ‘elementHover’:
Lastly, we just need to setup the Universal Analytics tag that sends the actual event to Google Analytics. So, create a new tag of the Universal Analytics type and set your Tracking ID. Also, take care to set any custom fields such as cookieDomain if you’re using them in other tags. And, of course, set the Track Type to Event.
Then enter some values in the event fields (category, action and label) that make sense to you and to what you’re tracking. Mine are just examples. And finally, set the tag to fire on the trigger you created previously:
And that’s it! Well, as always, make sure to preview and test before you publish anything. The script is easily modified to suit all types of HTML elements. A couple of notes though:
As many of my other posts, this is a proof of concept. Before deploying anything to a production environment, take care to test. I’ve not used an anonymous function for the javascript, which is the best practice.