Question

我在客户的网站上设置Google跟踪代码管理器，但我无法触发点击事件代码。

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

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

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

我理解GTM会监听冒泡到文档的点击事件。如果是这种情况，我的标签应该在点击一个孩子时触发，对吧？或者我误解了什么？

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

screenshots

10 gtm.click正确触发了标记

9 gtm.click是没有

的孩子svg

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

Answer 1

我经常遇到这类问题。对于像glyphicons这样的东西，<i>标签也会发生这种情况。只需将CSS pointer-events:none;添加到该SVG（除非您要求SVG可以单击，而不仅仅是parentElement）。 SVG上的pointer-events:none意味着当单击它时，click事件会在父元素上注册。

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

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

Answer 2

炉排解决方案/想法：

pointer-events:none

但是，如果您有复杂的div（其中包含20个类和15个元素），并且使用链接<a>标签将该div包裹（例如，用于博客明信片），会发生什么情况。

就目前而言，GTM缺乏针对此问题的常规解决方案：（对于复杂的结构，您应该为pointer-events添加“额外的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

如前所述，“Just Links”触发器会冒泡到父 <a>，因此使用它而不是“All Elements”应该可以解决您在 <a> 的子项上注册点击时遇到的任何问题.但是，例如，如果您尝试注册父级 <button> 上的点击，该怎么办？然后你可以在这个函数中使用一个名为“Find Nearest”的自定义 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’s article on this了解更多信息。

Google跟踪代码管理器点击事件未冒泡到父级

3 个答案: