谷歌标签管理器点击事件未向家长弹出

Question

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

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

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

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

我的理解是，GTM侦听文档中出现的点击事件。如果是这种情况，我的标签应该在点击孩子时触发，对吗？还是我误解了什么？

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

截图

10gtm。单击正确触发标记

9gtm。click是否为未添加的子svg

最后一个屏幕截图是我的触发器的触发规则。

Answer 1

如前所述，“只是链接”触发器将冒泡到父

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的文章了解更多信息。

Answer 2

使用的解决方案/想法：

pointer-events:none

但是当你有一个复杂的div（里面有20个类和15个元素）并且你用一个链接

目前GTM对这个问题缺乏正常的解决方案：（对于复杂的结构，你应该为指针事件添加“额外的div”（工作很好，但“不优雅”）。

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

Answer 3

我经常遇到这种问题。它发生与

最好的方法是让客户端开发人员添加JS。更黑客的方法是通过GTM在自定义HTML标记中运行类似的东西

jQuery（'a.link跟踪svg'）. css（'指针事件'，'无）