[Aggiornata il 31 Luglio 2023]
Tra le funzionalità più interessanti e utili di Google Analytics 4 c’è senza dubbio il DebugView, ovvero la modalità di debug nativa del nuovo strumento per l’analisi di Google.
Allacciati le cinture perché in questa guida vedremo:
Sei pronto? Iniziamo 😉
Per prima cosa, cerchiamo di capire cosa diavolo è il DebugView di GA4.
Il DebugView è una funzionalità di GA4 che ti permette di testare se gli eventi che stai tracciando sul tuo sito web vengono registrati correttamente da Google Analytics 4 con i valori che ti aspetti.
Uh, ma non solo.
Per ogni evento registrato dal DebugView puoi anche visualizzare tutti i Parametri e le User Properties inviati nell’evento.
In questo modo sarai sempre in grado di verificare ogni informazione e quindi essere sempre sicuro di inviare a GA4 tutti i dati di cui hai bisogno.
Davvero utile non trovi?
“Ok, sì è molto utile… ma dove lo trovo?”
Ottima domanda.
Sapevi che il DebugView è così importante per i propri progetti di digital analytics in GA4 che gli ho dedicato un’intera sezione del Capitolo 7 nel mio libro su GA4 “Google Analytics 4 per chi inizia“?
Ma andiamo con ordine.
Per accedere al DebugView di Google Analytics 4 ti basta andare su:
Dovresti avere quindi una schermata simile a questa:
Ce l’hai? Great!
Andiamo avanti 😉
Devi sapere che il DebugView è certamente una funzione nativa di GA4, ma questo non significa che sia già bello configurato e pronto.
Infatti bisogna in qualche modo istruire il nostro carissimo GA4 ad essere pronto a capire quali sono gli eventi da visualizzare nel debug e quali no.
Cosa dici, lo aiutiamo a capire?
Per attivare il DebugView e quindi testare gli eventi c’è bisogno di passare un parametro speciale agli eventi di GA4.
In pratica in ogni evento inviato a Google Analytics 4 deve contenere al suo interno un parametro speciale, il “debug_mode“.
Eccolo qui sotto il famoso parametro:
Quando il debug_mode parametro ha un valore diverso da “undefined“, allora GA4 attiverà il DebugView e registrerà quell’evento.
Facciamo una metafora.
Per capire meglio come funziona la modalità di debug di GA4 utilizzerò una bellissima metafora sul mio pirata preferito, Jack Sparrow 🙂
Immaginiamo che il nostro caro Jack Sparrow rappresenti l’evento che viene inviato a Google Analytics 4 mentre il suo immancabile cappello da pirata sia il parametro debug_mode che attiva la modalità di debug.
Quindi:
Quando Jack Sparrow indossa il suo cappello da pirata, il nostro evento di GA4 contiene il parametro debug_mode che a sua volta attiva la modalità di debug di GA4 la quale registra l’evento.
Facile no?
“Ok, bella metafora, ma come lo mettiamo ‘il cappello’ al nostro Jack Sparrow?”
Ci sono moltissimi modi con cui possiamo farlo, in questa guida ne vedremo due:
Andiamo all’arrembaggio 😉
Far indossare il cappello al nostro pirata con Google Tag Manager è veramente un gioco da ragazzi 🙂
Tutto quello che devi fare è utilizzare la modalità anteprima di GTM.
Pensa alla modalità anteprima di GTM come alla Perla Nera (la famosa nave della saga cinematografica), quando Jack Sparrow è al timone della nave spettrale, da buon capitano indossa sempre il suo cappello da pirata.
Perciò se la modalità anteprima di GTM è attiva è come se stessi navigando a bordo della Perla Nera e automaticamente tutti gli eventi di GA4 che scatenerai sulle le pagine del tuo sito web conterranno il parametro debug_mode e quindi verranno registrati anche nel DebugView di GA4.
Tutto qui! 🙂
Se invece ti interessa testare gli eventi con il DebugView di GA4 anche al di fuori della modalità anteprima di GTM, dovrai aggiungere manualmente il parametro debug_view all’interno dei tag di GA4.
Ecco cosa devi fare:
In GTM vai sul tag di configurazione di GA4 > Fields to Set e aggiungi un nuovo campo
Salva il Tag e pubblica il contenitore cliccando sul pulsante blu “Submit”.
Da questo momento tutti gli eventi di GA4 scatenati sul tuo sito web verranno registrati dal DebugView.
[ATTENZIONE: tutti gli utenti che navigheranno il sito entraranno nel report di Debug di GA4, quindi ricordati di non lasciarlo sempre attivo]
Se invece ti interessa debuggare in GA4 solo uno o più eventi allora devi agire sul Tag di evento che ti interessa
Ecco come fare:
In GTM, vai sul Tag evento di GA4 che ti interessa debuggare > sezione “Event Parameters” > Aggiungi un nuovo parametro
Una volta fatto salva il Tag e pubblica il contenitore cliccando sul pulsante blu “Submit“.
Adesso se quell’evento verrà scatenato lo vedrai nel DebugView di GA4.
Se non utilizzi Google Tag Manager allora puoi modificare lo script del gtag e inserire il parametro ‘debug_mode’ .
Ecco un esempio:
gtag('config', 'G-12345ABCDE',{'debug_mode':true});
Se invece ti interessa debuggare solo alcuni eventi, devi inserire il parametro solamente nello script dell’evento che ti interessa, in questo modo:
gtag('event', 'xyz', {
'debug_mode':true
});
Un altro metodo per attivare la modalità debug di GA4 è quello di utilizzare un’estensione di Chrome chiamata Google Analytics Debugger.
Per farlo ti basterà scaricare l’estensione a questo link , attivarla cliccandoci sopra e andare sul tuo sito web.
Quando l’estensione è attiva, vedrai apparire l’icona “ON” accanto all’estensione:
Da questo momento la modalità debug di GA4 registrerà tutti gli eventi che scatenerai sulle pagine del tuo sito.
Per disattivarla ti basterà cliccare nuovamente sull’estensione.
Per concludere ecco a te un piccolo “barbatrucco” (uno dei miei tanti personali trucchi del mestiere) da vero pirata per rendere il DebugView di GA4 più chiaro e leggibile.
Forse sarà capitato anche a te: cliccando su uno degli eventi registrati in tempo reale dal DebugView per avere più dettagli, l’interfaccia appare “tagliata” e schiacciata, rendendo difficile leggere i dati completi.
Per ovviare a questo problema, ho creato questo script:
javascript:function DebugViewFull(){document.querySelector('body > ga-hybrid-app-root > ui-view-wrapper > div > app-root > div > div > ui-view-wrapper > div > admin-home').style.maxWidth = 'none';document.querySelector('.admin-nav-columns.with-selection').style.minWidth='0px';document.querySelector('.admin-nav-columns.with-selection').style.width='0px';}DebugViewFull();
Grazie a questo semplice pezzetto di codice potrai nascondere dalla visualizzazione del DebugView la barra del menu laterale alla tua sinistra.
In questo modo avrai una visione completa del dettaglio degli eventi di tracciamento registrati dal DebugView.
Non ti spaventare, è più semplice di quel che sembra.
Per utilizzare il mio script fai così:
Voilà! Non ti resta che verificare che lo script funzioni.
Per farlo, torna nella sezione DebugView del tuo GA4 e clicca sullo script che hai salvato come preferito.
Se hai eseguito tutto correttamente, assisti alla magia!
Vedrai sparire la fastidiosa barra laterale a sinistra e i dati appariranno più leggibili.
Per disattivare questa funzionalità devi semplicemente aggiornare la pagina (refresh), e tutto tornerà come prima.
Ora che anche tu riesci ad indossare il cappello di Jack Sparrow non ti resta che verificare tutti gli eventi che configuri utilizzando il DebugView di GA4.
Lasciami un commento qui sotto se è tutto ok 😉
Alla prossima guida e… buon Tag!
Negli ultimi mesi hai notato in Google Analytics 4 un calo improvviso e inspiegabile nelle…
Se ti trovi su questa guida è perché hai compreso che solo attraverso la Data…
Greenpeace è un'associazione globale che con azioni dirette e concrete denuncia i problemi ambientali e…
Da quando hai configurato la Consent Mode v2 (CM v2) hai notato cali improvvisi o…
Premesso che non è possibile conoscere l'esatto funzionamento né di Chrome, né degli algoritmi di…
Da quale canale di marketing arriva il maggior numero di conversioni? Quale campagna di marketing…