Eventlistener 触发了太多的 GA4 事件答案

【问题标题】：Eventlistener fires too many GA4 eventsEventlistener 触发了太多的 GA4 事件
【发布时间】：2023-01-14 17:37:58
【问题描述】：

我曾经有一个看起来像这样的事件监听器：

<script>document.querySelectorAll('.myclass').forEach(item => {
  item.addEventListener('click', event => {

gtag('event', 'phoneclick', {
  'event_category' : 'contact',
  'event_label' : 'phone'
});
});
})</script>

它以某种方式触发了事件两次。首先我认为这是因为该类被使用了不止一次。但实际上该类仅用于页面上的一个元素。

我是这个话题的新手，所以初学者指南对我有很大帮助！非常感谢你。

【问题讨论】：

标签： javascript google-analytics event-listener

【解决方案1】：

使用 gtag 发送事件不是最佳做法。我会建议摆脱你的整个事件监听器，不管里面有什么，并使用 GTM 来正确跟踪事件。
您如何检查事件是否触发了两次？显示网络选项卡屏幕截图。以及数据层屏幕截图。
进行一些适当的调试：向回调中添加一个 console.log，看看它是否也触发了两次。
使用 preventDefault 和 stopPropagation。也尝试寻找现有的答案：Javascript click event firing twice, even with stopPropagation

【讨论】：

我们在 SO 上使用英语。
我很抱歉。非常感谢您的回答！在回调的帮助下——我们意识到，代码本身并不是假的，因为它仍然只发送了一次。我们认为错误在于谷歌方面。
遗憾的是我们不能使用 GTM 。
检查网络选项卡，确保对谷歌的两次点击都具有相同的状态代码，而不仅仅是重定向。还要在隐身模式下测试它，以确保它不是像 Adobe 的 AEP 调试器喜欢做的那样重定向调用的调试插件。

【解决方案2】：

如果元素.myclass在页面上只有一个，也许可以尝试添加一个事件监听器，

document.querySelector('.myclass').addEventListener("click", function() { 

gtag('event', 'phoneclick', {
  'event_category' : 'contact',
  'event_label' : 'phone'
});

});

【讨论】：

【解决方案3】：

同样的问题在这里。

我仍在努力寻找解决方案。 GA4单独安装。

这是我的 javascript 测试：

<script>
    $('#form').on('submit',function(){
            console.log('form_send.1');
            gtag("event", "form_send_ok");
            console.log('form_send.2');
    });
</script>

使用 chrome 控制台：在我的网络面板上，我有两行 google.com/g/collect? 在我的控制台日志中，我只有一个： form_send.1 form_send.2

我网络中的两条线不完全相同，第一条以'_et=1'结束，第二条以'_et=2'结束该事件在 GA 中被计算两次。

如果我在控制台中输入 gtag("event", "form_send_ok");同样的事情，两次调用 ga4。
我检查边缘没有扩展，同样的事情。
如果您想尝试在我的网站上举办活动，请成为我的客人：usa.nacel.es

如果有人有想法请说:) 谢谢您的帮助

【讨论】：