谷歌标签管理器点击事件没有冒泡到家长

Google Tag Manager click event not bubbling up to parent

本文关键字：管理器 标签 事件 谷歌      更新时间：2024-06-08

我正在一个客户的网站上设置谷歌标签管理器，我在启动点击事件标签时遇到了问题。

我已经将触发器设置为在按钮的CSS选择器上启动。

按钮本身有一些子元素，包括svg图标。单击svg时，单击会在数据层中注册，但不会触发标记。只有当我选择按钮本身时，标记才会触发。

我还尝试在我自己的脚本中删除附加到这些按钮的事件侦听器，以防return false;或e.stopPropagation()阻止它，但这并没有改变任何事情。

我知道GTM会监听弹出到文档中的点击事件。如果是这种情况，我的标签应该在点击孩子时触发，对吧？还是我误解了什么？

或者，我应该在脚本中将事件推送到dataLayer，而不是使用点击触发器吗？

屏幕截图

10 gtm.click正确发射了标签

9 gtm.click是没有的子svg

最后一张截图是我的触发器的触发规则。

我经常遇到这种类型的问题。类似于字形图标的<i>标签也会发生这种情况。只需将CSS pointer-events:none;添加到该SVG中（除非您要求SVG是可点击的，而不仅仅是parentElement）。SVG上的pointer-events:none意味着单击时，单击事件会在父元素上注册。

最好的方法是让客户端开发人员添加JS。更巧妙的方法是通过GTM 在自定义HTML标签中运行这样的东西

jQuery('a.link-youre-tracking svg').css('pointer-events','none)

要使用的Grate解决方案/想法：

pointer-events:none

但是，当您有复杂的div（里面有20个类和15个元素），并用链接<a>标记（例如博客明信片）包装这个div时，会发生什么呢。

对于这个问题，GTM目前缺乏一个正常的解决方案：（对于复杂的结构，您应该为pointer-events添加"extradiv"（工作良好，但"不优雅"）。

<a class="track-this-click-by-gtm" href="url">
  <div style="pointer-events:none">
    extra unwanted div
    <i></i>
    <p>hello</p>
    <ul><li>hello2</li></ul>
    <date>2019</date>
    lorem
  </div>
</a>

如前所述，"Just Links"触发器将冒泡到父<a>，因此使用它而不是"All Elements"应该可以解决您在<a>的子级上注册点击时遇到的任何问题。但是，例如，如果您试图在父<button>上注册点击，该怎么办？然后，您可以使用一个名为"查找最近的"的自定义JavaScript变量，并使用以下函数：

function () {
  return function (target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

然后在另一个自定义JavaScript变量中使用该函数，如下所示：

var elementFound = {{Find closest}}({{Click Element}}, 'button');

阅读Simo Ahava的文章了解更多信息。

相关文章：