WordPress网站Elementor按钮GTM点击触发问题求助

我有一个部署了Google Tag Manager（GTM）的WordPress站点，通过WordPress插件注入追踪脚本，GTM预览模式下其他事件和配置都正常。用Elementor免费版做了个按钮，HTML结构如下：

<div data-id="e2d2099" data-element_type="widget" class="elementor-element elementor-element-edit-mode elementor-element-e2d2099 elementor-element--toggle-edit-tools elementor-widget elementor-widget-button elementor-align-left btn-animation-full-to-border btn-attention-scale-x ui-resizable elementor-element-editable" data-model-cid="c45" id="" data-widget_type="button.default" draggable="true">  
  <div class="elementor-element-overlay">    
    <ul class="elementor-editor-element-settings elementor-editor-widget-settings">      
      <li class="elementor-editor-element-setting elementor-editor-element-edit" title="Modifier Bouton">        
        <i class="eicon-edit" aria-hidden="true"></i>        
        <span class="elementor-screen-only">Modifier Bouton</span>      
      </li>    
    </ul>  
  </div>  
  <div class="elementor-widget-container">    
    <div class="elementor-button-wrapper">      
      <a href="#nos-offres" class="elementor-button-link elementor-button elementor-size-xs" role="button" id="ga-works-with-us">        
        <span class="elementor-button-content-wrapper">          
          <span class="elementor-button-text">Travailler avec nous</span>        
        </span>      
      </a>    
    </div>  
  </div>  
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>

我给按钮的<a>标签加了ID「ga-works-with-us」，但GTM调试时发现，点击按钮触发的元素是「elementor-button-text」这类子元素或父元素，导致基于ID的触发规则完全不生效。我是JS开发者，能写代码，但更想用GTM的规范配置解决，请问怎么设置才能让这个按钮每次被点击都触发指定GTM事件？

解决方案1：用「点击-所有元素」触发器+CSS选择器覆盖所有子元素 #

这是最直接的规范配置方式：

• 在GTM新建触发器，类型选「点击 - 所有元素」
• 触发条件设为「一些点击」，添加规则：点击元素 → 匹配CSS选择器 → #ga-works-with-us, #ga-works-with-us *
  • 这个选择器会匹配目标ID元素本身及其所有子元素，不管用户点按钮的哪个区域（文字、边框、内部容器）都会触发
• 把这个触发器绑定到你需要触发的标签即可

解决方案2：利用GTM的DOM向上遍历匹配 #

GTM的内置变量支持自动向上查找父元素，完美适配嵌套结构：

• 新建「点击-所有元素」触发器，触发条件选「一些点击」
• 添加规则：点击元素 → 向上查找 → 匹配ID → ga-works-with-us
  • 这个规则会从用户实际点击的元素开始，自动往上遍历DOM树，直到找到带目标ID的元素，完全不用管按钮的嵌套层级

解决方案3：调整Elementor按钮的点击区域（可选优化） #

如果想让点击事件只绑定在<a>标签上，可检查Elementor设置：

• 编辑按钮组件，到「高级」选项卡，确认链接是直接绑定到<a>标签（默认是，但部分自定义样式可能修改）
• 检查有没有自定义CSS改变了按钮的pointer-events属性，避免子元素抢占点击事件

备选代码方案（仅当GTM配置无法满足时） #

如果以上方法都不行，再用代码方案（优先推荐GTM内置配置）：

document.addEventListener('click', function(e) {
  const targetBtn = e.target.closest('#ga-works-with-us');
  if (targetBtn) {
    window.dataLayer.push({
      'event': 'custom_button_click',
      'button_id': 'ga-works-with-us',
      'button_text': targetBtn.querySelector('.elementor-button-text').textContent.trim()
    });
  }
});

把这段代码放到GTM的「自定义HTML」标签里，触发条件设为「DOM就绪」，然后新建对应「custom_button_click」事件的触发器和标签即可。

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