Get the Recipe: Hover Tracking in Google Tag Manager



Question: Can we track hover events?

Answer: Yes, with our Google Tag Manager recipe!

What is the Hover Listener Recipe?

Out of the box, Google Tag Manager is pretty flexible. Several types of triggers are available that listen for certain actions or events, such as clicks, form submissions, history changes and more (read Zee’s post for a more in-depth look at triggers) and can be used to fire tags.

But, Google Tag Manager doesn’t automatically listen for some things, such as hover events.

Dorcas wrote a great post about this limitation a few years ago and we’re still in the same boat – we need a custom solution to track when users are hovering over elements on our site.

To make it even easier for you, the LunaMetrics team created the Hover Listener recipe, which you can simply import into your own GTM container. This recipe doesn’t include any tags or triggers, so you’ll need to do some additional configuration to start seeing hover data in Google Analytics.

Download the Hover Listener Recipe

How to Use the Hover Listener Recipe

1. Modify the {{Constant – Hover Listener CSS Selectors}} variable

In the variable, you can specify a list of any CSS selectors where you want to listen for users hovering.

You can find this variable, along with everything else included in our recipe, in the LunaMetrics Hover Tracking Plugin folder.

If you’re not familiar with CSS selectors, they are patterns that you can specify to match different elements. They can be used within GTM and provide a ton of flexibility! Skip down to some examples if you need a refresher, or check out a few of these other great resources:

CSS Selector Examples

Let’s say that I want to track when users are hovering over a certain element on one of my site’s pages. By inspecting the element using the Chrome Developer Tools panel (or Web Developer Tools in Firefox), I can see the different elements and their attributes that I can use to create my selector.

For example, on our GTM Recipes page, if I wanted to track hovers over the square images on the left side of each recipe, I could do that easily with a CSS selector.

A few basic selectors:
element > element (direct child)
element element (child)

Since the images that I want to target share a parent div element with a class of ‘resource-image,’ I can use a few basic selectors to create a CSS selector that matches all of them:

div.resource-image > img (matches any img element that is a direct child of a div element with a class of ‘resource-image’)

I’d then add that to my variable in GTM, like so:

If you want to add multiple selectors to target different types of elements throughout your site, you can! Simply separate them with a comma in your variable. For example, if I had other elements on my page that I also wanted to track hovers over, I could just add another selector to the same variable.

For example, this would match our image elements and also any a element with a class of ‘recipe-dropdown’:

div.resource-image > img, a.recipe-dropdown


2. Make sure GTM is pushing custom ‘hover’ events

Our listener tag references the variable containing our CSS selectors. If a hover occurs over an element that matches our selectors, a custom ‘hover’ event is pushed to the dataLayer. You should see these in Debug mode!


3. Create triggers using the custom hover event

Now that we have a custom hover event, we can use it to create triggers and fire our tags. First, you’ll need to create a new custom variable for this, to get the attributes.element value from the dataLayer:

Then, create a Custom Event trigger that specifies hover as the event and your CSS selector. For example, the following trigger will fire a tag when a custom hover event is pushed to the dataLayer AND when the element that was hovered over matches the specific selector.


You can create a unique trigger for each CSS selector that you added to your variable, allowing you to fire different tags depending on which elements are hovered over.

Why Do We Care About Tracking Hovering?

Hover tracking can provide insight into intent and help you discover where users tend to focus or get confused. From our example, we may be testing the idea that users mistake the square images as buttons, and frequently focus on them before clicking other links. This might lead us to make these images navigable, or change our calls-to-action on the page.

Some of you may already be thinking about ALL the hovering you want to track, for all the elements on your site. But, before you begin tracking hovers on different elements throughout your site, ask why you want to track this in the first place, and what questions this data can help answer. Just like with tracking other user engagement, there should be an objective and strategy behind collecting hover data, and a plan for visualizing it.

Have some exciting ideas for hover tracking on your own site? Share them below!

Kristen Perko is a Senior Consultant at LunaMetrics. Her background is in search marketing, with a focus on SEO, analytics, and social media. Kristen has a passion for integrating goals and strategy with analysis and loves helping clients find value in their data. In her free time, she enjoys hiking, cross-country skiing, painting and anything food-related.

  • Hey, great post! One case where I had to track hover activity was where the site presented different dashboards separated in sections and we had to find out how long users were hovering over each section.

  • Laura

    I just implemented this tracking on my site and it’s working great. I came across one issue though – the hover events stop tracking after a different event on the page occurs. For instance, if I hover on the image I am tracking, then click on another element that has event tracking, then hover again – the second hover does not track. Any thoughts on what might be happening?

    • Kristen Perko

      Hi Laura!

      It’s possible that other external scripts could conflict with our hover listener and prevent events from occurring. Is all of your hover and click event tracking configured within Google Tag Manager?

  • Hi, thank you for this great post. I have been trying to get this to work for an hour, and I can’t seem to get it to work. I have tried so many configurations, but the tag just refuses to fire.

    In step 2, you reference a listener tag being fired leading to the hover state. What does the configuration of that tag look like? What is the custom HTML you implemented? How does your trigger reference the Constant variable you created?

  • Colin Differ


    Thanks for the post.

    I have managed to get this working great. The only problem is that the CSS selector i am hovering over will only choose the top option and not the one i am hovering over.

    Any thoughts would be great

    • Kristen Perko

      Hi Colin,

      Are you able to provide an example or screenshots? Remember that you can add multiple CSS selectors (separated by commas in the variable) if needed.


  • Sanjar Sobirjonov

    Hello, great plugin! But how to send data (hovering time) to google analytics? I have no idea where it shows up. please help

  • darnoldussen

    Is there a way to create a tag/event for GA that will input in the label the CSS Selector that is being triggered on. Lets say we have 6 CSS Selectors to trigger the hover on. I understand I can create a hover and event/tag for each CSS Selector but seems it would easier to have one with variable label that will correspond with CSS Selector that was actually triggered.

  • RAJ

    HOw to track the click on the images

    Track the clicks and Show the Label value is ID value in the element (Ex: click on the above div.col-md-3 track the count and get the id value)

  • neelimadesh

    i will try this Thanks for the post

Contact Us.

Follow Us



We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203


4115 N. Ravenswood
Suite 101
Chicago, IL 60613


2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187