Custom Hover Events


#1

edit - updated screenshots

I am currently working on implementing some UX tracking events to help us better understand the way users engage with granify.com. I am trying to create an event that fires when the user hovers on an element with the class of “icon” (see the illustrated icons in the Our Values section in the URL below for examples). The Custom Javascript event I created uses the following code:

However, after having external users hover on the elements in question several times over the past few days, the event still shows as having 0 completions in Events. I’m wondering if I’ve written the code incorrectly, or if Hubspot does not support mouseenter or mouseover events. I’m a designer first and foremost so while I’ve checked the docs and to my understanding this matches the required format, I realize it could well be something egregious missing in my Javascript.

Example page:


#2

Hey @Chris_Murray

document.getElementsByClassName returns an array so you need to index into it before you can call .onmousenter. In this case because you want all of them, you might want to use a for loop. I haven’t tested this but you might want to try something like:

var icons = document.getElementByClassName("icon")

for(i=0;i<icons.length;i++){
   icon[i].onmouseenter = function(){
  // event call here
}
}

You could put a quick console.log() where the event call is to quickly test this in your browser console so you don’t have to wait for the Event to process.

Hopefully, that helps feel free reach back out if that doesn’t work or you have any questions.

-Zack


#3

@zwolfson This worked!

var icons = document.getElementsByClassName("icon")

for(i=0;i<icons.length;i++){
   icons[i].onmouseenter = function(){
   _hsq.push(["trackEvent", {
        id: "eventID",
        value: null
    }]);
}
}

Thanks so much for the help.