AdWords
2.2K members online now
2.2K members online now
Dive into advanced features like Remarketing, Flexible Bid Strategies, AdWords Editor, and AdWords Scripts
Guide Me
star_border
Reply

Google Tag Manager - how to create a trigger, when a user hover an element/icon?

Visitor ✭ ✭ ✭
# 1
Visitor ✭ ✭ ✭

We have implemented a lot of GTM triggers to measure the users interactions on a website.

Now the last interactionable element that our GTM set up do not measure (fire a tag for) is, when the users hover over text/icon elements, to which there is attached a text box. The text box shows up, when the user on a desktop moves the mouse over the element/icon, or when the user touch the element/icon on a smartphone/tablet. In other words i want to measure how often the users see the "hover-generated" text-boxes, when they are on the relevant subsites on the website.

 

We have tried a lot of suggestions found on the internet. The closest to success was this link:

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

 

But this tutorial does not explain how to create the "Custom Tag" trigger. Nor does it explain how to use the variable "custom javascript."

Can You help me with a link to a site that solves my initial wish:

How to set up GTM to measure (fire a tag for) the users' "hover interaction" on a website done from a desktop and from a smartphone/tablet?

 

Thank You

Mogens Yde-Andersen

1 Expert replyverified_user

Google Tag Manager - how to create a trigger, when a user hover an element/icon?

Top Contributor
# 2
Top Contributor

Hi,

 

There is a more recent and detailed article about hover tracking with GTM at LunaMetrics, please check:

http://www.lunametrics.com/blog/2016/09/14/hover-tracking-with-gtm/

 

Let me know if it works.


Arnold Majlath, Google Analytics Top Contributor
Was my response helpful? If yes, please accept it as solution.
Circle Me On Google+ | Visit me @ Redfly Digital

Google Tag Manager - how to create a trigger, when a user hover an element/icon?

Visitor ✭ ✭ ✭
# 3
Visitor ✭ ✭ ✭

Hi Arnold M

Thank You for the recommended link.

We tried it, and we think that we came closer to the goal, but we are still not there yet.

But first we imported the correct library into GTM, so we could work with the tutorial above.

http://www.lunametrics.com/labs/recipes/hover-listener/

 

Everything works almost fine, except when it triggers the hover elements, something is missing.

The missing part is the “value” for the element, in our case the text between the <a> tags.

 

So for that, we tried to make a new Variable in GTM with Custom Javascript.

Called hoverText, and our code looks like this:

 

function() {

var hoverText = $("a.gtm_hover").text();

return hoverText;

}

  

And we added 2 new lines in Lunametrics custom HTML tag:

 

eventAction: {{Page Path}},

eventLabel: {{hoverText}},

eventAction is working fine, but the eventLabel that we get the hoverText variable is undefined.

And to be sure that the link between the variable and the tag works, we’ve tried to change our variable to return a hardcoded text string, and that works.

So we guess that our eventLabel element is not grabbing the text from the hoverText variable?

 

Can You help?

 

Thank You

Mogens Yde-Andersen