Come monitorare il tempo di caricamento della pagina in GA4 con Google Tag Manager

La velocità dei siti web è un tema sempre più caldo, soprattutto da quando Google ha aggiunto i Core Web Vitals tra i fattori di ranking.
Google PageSpeed è così diventato il migliore amico di molti professionisti e responsabili marketing, che vogliono assicurarsi il miglior punteggio possibile.
Sorvoleremo in questa sede sul reale valore di determinati punteggi all’interno di una strategia SEO complessa, perché in questo articolo vogliamo infatti darvi una guida per il tracciamento della velocità del sito sul “nuovo” Google Analytics 4 attraverso Google Tag Manager.

Il Rapporto Velocità Sito su Google Universal Analytics

Ai tempi di Google Universal Analytics, potevamo vedere numerosi dati sulle performance del nostro sito, anche suddivisi per singola pagina (o url).

Il report Tempi pagine ci permetteva infatti di fare analisi granulari su metriche quali ad esempio la Frequenza di Rimbalzo, alla ricerca di eventuali correlazioni tra quest’ultima e la velocità di caricamento.

Nel menu Velocità Sito era possibile trovare anche dei suggerimenti per aumentare la velocità in base a metriche quali Tempo di download medio della pagina (in secondi) e Tempo medio di risposta del server (sempre in secondi).

L’ultimo report disponibile, Tempi Utente, consentiva di analizzare in modo dettagliato il rendimento delle singole risorse, ad esempio immagini, video e pulsanti.

Con l’arrivo di Google Analytics 4, questi rapporti non sono più disponibili. 

Ecco perché abbiamo deciso di condividere con voi una guida per accedere a questi dati, utilizzando Google Tag Manager e visualizzando i dati su Looker Studio (ex Google Data Studio).

Mentre PageSpeed Insights ci dà infatti uno specchio delle performance del momento (fatta eccezione per i dati sui Core Web Vitals nella parte alta del report) e sul singolo url esaminato, seguendo questa guida potrete avere una dashboard sempre aggiornata sulla base dei dati raccolti, così da avere un vero e proprio storico delle performance.

Ma adesso, passiamo all’azione!

Monitorare il page load time su Google Tag Manager

La nostra guida inizia da Google Tag Manager: qui, dovremo creare una variabile per raccogliere il Page Load Time, un attivatore e il tag per inviare i dati a GA4.

La premessa è, naturalmente, essere in possesso di un account e un contenitore Google Tag Manager con un tag di configurazione GA4 al suo interno.

1. Creare la variabile Page Load Time su GTM

Sul tuo contenitore GTM, crea una variabile di tipo JavaScript Personalizzato e inserisci questo codice:

function() {
    if (window.performance && window.performance.getEntriesByType) {
   	 var entries = window.performance.getEntriesByType("navigation");
   	 if (entries.length > 0) {
   		 var navTiming = entries[0];
   		 var pageLoadTime = navTiming.loadEventEnd - navTiming.startTime;
   	 return Math.round((pageLoadTime + Number.EPSILON) * 100) / 100;
   	 }
    }
}

In Valore Formato, flagghiamo la casella Converti “Undefined to” e inseriamo il valore 0.

In questo modo, avrai il Tempo di caricamento in millisecondi.

Ecco come apparirà la nostra variabile in GTM.

Possiamo chiamare la variabile CJS – Page Load Time (dove CJS sta per Custom JavaScript).

2. Creare il primo attivatore Page Loaded su GTM

Rechiamoci sulla sezione degli attivatori (o Triggers) e creiamo un attivatore di tipo “Pagina Caricata”, che chiameremo Page Loaded.In “Questo attivatore si attiva su” spuntiamo Tutti gli eventi sulla finestra caricata.

3. Creare il secondo attivatore Evento Personalizzato su GTM

Adesso, creiamo un nuovo attivatore di tipo Evento Personalizzato, che ci servirà per impedire l’attivazione del tag EVENTO GA4 (che creeremo nel prossimo paragrafo) quando la variabile CJS – Page Load Time avrà valore inferiore a 0.

In nome evento metteremo una RegEx che indicherà qualsiasi evento e andremo poi a discriminare subito sotto, in Questo attivatore si attiva su, dove selezioneremo “Alcuni eventi personalizzati” e creeremo la condizione per cui il valore della variabile creata poco fa (CJS – Page Load Time) è minore di 0.

Possiamo chiamare l’attivatore appena creato Page Load Time minore di 0.

4. Creiamo il tag su GTM

È finalmente arrivato il momento di creare il nostro tag che si occuperà di inviare il dato del Page Load a Google Analytics 4.

Creiamo un tag di tipo evento GA4 e selezioniamo il nostro tag di configurazione (nel nostro caso si chiama GA4 – Pageview);

come nome dell’evento mettiamo page_load_time;

aggiungiamo un nuovo parametro loading_time_sec e come valore la variabile già creata CJS – Page Load Time;

Come attivatore mettiamo Page Loaded e aggiungiamo l’eccezione Page Load minore di 0;

Chiamiamo il tag GA4 – Page Load Time.

Creazione della Custom Dimension in Google Analytics 4

Spostiamoci adesso su Google Analytics 4 e andiamo in Amministrazione → Definizioni personalizzate e clicchiamo sulla tab Metriche personalizzate.

Creeremo una nuova metrica e le daremo il nome loading_time_sec;

lasciamo Evento come ambito;

se vogliamo, possiamo aggiungere una descrizione come per esempio “Caricamento pagina in millisecondi”; ripetiamo il nome del parametro e impostiamo Millisecondi come unità di misura.

Testiamo e pubblichiamo su Google Tag Manager

È arrivato il momento di testare e pubblicare ciò che abbiamo appena fatto su Google Tag Manager.

Clicchiamo su Anteprima e clicchiamo sul nostro evento a sinistra e successivamente sul tag “Fired” appena creato GA4 – Page Load Time. 

All’interno di esso, qualora sia flaggata l’opzione Values, dovremmo vedere il valore correttamente. 

Spostandoci di pagina in pagina sul nostro sito, avremo modo di vedere dati diversi per ogni pagina.

Se vedi tutto come spiegato, sei pronto per pubblicare e… “cantare come se nessuno ti ascoltasse”! 

Visualizzare i dati di Page Load Time su Looker Studio

Ok, il nostro sistema di tracciamento è concluso. Dove visualizzare i dati adesso?

Potresti anche fare un’esplorazione ad hoc su Google Analytics 4, ma per ora questa opzione è sconsigliabile: non potrai avere altro che il tempo di caricamento totale appena raccolto via tag manager.

Il consiglio è dunque quello di utilizzare Looker Studio, attraverso un report specifico.

Andiamo allora su Looker Studio (ex Google Data Studio) e colleghiamo la nostra sorgente dati Google Analytics 4;

creiamo una tabella e aggiungiamo la dimensione Percorso pagina e le Metriche page_load_time, count page_load_time e Average page_load_time: queste ultime due sono metriche create automaticamente da Looker studio sulla base dell’appena creata page_load_time, ed è proprio per questo che preferiamo usare questo tool piuttosto che le esplorazioni di GA4. Queste ultime indicano rispettivamente:

1. il numero totale di volte in cui è stato raccolto il parametro loading_time_sec
2. il tempo medio di caricamento in base alla metrica personalizzata creata in Google Analytics

Come ciliegina sulla torta, aggiungiamo che per avere dati il più puliti possibile, l’ideale è creare un filtro che escluda i casi in cui è stata raccolta una visualizzazione di pagina senza che il nostro tag del tempo di caricamento della pagina si sia attivato (per esempio perché il tempo di caricamento è stato inferiore a 0, eccezione aggiunta a Google tag Manager poco sopra).
Un esempio di filtro sufficiente a fare questo, è quello che include i dati il cui event name è uguale a page_load_time.

Clicchiamo su salva in basso a destra e il gioco è fatto. Ecco come apparirà il nostro Report sul caricamento delle pagine!

Conclusioni

Abbiamo visto come tracciare e registrare il tempo di caricamento delle pagine utilizzando Google Tag Manager e Google Analytics 4, per avere dati sulla velocità del sito anche ora che Google Universal Analytics è stato disattivato e la migrazione a GA4 è prioritaria.

Per questo è sufficiente creare una variabile di tipo JavaScript personalizzato, un attivatore di tipo Finestra Caricata, un attivatore di tipo Evento Personalizzato e infine il tag per inviare a Google Analytics 4 i dati, successivamente visualizzabili al meglio su Looker Studio.