Tag Manager自定义JS变量需匹配所有元素而非首个，寻求修复方案

原脚本使用document.querySelector只会返回匹配的第一个元素，导致同类型的后续元素点击无法被正确识别。以下是修正后的代码，通过遍历所有匹配元素实现全量检测：

function(){
  var elem = {{Click Element}};
  
  // 检测头部导航区域点击
  var headerNavs = document.querySelectorAll("ul.nav.meta-nav.justify-content-end");
  for(var i = 0; i < headerNavs.length; i++){
    if(headerNavs[i].contains(elem)){
      return "nav_header";
    }
  }
  
  // 检测商品列表项点击
  var productItems = document.querySelectorAll("div.product-item");
  for(var j = 0; j < productItems.length; j++){
    if(productItems[j].contains(elem)){
      return "itemlist";
    }
  }
  
  // 检测CTA按钮点击
  var ctaButtons = document.querySelectorAll("a.btn");
  for(var k = 0; k < ctaButtons.length; k++){
    if(ctaButtons[k].contains(elem)){
      return "cta_button";
    }
  }
  
  // 检测页脚区域点击（修正原无效选择器）
  var footers = document.querySelectorAll("footer.footer");
  for(var l = 0; l < footers.length; l++){
    if(footers[l].contains(elem)){
      return "footer";
    }
  }
  
  return "other";
}

关键修正说明 #

• 替换document.querySelector为document.querySelectorAll，获取所有匹配元素的集合
• 通过for循环遍历每个元素集合，逐个检查是否包含点击目标{{Click Element}}
• 修正页脚选择器：原代码footer.footer*是无效CSS选择器，改为合法的footer.footer

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