Google Tag Manager点击触发器针对含内部元素的ID元素点击捕获不全如何解决？

问题原因 #

你遇到的情况是GTM默认点击触发器仅匹配直接被点击的元素，点击<i class="material-icon">时，GTM识别到的点击元素是子级<i>，而非你设置的父级<li id="myUniqueID">，因此触发器未触发。

推荐解决方案（无需修改站点源码） #

直接调整GTM触发器的匹配规则即可：

• 打开你创建的针对myUniqueID的点击触发器编辑页
• 将原有匹配规则的判定对象从「点击元素」改为「点击元素 - 匹配CSS选择器」
• 匹配值填写 #myUniqueID, #myUniqueID *
  该选择器会同时命中ID为myUniqueID的元素本身，以及其内部所有层级的子元素，无论点击的是li的空白区域还是内部的图标，都会满足匹配条件
• 检查触发器的触发时机设置，选择*「所有点击」*，避免非链接类元素的点击被过滤
• 保存触发器后通过GTM预览模式测试，确认点击图标区域时触发器可正常触发即可

可选方案（需修改站点源码） #

如果可调整前端代码，也可以给子元素添加禁用点击响应的CSS属性，让点击事件直接透传到父元素：

#myUniqueID * {
  pointer-events: none;
}

注意：该方案会导致#myUniqueID内部所有子元素失去原生交互能力，如果子元素本身绑定了点击事件等交互逻辑，不推荐使用该方法。

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