如何修改GTM图片悬停追踪代码以支持多元素及Alt文本追踪？

问题1：追踪多个类的图片悬停 #

有两种简单的处理方式：

方式1：使用CSS多选择器直接调用 #

直接在调用trackHoverIntent时传入包含多个类的CSS选择器，用逗号分隔不同的类选择器即可：

<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, img.afg-promote, img.afg-banner' , 1500);
</script>

方式2：修改函数支持选择器数组 #

如果需要更灵活的批量处理，可以修改函数，让它接受选择器数组自动遍历处理：

<script>
// Tracking Top Links Hover Menus
function trackHoverIntent(selectors, time) {
  // 兼容单个选择器的传入情况
  if (typeof selectors === 'string') {
    selectors = [selectors];
  }
  
  selectors.forEach(function(selector) {
    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', 'img.afg-promote'], 1500);
</script>

问题2：通过Alt文本追踪图片 #

可以使用CSS属性选择器定位带有特定Alt文本的图片，常见写法有：

• img[alt="精确匹配的文本"]：完全匹配Alt文本
• img[alt*="包含的文本"]：匹配包含指定文本的Alt内容
• img[alt^="开头文本"]：匹配以指定文本开头的Alt内容

下面是适配Alt文本追踪的完整代码，支持同时按类和Alt文本追踪：

<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;
      }
    });
  }
} 

// 追踪单个精确Alt文本的图片
trackHoverIntent('img[alt="周年庆活动海报"]', 1500);
// 追踪包含指定文本的Alt图片
trackHoverIntent('img[alt*="促销"]', 1500);
// 同时追踪类和Alt文本的图片（逗号分隔多个选择器）
trackHoverIntent('img.afg-celebrate, img[alt="新品展示"]', 1500);
</script>

注：原代码中gtm.elementalt字段名拼写有误，已修正为gtm.elementAlt，方便后续在GTM中规范调用字段。

内容的提问来源于stack exchange，提问作者Chy_mahadi