Google Analytics (GTAG) 和 JavaScript 问题答案

【问题标题】：Google Analytics (GTAG) and javaScript problemsGoogle Analytics (GTAG) 和 JavaScript 问题
【发布时间】：2020-05-05 16:14:30
【问题描述】：

我已经完成了从 analytics.js 到 gtag.js 的迁移，并且我已经配置并更新了对各种“onclick”事件的跟踪。我有一个问题，只有一个元素没有被跟踪。

例如，此代码适用于我网站上的所有元素： <a id="js-logo" class="nav__logo" tabindex="0" aria-labelledby="aria-logo" onclick="gtag('event', 'click', {'event_category' : 'Navegación', 'event_label' : 'n.logo'});">

但是这个元素（只有这个）不起作用： <button id="js-abrir-menu" class="nav__abrir" tabindex="-1" aria-hidden="true" onclick="gtag('event', 'click', {'event_category' : 'Navegación', 'event_label' : 'n.abrir.menu'});">

而且我注意到它运行良好（所以 gtag 代码很好） 通过删除绑定到按钮的 Javascript（显示覆盖菜单）。 Javascript代码是：

document.querySelector("#js-abrir-menu").onclick = function() {
    document.querySelector(".menu").style.height = "100%";
}

我对另一个按钮（关闭菜单按钮）使用相同的 javascript 结构，并且它们也被跟踪。我还通过在 gtag 末尾添加“return false”以及使用 getElementById 而不是 querySelector 进行了测试。它没有任何区别。

analytics.js 没有问题。

【问题讨论】：

标签： javascript onclick gtag.js

【解决方案1】：

如果你把所有东西都集中在一个地方会怎样？

document.querySelector("#js-abrir-menu").onclick = function() {
    document.querySelector(".menu").style.height = "100%";
    gtag('event', 'click', {'event_category' : 'Navegación', 'event_label' : 'n.abrir.menu'});
}

【讨论】：

【解决方案2】：

感谢您的回答。它有效，但无法跟踪覆盖菜单内的元素。结构如下：

<ul class="menu__contenido">
    <li><a href="#seccion-inicio" onclick="gtag('event', 'click', {'event_category' : 'Navegación', 'event_label' : 'n.inicio'});">Inicio</a></li>
    <li><a href="#seccion-muestra" onclick="gtag('event', 'click', {'event_category' : 'Navegación', 'event_label' : 'n.muestras'});">Muestras Web</a></li>
    ...
</ul>

但是，根据我所阅读的寻找解决方案的内容，我似乎可以通过使用 Google 跟踪代码管理器来修复它。它有一个“元素可见性”的“触发器类型”，当元素显示在浏览器的视口中时会触发。我想这就是我所需要的，因为我的菜单就像全屏弹出窗口或模式对话框一样工作。

无论如何，我不认为我会去。使用 Analytics.js 处理“点击”，一切都变得更容易，这就是我想要的。

【讨论】：