Google Tag Manager中button[name=checkout]点击触发器无法命中内部span如何解决

GTM默认的Click Element变量取值为实际被点击的最底层DOM元素，你点击按钮内部的<span>标签时，Click Element匹配到的是span而非外层的<button name="checkout">，因此无法命中原有触发条件。

方案1：直接修改触发条件的CSS选择器 #

这是成本最低的方案，直接把原有触发条件的匹配规则改为：

Click Element 匹配CSS选择器 button[name=checkout], button[name=checkout] *
其中*是CSS通配符，代表匹配button下所有后代元素，不管点击按钮本身还是内部任意层级的子元素，都能命中触发规则。

方案2：启用GTM触发器的父元素匹配能力 #

如果担心后续按钮内部嵌套层级变更导致方案1失效，可以用GTM原生的父元素查找逻辑：

• 打开你配置的All Elements点击触发器，展开「高级设置」
• 找到「匹配选择器的触发元素」选项，填入button[name=checkout]
• 保存触发器即可
  此时GTM会自动从实际点击的元素向上冒泡查找，只要最近的父元素匹配该选择器，就会触发规则。

方案3：自定义JS变量实现判断 #

如果有更复杂的自定义判断需求，可以新建一个自定义JavaScript变量，变量代码如下：

function() {
  let target = {{Click Element}};
  // 向上遍历所有父元素，判断是否存在符合要求的按钮
  while(target) {
    if(target.matches('button[name=checkout]')) return true;
    target = target.parentElement;
  }
  return false;
}

之后把触发器的触发条件修改为「该自定义变量 等于 true」即可。

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