如何通过事件监听器获取关联元素的Store Name并传入GTM数据层？

方案可行性 #

你说的这个方案完全可行——通过检测点击元素的directions类，向上查找最近的<li>父元素，再定位到第一个<strong>标签的思路，完美适配你无法修改HTML结构的场景。

实现代码示例 #

直接用这段代码就能实现需求，包含点击追踪和GTM数据层推送：

// 用事件委托监听所有"Get Directions"点击
document.addEventListener('click', function(e) {
  // 判断点击的是不是带directions类的链接
  if (e.target.classList.contains('directions')) {
    e.preventDefault(); // 可选：不想让链接默认跳转就保留，想保留跳转就删掉
    
    // 找到当前链接所属的<li>元素
    const parentLi = e.target.closest('li');
    if (parentLi) {
      // 提取第一个<strong>标签里的商店名称
      const storeName = parentLi.querySelector('strong').textContent.trim();
      
      // 把数据推送到GTM数据层
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        event: 'getDirectionsClicked',
        storeName: storeName
      });

      // 要是想保留原跳转功能，把下面这行注释打开
      // window.location.href = e.target.href;
    }
  }
});

关键细节说明 #

• 事件委托：绑定到document上，哪怕WP插件动态加载新的门店列表，也能监听到点击，不用重复绑定事件
• 类检测：用classList.contains是判断元素类名的标准写法，能避免你之前遇到的if语法错误
• DOM定位：closest('li')能快速找到离点击元素最近的父级列表项，querySelector('strong')直接取第一个匹配的<strong>标签，不用复杂的层级遍历
• GTM数据层：按标准格式推送，event字段用来在GTM里设置触发器，storeName就是你要捕获的商店名称

额外提示 #

如果门店列表是AJAX加载的（比如翻页加载新门店），这段代码依然有效，不用做额外修改；要是需要保留原链接的跳转功能，记得打开代码里的跳转注释，同时根据需求决定要不要保留e.preventDefault()。

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