Google Analytics 4

How can I track hover events for multiple elements in this code?

Posted by George on 3 January 2023 at 8:09 pm

Yo, need some help here. I nabbed this bit of code from a developer mate of mine to keep a tab on hover events over images in Google Tag Manager. Here it is:

<script>
// Tracking Top Links Hover Menus
  function trackHoverIntent(selector, time) {
    var timeoutId;
    var elements = window.document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('mouseenter', function(event) {
        var targetElement = event.target || event.srcElement;
        var classes = targetElement.className;
        var id = targetElement.id;
        var alt = targetElement.alt;
        if (!timeoutId) {
          timeoutId = window.setTimeout(function() {
            dataLayer.push({
              'event': 'gtm.hover',
              'gtm.element': targetElement,
              'gtm.elementClasses': classes,
              'gtm.elementId': id,
              'gtm.elementalt': alt,
              'gtm.elementHoverTime': time
            });
            timeoutId = null;
          }, time);
        }
      });
    }

    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('mouseleave', function() {
        if (timeoutId) {
          window.clearTimeout(timeoutId);
          timeoutId = null;
        }
      });
    }
  } 
trackHoverIntent('img.afg-celebrate' , 1500);

  </script>

But there are a couple speedbumps I’ve run into:

I got a bunch of images to track, man. But the code can only focus on tracking one at a time. Any ideas?
Also, some pictures are shy and don’t have a class or id, just alt text. Any chance we can track those somehow, maybe by their alt text?

I’ve trawled through blogs and stuff, but no luck so far. You got any leads?

Jackson replied 1 year, 4 months ago 3 Members · 2 Replies

2 Replies

Alexander

Member
23 January 2023 at 9:20 am

Yes, you have two concerns: tracking multiple images and tracking images based solely on their alt text. To accommodate multiple images, you can include all the selectors (class names or IDs) separated by commas when you call the function. As for tracking images by alt text, you’ll have to modify the code a bit. Currently, the code uses the element’s class or id to identify it. You can add an extra line of code to grab its alt text instead when no class or id is available, and then use that to track the hover event. So, it’s totally possible to adjust this code to meet your needs.
Jackson

Member
27 May 2023 at 7:42 pm

Sure, I can surely point you in the right direction. For your first problem, the code is actually capable of tracking more than one image at a time. The ‘selector’ parameter in the function can accept multiple selectors separated by commas. So, instead of just one class, you could send in multiple like ‘img.afg-celebrate, img.anotherClass, img.yetAnotherClass’.

Your second problem is a bit tricky but not impossible to solve either. The ‘alt’ text can indeed be used to select an element. Just like we used classes for selection, we can use attributes like ‘alt’. However, you’ll have to know the exact ‘alt’ text to select the correct element. The selector could look like this: ‘img[alt=”Your Alt Text”]’. Make sure to replace ‘Your Alt Text’ with the actual alt text of the image you’re trying to track. Happy coding!

How can I track hover events for multiple elements in this code?

Alexander

Jackson