Upcoming LunaMetrics Events
San Francisco, Apr 28-30 Los Angeles, May 12-16 New York City, May 19-23 Chicago, Jun 16-18

How to Track Hover Events with Google Tag Manager

hover craft joy ride with dolphins

When visitors hover on your website, are they more likely to convert? Pick a hover target and add event tracking to find out.

If you want to listen for clicks or form submissions, Google Tag Manager has some seriously awesome automatic event tracking. It doesn’t cover hover events yet, though. So if you want to track a visitor hovering over a menu or pop-up window or other such thing-a-ma-jig, read on for a nifty bit of jQuery that will do the trick.

Step 1. Include the jQuery library.

If your page doesn’t have jQuery, or the jQuery library is only included in the page source after your Tag Manager container code, then the code I’m going to give you won’t work.

First things first: make sure your page source includes the jQuery library before Tag Manager.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body> 

<!-- Google Tag Manager -->

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

<!-- End Google Tag Manager -->

 

Typically, jQuery and other scripts are included in the head element, while Tag Manager appears in the body element. Your page source won’t look exactly like the above. It’s the order that counts. The jQuery library has to come first.

Step 2. Identify the hover element.

Tag Manager needs some information like a unique element name, class, or id (or unique combination of attributes) so it doesn’t try to track everywhere the visitor hovers on the page. Right-click on the page where you want to track the hover event, and choose inspect element.

hover-target

In this example, I’m going to track when a visitor hovers over some text that says “Cart (1 Item)”. That action produces a pop-up window showing the contents of the shopping cart.

I inspect the element by right-clicking on it, and see the text is contained in a div element with the class “wl-cart-summary”.

page source showing hover target element

Because the class “wl-cart-summary” is unique to this element, I can use it to write a jQuery selector. The selector will focus the hover tracking on the cart summary pop-up.

Step 3. Create a Custom HTML tag and enter jQuery.

Open Tag Manager and create a new tag of the Custom HTML tag type. Enter the script shown below, and customize the jQuery selector $(“div.wl-cart-summary”) to match your hover target.

<script type="text/javascript">

$(document).ready(function() {

// Hover over Cart Summary
    var startHover = $.now();

    $("div.wl-cart-summary").hover(
    function(){
        startHover = $.now();
    },
    function(){
        var endHover = $.now();
        var msHovered = endHover - startHover;
        var seconds = msHovered/1000;
        if (seconds >= 1) {
            dataLayer.push({'event': 'cart-hover', 'eventAction': {{cartText}}, 'eventLabel': {{url path}}, 'eventValue': seconds});
        }
    }
    );

});
</script>

 

This code targets the div element with the class “wl-cart-summary” and listens for when a visitor starts hovering and also for when she stops hovering. It doesn’t send an event to the data layer until the visitor stops hovering.

The code also calculates the amount of time a visitor hovered, so you can decide whether or not she hovered long enough to make it worth tracking an event. Here I push the event to the data layer if the visitor hovers for at least 1 second.

I send all of this info to the data layer because I’ll need it in the next step, when I write my GA event tag:

event: cart-hover
eventAction: {{cartText}} = a custom JavaScript macro (how many items in cart?)
eventLabel: {{url path}} = a default macro (what page was the visitor on?)
eventValue: seconds = a variable from my code (how long did she hover?)

And then I fire this tag on every page since it’s part of the top navigation. You could use a more selective rule if you don’t need to fire it everywhere.

Bonus tip: The eventAction doesn’t have to be a macro; it could just be a word or phrase. But I wanted to get fancy, since the text of this element can change. So I created a Custom JavaScript macro in Tag Manager called {{cartText}} to reflect the number of items in the cart when the visitor hovered.

function() {
   var cartText = $(".wl-cart-summary a.cart-summary-trigger").text();
   return cartText;
}

 

The above macro cartText looks for an anchor with the class “cart-summary-trigger” inside an element with the class “wl-cart-summary” and returns the text of that anchor. (See the screen shot earlier from when I right-clicked to inspect the element.)

Step 4. Create a GA Event tag.

Finally, write a tag that will send an event to Google Analytics every time your cart-hover event gets pushed to the data layer.

Create a new tag in Tag Manager: tag type = Google Analytics and track type = Event.

Enter the information you pushed to the data layer in the Event Tracking Parameters, as shown below.

event-tracking-parameters

Then fire this tag with a new rule that says {{event}} equals cart-hover, or whatever event you pushed to the data layer.

If you haven’t already created the macros for eventAction, eventLabel, and eventValue, you’ll need to do that, too. Simply choose macro type Data Layer Variable and enter the same variable name that you pushed to the data layer, e.g. eventAction, etc. You’ll be able to re-use those macros with other events you might decide to track later.

Step 5. Update, Preview, Debug. Create New Version and Publish!

Test your tag to make sure it’s firing at the right times and capturing the right info. Then create a new version of your Tag Manager container and publish, and start collecting all that beautiful data!

How are you harnessing the power of Google Tag Manager? What events have you been able to track that aren’t covered yet by auto event tracking? Please share in the comments.

Dorcas Alexander

About Dorcas Alexander

Dorcas Alexander is a Digital Analyst working with Google Analytics. Her path to LunaMetrics included stints in ad agency creative, math, computer science, language technology research, and corporate training. She loves to learn and teach what she’s learned. One of the top-rated tournament Scrabble players in Pennsylvania, Dorcas has an insatiable drive to compete and win. “Impossible” is not in her vocabulary.

http://www.lunametrics.com/blog/2013/12/12/track-hover-events-google-tag-manager/

7 Responses to “How to Track Hover Events with Google Tag Manager”

RYan says:

Hi Dorcas,

Thanks for the post. This is great.

My event is firing, but the seconds is not working.

Within Analytics I am seeing the eventAction as gtm.js.
Any ideas?

RYan says:

dont worry! my code mix up

Dorcas Alexander Dorcas Alexander says:

Glad the code is working for you. Thanks for reading!

Felix says:

Hey! First of all: great post! realy!

But how can I adapt your code so I can track when visitor clicked on a “Add to chart” Javascript button?

That would be great help for me ^^

Greetings from Germany

Dorcas Alexander Dorcas Alexander says:

Hi Felix, I actually track that, too! When a visitor clicks the “Check Out” button on my hovered page element, I fire an event tag. The rule that fires the tag has 3 conditions based on the following: (1) a tag with the built-in click listener, (2) a macro that reads the target of the link, and (3) a macro that reads the button text. The specific rule conditions are: (1) “event equals gtm.click”, (2) “Auto Event URL matches RegEx /cart$” (i.e. the button target is the URL of my cart page), and (3) “button text contains Check Out”. I send a different event category (cart-hover-checkout) but the same action (cart text) and label (url path) as for my cart-hover event. Hope that helps!

Tuan Hoang says:

Hi Dorcas ,

(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({ ‘gtm.start’:
new Date().getTime(), event: ‘gtm.js’
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != ‘dataLayer’ ? ‘&l=’ + l : ”; j.async = true; j.src =
‘//www.googletagmanager.com/gtm.js?id=’ + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, ‘script’, ‘dataLayer’, ‘GTM-XXXXXXX’);.
I’ve already had the GTM like above
By following your article, i just need to call the script below to track the event.
dataLayer.push({‘event’: ‘cart-hover’, ‘eventAction’: {{cartText}}, ‘eventLabel’: {{url path}}, ‘eventValue’: seconds});
But i don’t understand in step 4. You said:Create a new tag in Tag Manager: tag type = Google Analytics and track type = Event.And enter the information you pushed to the data layer in the Event Tracking Parameters.
How to create new tag in Tag Manager to track event. Please use your earlier example to continue the reply . Thanks a lot. I’m waiting for your response soonest.

Dorcas Alexander Dorcas Alexander says:

Hi Tuan, Sorry for the late reply. Make sure you are creating two new tags in Tag Manager: (1) the custom HTML tag with the entire script shown in Step 3 above, and (2) the Google Analytics Event tag. All the info you need to create the Event tag is in Step 4 above. Please let me know specifically which part you are unable to find, after you log in to your Google Tag Manager account, and I will see if I can help you some more.

Leave a Reply