GTM点击元素时匹配CSS选择器的触发器未触发

• 先查是不是点到了目标元素的子节点：GTM内置的Click Element变量拿的是鼠标实际点到的最底层DOM，不是你选的外层目标元素。比如你要匹配的是class为submit-btn的按钮，但点的时候刚好落在按钮里包的文字span、小图标i标签上，直接拿选择器匹配Click Element肯定对不上。
  解决办法：把选择器改成你的目标选择器, 你的目标选择器 *，比如目标是.submit-btn就写.submit-btn, .submit-btn *，把目标元素内部所有子节点都覆盖到；如果是用的新版GTM，判断逻辑直接选「匹配CSS选择器（向上遍历DOM树）」就行，不用手动改选择器。
• 再查点击事件有没有被拦截冒泡：如果页面上其他JS脚本给目标元素或者它的父级加了event.stopPropagation()，点击事件根本传不到document层，GTM挂在全局的点击监听器收不到事件，触发器自然不可能触发。
  排查方式：打开浏览器F12，给目标元素打个点击事件断点，点一下元素看调用栈里有没有stopPropagation的调用，如果确实有冒泡拦截，要么改对应JS去掉拦截，要么别用GTM自带的点击触发器，换成自定义事件埋点就行。
• 检查你写的CSS选择器是不是本身就有问题：别直接用浏览器元素面板右键复制的选择器，那种选择器一堆:nth-child层级，页面DOM稍微变一点就匹配不上；另外注意很多前端框架会给元素加随机动态类名，这类随时变的类名不能当选择器用。优先用固定的元素ID、专门做埋点用的自定义属性（比如data-track="buy-cta"）写选择器，基本不会出问题。
• 排查触发器有没有多余的过滤规则冲突：看看你是不是给触发器加了额外的Page URL、点击文本之类的过滤条件，比如限定了只有在/pay路径下才触发，但实际测试的页面带了查询参数、或者路径大小写没对上，也会匹配失败。可以先把所有额外过滤条件都删掉，只留CSS选择器匹配的规则，测到能正常触发之后，再一个个把过滤条件加回来，很快就能找到冲突的规则。
• 用GTM预览模式精确定位问题：打开GTM的预览调试，进测试页点一下目标元素，在左侧事件列表里找到对应的Click事件，点进去看Variables面板里Click Element实际返回的是哪个节点，把这个节点拿到控制台，执行你选的目标元素.contains(实际返回的点击节点)，返回true还是false一眼就能知道是不是选择器或者子节点匹配的问题。

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