Hover over/mouseover Event Tracking Implementation Guide
Hover over/mouseover Tracking
Hover over/mouseover tracking can be very useful to answer certain kinds of questions regarding how your users are using your site. It is relatively easy to implement with Oracle Infinity, however there are several things to consider before you go down this route.
For most sites, this will increase the number of collected events by 5-15x the default baseline. This is a lot of data and can have the unintended side effect of making some reports difficult to read. It also directly impacts your licensed event counts.
As such there are several recommendations we make when implementing hover/mouseover tracking:
- Implement the tracking only on specific pages, or specific page elements you’re interested in to avoid collecting data you don’t care about or won’t use.
- When developing your site, make sure to use unique element and div ID’s wherever possible. This will aid when trying to bind the mouseover tracking to specific elements.
- Implement tracking reviews on site update/design changes to make sure you’re not breaking any tracking that’s tied to specific element or div ID’s on the site.
- Set a reasonable hover over timeout, by default, our code here uses 500ms. Using shorter timeouts can result in tracking so many hover events that you don’t get a usable clusters of data. Using longer timeouts can result in missed interactions. Depending on how your site functions, you may need to experiment a bit to get the right timeout.
- Determine how long you’re going to run the hover tracking for. If you’re asking a one-time question, gather the data you need to answer that question, and then consider removing the hover tracking to reduce the event collection cost of your site.
Sample Code
There are many different ways to do mouseover tracking. Below is on example that you can use to frame your own implementation. This example uses the Event Tracking Plugin for the Infinity Tag, and implements a custom selector based hover over tracking event (meaning to use this method, your tag must include the Infinity Analytics module, as well as have the Event Tracking plugin enabled.
This sample uses a dwell time of 500ms (var dwellTime = 500;), and looks for a classname of “#nav-xshop” to listen for hover events. It also adds a WT.dl value of 98, though you can change this as needed for your purposes. Likewise the WT.ti (page title) value is injected as a custom string of “HoverOver Tracking: [element class name]”. The code also uses a timer to track hover time, and clears the timer if a user moves the mouse off of the defined target(s). Finally, there are several console.log outputs to help in troubleshooting.
Example hover tracking code:
{
"eventTrigger":"mouseover",
"selector":"#nav-xshop",
"eventCallback":
"var el = e[\"element\"] || e[\"srcElement\"] || {};
var payload = {};
var dwellTime = 500;
var handleTime = {};
var label = el.nodeName + el.id?'#'+el.id:el.className;
window.console.log(\"HoverOver: \"+label);
handleTime[label] = window.setTimeout(function()
{
window.console.log(\"HoverOver Tracking: \"+label);
payload['wt.ti'] = 'Hover Over ' + label;payload['wt.dl'] = 98;
ORA.click({ 'data':payload });
}, dwellTime);
var clearOurTimer = function(){
window.console.log(\"HoverOut: \"+label);
window.clearTimeout(handleTime[label]);
el.removeEventListener('mouseout', clearOurTimer);
};
el.addEventListener('mouseout', clearOurTimer);"
}
As a final note, for production operation, you can remove the console.log messages to further reduce the size and keep the browser console clean from extraneous messages.
In this next screenshot, you can see the event data generated by the above code sample. Note the Page Title (wt.ti) and the Event Determination Label (WT.dl) which both identify this as a hover over event. While this is just one suggested schema, you can modify your own hover over tracking to collect any parameters needed for your reporting needs.
Closing Thoughts
The above example is just a stepping-stone to help you get started in developing a mouseover/hover over tracking solution that is custom fit for your needs. As an alternative to using the Event Tracking Plugin, you could also move the sample code above into a separate mutation or even a custom plugin of your own devising.