CODEWITHSUNDEEP
javascriptonclickgtag.js
Sargasso-400
Sargasso-400

Reputation: 37

Google Analytics (GTAG) and javaScript problems

I've finished the migration from analytics.js to gtag.js and I've configured-updated the tracking of various 'onclick' events. I have a problem with one, just one element doesn't get tracked.

This code, as example, works well across all the elements on my website: <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'});">

But this element (only this one) doesn't work: <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'});">

And I have noticed that it works well (so the gtag code is fine) by removing the Javascript tied to the button (that shows an overlay menu). The Javascript code is: 

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

I use the same javascript structure with another buttons (close menu button) and they are also being tracked. I also tested by adding 'return false' at the end of the gtag as well used getElementById instead of querySelector. It doesn't make any difference.

I had no problems with analytics.js.

Upvotes: 0

Views: 604

Answers (2)

Sargasso-400
Sargasso-400

Reputation: 37

Thank you for the answer. It worked but the elements inside the overlay menu cannot be tracked. The structure looks like that:

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

However, from what I've read looking for solutions, it seems that I could possibly fix it by using Google Tag Manager. It has a 'Trigger Type' for 'Elements Visibility' that would fire when the elements shows in the browser's viewport. I guess that's what I need because my menu works like a full screen pop-up or modal dialog.

Anyway I don't think I'll go for it. Everything was easier with Analytics.js working with 'hits' and that's what I'd like to have.

Upvotes: 0

Open SEO
Open SEO

Reputation: 1712

What if you gather everything in one place ?

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'});
}

Upvotes: 1

Related Questions