谷歌标签管理器中的点击事件无法冒泡到父级

Question

我正在为客户的网站设置Google Tag Manager，但我在触发点击事件标签时遇到了麻烦。

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

按钮本身有一些子元素，包括一个svg图标。当点击svg时，数据层中会注册点击事件，但标签不会触发。只有选择按钮本身时，标签才会触发。

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

我的理解是，GTM会监听冒泡到文档的点击事件。如果是这样，当单击子元素时，我的标签应该会触发，对吧？还是我有什么误解？

另外，我应该在我的脚本中将事件推送到数据层中，而不是使用点击触发器吗？

截图

10 gtm.click 正确触发了标签

9 gtm.click 是未触发的子svg

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

- alaskey

---

你的目标标签类型是什么？它是锚点，还是div或按钮或其他什么？你如何配置你的点击触发器？它是在所有点击上触发还是只在链接上触发？ - nyuen

目标元素是一个 div。点击触发器设置为所有点击事件，使用“Click Element”过滤器匹配 CSS 选择器。 - alaskey

我认为我在他们的文档中找到了答案。我需要将目标更改为锚点，然后将触发器更改为“仅链接”。 “所有元素”将冒泡子信息，而“仅链接”将给我父级锚点信息。 - alaskey

是的，没错。如果您使用“所有链接”启用程序来处理非锚元素，您还可以使用自定义JS变量执行其他操作。 - nyuen

为了参考，这里有一个网页存档链接，可以找到@alaskey之前提到的文档。 - Gabrien

Answer 1

我经常遇到这种问题。对于一些像字形图标等的<i>标签，也会出现这种情况。只需在SVG元素上添加CSS pointer-events:none;（除非您需要使该SVG可点击而不仅限于parentElement）。 SVG上的pointer-events:none将意味着单击它时，单击事件将在父元素上注册。

最好的方法是让客户端开发人员添加JS。较为麻烦的方法是通过GTM在自定义HTML标记中运行以下代码：

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

- Killerpixler

---

非常好。这就是使GTM将其gtm.click事件冒泡到我<a><img>场景的直接父级{{link1:，类似于包装svg等的原因。 - adi518

我有一个 <button><i>内容</i></button>。Chrome认为我点击了 <i>，但是Firefox认为我点击了 <button>。在 <i> 标签上使用 pointer-events:none; 解决了这个问题，现在所有浏览器都认为我点击了 <button>。 - MiF

Answer 2

如前所述，“仅链接”触发器将冒泡到父级<a>，因此使用它而不是“所有元素”应该解决您在子<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的文章以获取更多信息。

- Harm

Answer 3

优秀的解决方案/想法是使用：

。

pointer-events:none

当您有一个复杂的 div（内部包含 20 类和 15 个元素），并将其包装在链接 <a> 标签中时，会发生什么情况（例如用于博客文章卡片）。

目前，GTM 缺乏解决此问题的正常方案:(对于复杂结构，您应该添加“额外的 div”来处理 pointer-events（效果很好，但“不够优雅”）。

<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>

- Ezra Siton

---

我相信如果GTM设置为跟踪该触发器的“仅链接”，它将冒泡到<a>。 - slothluvchunk

很遗憾，它并没有。我刚试了一下，链接点击并没有触发 :-| - Oliver

很有趣——我在许多触发器上使用这个解决方案，关闭指针事件可以让我追踪基于哪个<a>来触发，而不是实际点击的元素。你的触发器是通过CSS选择器过滤的吗？ 例如，音频播放器中，我要跟踪单击播放/暂停图标，但想根据实际<a>的CSS选择器触发，而不是实际被点击的svg，后者的点击区域非常小/不一致。 - slothluvchunk