Des de Com començar fins al seguiment professional

<script>
document.addEventListener('DOMContentLoaded', function() {
  var menu_anchors = document.querySelectorAll('.menu-items a');
  //Click event listener to each anchor element
   menu_anchors.forEach((anchor) => {
   anchor.addEventListener('click', (event) => {
    gtag('event', 'menu_clicks', {
       'event_category': 'Menu Clicks',
       'event_action': anchor.href,
       'event_label': anchor.textContent
    });
   });
  });
});
</script>

El nom de l’esdeveniment “menu_clicks” pot ser el que vulgueu i tindrà tres paràmetres que proporcioneu. Aquest és un enfocament si no teniu Google Tag Manager i preferiu la implementació de gtag.

Podeu utilitzar paràmetres personalitzats per passar valors addicionals a esdeveniments predefinits, per exemple, Registra’t esdeveniment. Segons la documentació de GA, només admet un paràmetre anomenat “mètode” (que pot ser qualsevol cosa, per exemple, inici de sessió social, correu electrònic, etc.)

gtag("event", "sign_up", {
method: "Google"
});

En afegir dimensions personalitzades, també podeu transmetre informació addicional, com ara un pla de subscripció de registre (per exemple, “prova gratuïta”, “bàsic”, “premium”).

Podeu afegir una dimensió personalitzada “sign_up_plan” i passar juntament amb “mètode”.

gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});

Per implementar tot això, necessiteu habilitats bàsiques de programador JS, amb les quals podeu aprendre ràpidament utilitzant ChatGPT. Ara podeu provar el missatge:

Codi JavaScript que activa un esdeveniment personalitzat de gtag amb el nom “menu_clicks” quan un usuari fa clic en un element de menú amb una etiqueta li principal que té la classe “.menu-item”. Passeu els paràmetres d’esdeveniment personalitzats següents: ‘event_category’ s’hauria d’establir com a ‘Clics de menú’, ‘event_action’ s’hauria de definir a l’enllaç de l’element en què s’ha fet clic i ‘event_label’ s’hauria de definir al text d’ancoratge de l’element en què s’ha fet clic.

Proveu aquesta indicació i veureu com passa la màgia.

Podeu copiar i enganxar aquest codi al vostre editor de codi CMS, i voilà!

Ara, configurem el mateix seguiment d’esdeveniments amb l’etiqueta GTM.

Suposo que ja ho has instal·lat GA4 mitjançant Google Tag Manager i procedirà amb els passos a partir d’aquí.

Hauríeu d’afegir dimensions personalitzades segons els passos que s’expliquen a la pàgina secció anterior.

Com configurar el seguiment d’esdeveniments a Google Tag Manager

Creeu una nova variable de JavaScript a GTM que retorni el nom de classe de l’etiqueta principal de l’àncora en què s’ha fet clic, perquè, a GTM, no hi ha cap manera integrada d’obtenir els atributs de l’element DOM principal.

Navega a Les variables > Variables definides per l’usuari i feu clic a Nou botó a la cantonada superior dreta. Al diàleg emergent, seleccioneu JavaScript personalitzat.

Copieu i enganxeu-hi aquest codi.

function() {
 'use strict';
 try {
       var clickElement = {{Click Element}}; // clickable element DOM object
       var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
       if (!clickParent) return ''; 
       return clickParent.getAttribute('class'); // if element exist return class attribute
 } catch (err) {
       return '';
 }
}

Aquest codi retorna l’atribut de classe pare d’un element en què s’ha fet clic quan hi ha un pare amb la classe ‘.menu-item’, o retorna un valor buit si no hi ha aquest element pare.

Podem utilitzar-ho per assegurar-nos que només detectem clics als enllaços d’elements del menú, no a altres enllaços a altres llocs de la pàgina.

Creeu un activador nou a GTM que s’activi en tots els clics en elements amb un

Navegueu a Activadors i feu clic a Nou botó a la cantonada superior dreta.

Des del diàleg emergent, seleccioneu Feu clic a – Només enllaços.

Tria Alguns clics a l’enllaç > Configura que es dispari als clics on la classe d’elements pare conté la cadena “element de menú”.

Aneu a Etiquetes i afegiu l’etiqueta d’esdeveniment GA4.

Captura de pantalla de GA4, abril de 2023

Empleneu com a nom d’esdeveniment “main_menu_clicks” o el que vulgueu anomenar l’esdeveniment i afegiu paràmetres personalitzats event_category, event_action i event_label.

Captura de pantalla de GA4, abril de 2023

Per a l’acció i l’etiqueta de l’esdeveniment, tria Feu clic a Text i Feu clic a URL variables incorporades.

Captura de pantalla de GA4, abril de 2023

Trieu l’activador dels clics de menú que hem creat abans i deseu l’etiqueta.

Publicar els canvis i depurar per assegurar-vos que quan feu clic als elements del menú, l’esdeveniment s’activa amb tots els paràmetres configurats correctament.

Com implementar el seguiment d’esdeveniments personalitzat mitjançant el mètode dataLayer.push().

Si encara preferiu la codificació personalitzada i teniu GTM, podeu utilitzar el mètode datalayer.push().

En aquest cas, hauríeu d’afegir els paràmetres event_category, event_action i event_label a GTM com a variables de dataLayer.

I a la secció del vostre lloc web, hauríeu d’utilitzar el codi següent.

<script>
//Click event listener to menu items with the '.menu-item' class
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(function(menuItem) {
    menuItem.addEventListener('click', function(event) {
    //Link and anchor text of the clicked link
    let link = menuItem.querySelector('a').href;
    let anchorText = menuItem.querySelector('a').textContent;
    // Trigger the custom event 'menu_clicks' using dataLayer.push()
    dataLayer.push({
      'event': 'menu_clicks',
      'event_category': 'Menu Clicks',
      'event_action': link,
      'event_label': anchorText
    });
  });
 });
});
</script>

Com puc saber si el seguiment d’esdeveniments de Google Analytics funciona?

També és important comprovar si veieu un registre d’esdeveniments amb els mateixos paràmetres a GA4 depurar vista. Pot passar que GTM es dispari, però a causa d’una configuració incorrecta, no es passarà a GA4.

En cas que tingueu una implementació de gtag, hauríeu d’habilitar el mode de depuració instal·lant Chrome extensió o afegint una línia de codi al vostre GA4 configuració.

gtag('config', 'G-12345ABCDE', { 'debug_mode':true });

Depureu sempre i assegureu-vos que tots els paràmetres personalitzats passen com s’esperava.

Conclusió

GA4 és bastant desafiant i no és una eina d’anàlisi plug-and-play com Universal Analytics; has de dedicar una bona estona a aprendre-la.

D’altra banda, inclou moltes funcions noves que podeu utilitzar i millorar les vostres anàlisis a un nivell sense precedents.

En poder personalitzar el seguiment d’esdeveniments, obteniu una poderosa habilitat que fins i tot us pot ajudar a treballar amb alguns dels models d’atribució que Google Analytics és. posta de sol mitjançant el seguiment de la font de la primera visita dels usuaris en una dimensió personalitzada.

Tenint això en compte, publicaré una guia pas a pas sobre com restaurar (parcialment) el primer model d’atribució mitjançant paràmetres d’esdeveniment personalitzats.

Més recursos:

Imatge destacada: Andrey_Popov/Shutterstock