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:
Cos’è il DebugView di Google Analytics 4
Come si attiva il DebugView di Google Analytics 4 utilizzando Google Tag Manager
Come si attiva il DebugView di Google Analytics 4 utilizzando l’estensione di Chrome Google Analytics Debugger
Sei pronto? Iniziamo 😉
Cos’è il DebugView di Google Analytics 4?
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:
GA4 > Configure > DebugView
Dovresti avere quindi una schermata simile a questa:
Ce l’hai? Great!
Andiamo avanti 😉
Come si attiva il DebugView di GA4?
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.
Come funziona e come utilizzare il DebugView di GA4
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:
Jack Sparrow = evento in GA4 (ad esempio page_view)
Cappello di Jack Sparrow = il parametro debug_mode
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:
Utilizzando Google Tag Manager
Utilizzando l’estensione di Chrome Google Analytics Debugger
Andiamo all’arrembaggio 😉
Abilitare il DebugView di Google Analytics 4 con Google Tag Manager
Far indossare il cappello al nostro pirata con Google Tag Manager è veramente un gioco da ragazzi 🙂
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! 🙂
Forzare sempre il Debug nei Tag di GTM anche fuori dalla modalità anteprima
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
Field Name:debug_mode
Value: true (o quello che ti pare)
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
Parameter Name: debug_mode
Value: true
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.
Aggiungere manualmente il parametro debug_mode al gtag
Se non utilizzi Google Tag Manager allora puoi modificare lo script del gtage inserire il parametro ‘debug_mode’ .
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
});
Utilizzare l’estensione Google Analytics Debugger
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 cliccandocisopra 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.
Il “barbatrucco” per migliorare l’interfaccia del DebugView
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ì:
copia lo script
clicca col tasto destro sulla barra dei preferiti del tuo browser (nel mio esempio Google Chrome)
nel menu che comparirà, clicca su Aggiungi Pagina
si aprirà una nuova scheda, denominata Modifica preferito
incolla lo script che hai precedentemente copiato nella casella URL
nel campo “Nome” rinomina lo script come preferisci (nel mio caso l’ho salvato come “Script GA4 DebugView”)
clicca su Salva
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.
Adesso tocca te!
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.
