Se ti occupi di SEO forse conosci già i Core Web Vitals, le metriche più importanti in cui Google valuta l’esperienza utente sul tuo sito web.
E per questo motivo i Core Web Vitals sono un fattore di ranking fondamentale.
Analizzare queste metriche è un’attività troppo importante per essere ignorata, perché ti permette di mantenere alte le performance del tuo sito web e il ranking in SERP guadagnato con sudore.
In questa guida ti mostrerò come monitorare in modo semplice e rapido le metriche Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS) dei Core Web Vitals direttamente sul tuo Google Analytics 4.
Per farlo, ti serviranno due cose:
- Google Tag Manager
- Google Analytics 4
“Ma a cosa mi serve fare questa implementazione? Le metriche dei Core Web Vitals le posso vedere anche dal pannello della mia Search Console!”
Vero, ma con un grande limite.
Infatti, nella tua dashboard di Search Console potrai analizzare i “segnali vitali” solo quando vengono rilevati dei problemi con gli URL del tuo sito web
(ovvero, quando Search Console ti segnala che i punteggi dei Core Web Vitals di alcuni URL del tuo sito web sono “scadenti” o “migliorabili”).
Invece, grazie a questa guida potrai tracciare i dati delle metriche LCP, FID e CLS direttamente nei tuoi report su Google Analytics 4 e controllarle in tempo reale nel day-by-day.
In questo modo, potrai avere sempre sotto controllo le performance del tuo sito web e prevenire (invece che curare e basta) i problemi relativi alle metriche dei Core Web Vitals.
Sei pronto? Allora Iniziamo!
STEP 1 – Carica la libreria dei Core Web Vitals e importala nel tuo Google Tag Manager
Come forse saprai, le metriche dei Core Web Vitals di Google sono:
- Largest Contentful Paint (LCP), che misura il tempo impiegato per caricare l’immagine o il blocco di testo più grande nella finestra. Questo dovrebbe essere in modo ottimale al di sotto di 2500 millisecondi
- First Input Delay (FID), che misura il tempo impiegato dal browser per reagire all’interazione dell’utente (ad es. clic o tocco). Questo dovrebbe essere in modo ottimale inferiore a 100 millisecondi
- Cumulative Layout Shift (CLS), che misura l’entità dei cambiamenti imprevisti nel layout durante la durata della pagina. Questo dovrebbe avere in modo ottimale un punteggio inferiore a 0,1
Per ricavare queste metriche Google si affida ai dati che vengono misurati da strumenti come Chrome User Experience Report, Page Speed Insights, Search Console’s Speed Report).
Ecco perché il modo più semplice e accurato per tracciare i Core Web Vitals è di implementare l’apposita libreria JavaScript dei web-vitals.
Infatti, utilizzare questa libreria ti consente di misurare ciascuna metrica esattamente come fanno gli strumenti di Google che ti ho menzionato poco fa.
Ecco cosa devi fare:
- Entra nel tuo Google Tag Manager > Clicca sulla voce “Templates” nel menù laterale > Clicca sulla Search Gallery e cerca “Core Web Vitals”
Successivamente clicca su “Add to workspace”.
Con questi semplici passi hai installato la libreria JavaScript dei web-vitals.
STEP 2 – Crea il Tag di tracciamento specifico per i Core Web Vitals
Adesso crea il Tag che ti permetterà di tracciare le metriche che ti interessano.
Sempre nel tuo Google Tag Manager:
- clicca sulla voce “Tags” dal menu a sinistra > clicca su “New”
- lascia deselezionata l’opzione “Namespace Objects”
- come “Trigger” (“Attivatore”) su cui fare scattare l’evento di tracciamento dei Core Web Vitals scegli All Pages
- dai un nome a questo nuovo tag che hai appena creato (ad esempio, “Core Web Vitals”)
Prima di procedere andiamo a vedere come si comporta questo Tag nel sito web.
Clicca sul pulsante “Preview” del tuo Google Tag Manager ed entra nella modalità di Debug del tuo sito web.
Così facendo potrai entrare nel tuo sito web e vedere in anteprima il funzionamento delle implementazioni che hai appena fatto prima di pubblicarle (quindi, di renderle ufficiali).
Per questo motivo, per vedere qualche dato in anteprima sul funzionamento del Tag che hai appena configurato, ti consiglio di interagire col tuo sito facendo qualche click.
All’interno della modalità Debug, se hai fatto tutto correttamente, dovresti vedere tre nuovi eventi chiamati coreWebVitals, ognuno relativo ad una delle tre metriche che abbiamo visto all’inizio della guida (LCP, FID e CLS).
All’interno della sezione API Call puoi vedere anche tutte le informazioni che vengono passate:
- il nome evento implementato (coreWebVitals)
- il nome di una delle metriche che stai tracciando (FID)
- il valore della metrica FID tracciata.
STEP 3 – Crea il “Trigger” che farà scattare l’evento di tracciamento
Il prossimo passo è creare il Trigger (l’Attivatore) che utilizzeremo per far scattare in GA4 l’evento che abbiamo appena creato.
Per farlo, entra nel tuo Google Tag Manager e:
- Clicca sulla sezione Triggers dal menu a sinistra > New
- Come tipo di Trigger seleziona “Custom Event”
- Come nome Evento imposta coreWebVitals
Salva il Trigger nominandolo ad esempio coreWebVitals
STEP 4 – Crea le variabili di livello dati
Arrivati a questo punto rifacciamo la “lista della spesa” dell’evento di tracciamento dei Web Vitals che stiamo creando.
Nei precedenti step abbiamo:
- caricato la libreria dei Core Web Vitals dalla quale prenderemo i valori per misurare le metriche dei Core Web Vitals nel nostro Google Analytics 4
- creato il Tag, che registrerà tutte le informazioni sulle FID, LCP e CLS
- creato il Trigger (Attivatore), che farà da “innesco” per scatenare l’evento di tracciamento
Adesso non ci resta che creare le variabili di livello dati che ci permettono di andare a prendere le informazioni sulle metriche dei Web Vitals che vogliamo passare a GA4.
In totale devi creare 4 Variabili.
Vai nella sezione Variables dal menu a sinistra del tuo Google Tag Manager e clicca su “New”.
La prima Variabile che creiamo riporta il delta grezzo della metrica, ossia la variazione del valore della metrica Web Vitals che viene misurata all’interno di una stessa pagina.
Ad esempio, se durante una prima misurazione della pagina “Contatti” il valore della metrica LCP era di 2,5 secondi e in una successiva misurazione il valore LCP diventa di 1 secondo, nel tuo Google Analytics 4 troverai il valore “1,5 secondi” come variazione della metrica LCP.
- come tipo di Variabile seleziona “Data Layer Variable”
- come nome Variabile nel Data Layer imposta: webVitalsMeasurement.delta
prima di salvare la configurazione, come nome della Variabile imposta: dlv – webVitalsMeasurement.delta
Ora fai la stessa cosa per le altre tre variabili.
La seconda Variabile riporta l’ID univoco della misurazione delle metriche Web Vitals per ogni pagina.
L’ID univoco viene utilizzato per associare più misurazioni delle metriche dei Web Vitals che vengono fatte con il caricamento di una singola pagina.
Ad esempio, in questo modo nel tuo Google Analytics 4 potrai vedere i dati della metrica CLS misurati in momenti diversi durante il caricamento della pagina “Contatti”.
In pratica, è come se stessi raccogliendo dati storici associati alle performance dei Web Vitals di ogni specifica pagina, invece che avere tante misurazioni diverse.
Imposta la seconda Variabile così:
- come tipo di Variabile seleziona “Data Layer Variable”
- come nome Variabile nel Data Layer imposta webVitalsMeasurement.id
- prima di salvare la configurazione, come nome della Variabile imposta: dlv – webVitalsMeasurement.id
La terza Variabile riporta il nome della metrica dei Web Vitals SEO:
- come tipo di Variabile seleziona: Data Layer Variable
- come nome Variabile nel Data Layer imposta: webVitalsMeasurement.name
- prima di salvare la configurazione, come nome della Variabile imposta: dlv – webVitalsMeasurement.name
Infine, l’ultima variabile riporta il valore grezzo delle metriche dei Web Vitals:
- come tipo di Variabile seleziona: Data Layer Variable
- come nome Variabile nel Data Layer imposta: webVitalsMeasurement.value
- prima di salvare la configurazione, come nome della Variabile imposta: dlv – webVitalsMeasurement.value
STEP 5 – Crea il Tag evento di Google Analytics 4
Finalmente siamo all’ultimo step.
Adesso abbiamo tutto quello che ci serve per creare il Tag Evento di GA4.
Vai nella sezione Tags dal menu a sinistra del tuo Google Tag Manager e clicca su “New”
- Tipo di Tag: GA4 Event
- Adesso seleziona il Tag di Configurazione di Google Analytics 4 in Configuration Tag oppure inserisci direttamente il codice del Data Stream di GA4
- Nome Evento: core_web_vitals
- Aggiungi quattro nuovi parametri in Event Parameters
- Parameter Name: web_vitals_measurement_name Parameter Value: {{dlv – webVitalsMeasurement.name}}
- Parameter Name: web_vitals_measurement_id Parameter Value: {{dlv – webVitalsMeasurement.id}}
- Parameter Name: web_vitals_measurement_value Parameter Value: {{dlv – webVitalsMeasurement.value}}
- Parameter Name: value Parameter Value: {{dlv – webVitalsMeasurement.delta}}
- In Attivazione seleziona il Trigger creato in precedenza “coreWebVitals“.
- Salva il Tag con il nome: “GA4 – Event – core_web_vitals”
STEP 6 – Verifica con il Debug che tutto funzioni
Ultimo step: testa che tutto funzioni correttamente.
Ricarica nuovamente la modalità Debug/Preview di Google Tag Manager e vai su una pagina del tuo sito web.
Effettua qualche click e nella scheda di Debug dovresti vedere i 3 eventi con altrettante attivazioni del tag GA4 – Event – core_web_vitals.
Hai fatto tutto nel modo giusto?
Ricordati che per essere ancora più sicuro che funzioni tutto a dovere puoi utilizzare anche il DebugView di Google Analytics 4 per vedere cosa stai effettivamente passando a GA4.
Una volta terminato le verifiche non dimenticarti di tornare nel contenitore di Google Tag Manager e pubblicare le modifiche cliccando sul pulsante blu Submit.
WEB VITALS CON SCREAMING FROG
Grazie a questo tutorial Matteo Zambon ci ha spiegato come tracciare i Core Web Vitals in modo semplice e completo con Google Tag Manager e Google Analytics ma anche Screaming Frog ci viene in aiuto nell’analisi di questi importanti fattori di ranking. Ecco la guida per tracciare i Web Vitals con Screaming Frog.
Matteo Zambon è dal 2015 il punto di riferimento italiano di Google Tag Manager (GTM) ed è riconosciuto a livello internazionale come uno massimi specialisti di GTM, del quale è uno dei Beta-Tester ufficiali.
Topic dell’articolo: Core Web Vitals | Google Tag Manager | Screaming Frog | Seo Spider.
