JS 单击事件处理程序和 GTM

Question

我正试图让一些东西在 GTM 中工作，但我可能误解了内部工作原理。这是我尝试做的。

我在相关页面上加载了一个标签：

<script>

  document.querySelector('#btnNext').addEventListener('click', {{EPT - Handler}}, false);
  document.querySelector('#btnPrev').addEventListener('click', {{EPT - Handler}}, false);
  
</script>

并且我已将 {{EPT - Handler}} 定义为自定义 javascript 类型的变量，如下所示：

function() {
    return function (event) {
        console.log('EVH ', event);
    }
}

这是我第一次点击其中一个按钮时的效果。如果我在单击之前查看附加事件，我会看到附加了三个事件，其中包括上述处理程序。然后我点击， console.log() 被执行，一切似乎都很好。但是，当我现在查看处理程序时，只有 2 个，上面的那个不见了。当然现在当我点击时，上面的处理程序不再被调用。

我在这里错过了什么？

大局观 目前，我有许多标签可以根据在 SPA 中单击的内容向 GA 发送事件。每个标签都有自己的触发器。

我想我只是用一个事件处理程序连接所有按钮，然后让该事件处理程序将应该进入 GA 的内容放入 dataLayer，最终作为我放入的 customEvent 的结果将其发送数据层。我的标签和触发器数量要少得多（1 个标签，1 个触发器），所以我的设置比目前更简单。

现在，在解释了所有这些之后，我很确定我根本不需要这个自定义 JS 事件侦听器:)

我仍然对谁删除了我的事件侦听器感兴趣...

提前致谢

Answer 1

由于我看不到您的实际页面，因此我做出了有根据的猜测。可能您的 next/previous 按钮通过某种 Ajax 调用来更新页面的一部分。如果它们本身被更新的内容替换，则事件处理程序将丢失。

Google 跟踪代码管理器中的点击处理程序通过不直接将事件附加到元素来解决此类问题。相反，处理程序直接附加到文档。如果单击 link，事件会冒泡到文档中。附加到文档的处理程序检查原始事件目标，如果它满足配置的条件，它们将触发相应的触发器。这种方法也适用于动态 inserted/replaced 元素。

有点猜测，因为我没有看到你的页面，但至少你可以检查一个理论。

JS 单击事件处理程序和 GTM

JS click event handlers and GTM

javascript

google-tag-manager