[UPDATE 31/12/2020]
In questa guida ti spiegherò il modo più semplice per tracciare i Core Web Vitals (se non sai cosa sono clicca qui) ovvero le metriche che sono di fatto il nuovo fattore di ranking nella SEO per Google.
Questo articolo prende spunto da un articolo ufficiale di web.dev dove vengono spiegate un po’ di cosucce e soprattutto il link al GitHub dove c’è uno script già fatto per gestire le API di Web Vitals con diversi strumenti tra cui Google Tag Manager.
Altra premessa importante è che ci sono diversi fonti da cui mi sono ispirato ma uno più di tutti Philip Walton di web.dev:
Ecco le metriche che ci interessano:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Quindi sei pronto a sfruttare le tre metriche del Core Web Vitals e crearti un tuo Real User Monitoring?
Partiamo!
STEP 1 – Crea il Tag HTML Personalizzato con le API Di Web Vitals
Prendendo un quasi copia/incolla con qualche leggera modifica e soprattutto grazie ad alcuni commenti (tra cui Simen Hansen) possiamo integrarlo in 10 secondi netti.
Per farlo dovrai utilizzare un Tag HTML Personalizzato.
- Tag > Nuovo > Configurazione Tag > Tag HTML Personalizzato.
- Incolla nella finestra di testo questo script:
<!-- Load 'web-vitals' using a classic script that sets the global 'webVitals' object. --> <script src="https://unpkg.com/web-vitals@1.0.1/dist/web-vitals.umd.js"></script> <script> function sendToGTM(name, delta, id) { // Assumes the global `dataLayer` array exists, see: // https://developers.google.com/tag-manager/devguide dataLayer.push({ event: 'web-vitals', event_category: 'Web Vitals', event_action: name.name, // Google Analytics metrics must be integers, so the value is rounded. // For CLS the value is first multiplied by 1000 for greater precision // (note: increase the multiplier for greater precision if needed). event_value: Math.round(name.name === 'CLS' ? name.delta * 1000 : name.delta), // The 'id' value will be unique to the current page load. When sending // multiple values from the same page (e.g. for CLS), Google Analytics can // compute a total by grouping on this ID (note: requires `eventLabel` to // be a dimension in your report). event_label: name.id, }); } webVitals.getCLS(sendToGTM); webVitals.getFID(sendToGTM); webVitals.getLCP(sendToGTM);
</script>
- Nella sezione Attiva su selezioneremo l’attivatore “All Pages”.
- Infine possiamo nominare il Tag appena creato ad esempio “Script – Web Vitals”.
- Salva il Tag e pubblicalo.
Dovresti avere una cosa simile:
Alcune considerazioni su questo script:
- Le parti in verde sono dei commenti (li puoi anche eliminare)
- L’oggetto dataLayer deve essere già inizializzato. No problem è già così 🙂
- Siccome in Google Analytics gli piacciono gli interi c’è un arrotondamento nella parametro event_value (il Math.round per capirci) e nel caso della metrica CLS viene aggiunto un multiplo di 1000.
- Il parametro event_label contiene un id univoco della pagina
- Sono 3 le metriche da ciucciarsi:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Che diavolo farà un pratica? Sparerà 3 eventi chiamati web-vitals in GTM con le metriche che ci interessano.
Attenzione! La libreria di riferimento si aggiorna: https://unpkg.com/web-vitals@1.0.1/dist/web-vitals.umd.js. Ad oggi siamo alla versione 1.0.1
Ti consiglio di verificare sempre la versione da qui: https://unpkg.com/browse/web-vitals@1.0.1/
Bene non ci resta che catturarle!
STEP 2 – CREAZIONE DELL’ATTIVATORE PER L’EVENTO PERSONALIZZATO WEB-VITALS
- Vai su Attivatore > Nuovo > Configurazione attivatore.
- Tipo di Attivatore: Evento personalizzato.
- Nome evento: web-vitals.
- Dai un nome all’Attivatore, per esempio: “Web Vitals”.
Ed ecco il nostro attivatore pronto:
STEP 3 – Creare le variabili di tipo livello dati
Non ci resta che prelevare i valori che sono all’interno del dataLayer per poi passarli al nostro Google Analyitcs.
I valori da prendere sono:
- event_category
- event_action
- event_value
- event_label
Non ti resta che farlo per tutte e quattro i valori.
Vai su Variabili > Nuova > Configurazione variabile > Variabile di livello dati
- Titolo: dlv – event_category
- Nome della Variabile di Livello Dati: event_category
- Versione livello dati: Versione 2
Ecco il risultato:
Fai lo stesso per le altre rimanenti cambiando nome e valore:
Vai su Variabili > Nuova > Configurazione variabile > Variabile di livello dati
- Titolo: dlv – event_action
- Nome della Variabile di Livello Dati: event_action
- Versione livello dati: Versione 2
Vai su Variabili > Nuova > Configurazione variabile > Variabile di livello dati
- Titolo: dlv – event_value
- Nome della Variabile di Livello Dati: event_value
- Versione livello dati: Versione 2
Vai su Variabili > Nuova > Configurazione variabile > Variabile di livello dati
- Titolo: dlv – event_label
- Nome della Variabile di Livello Dati: event_label
- Versione livello dati: Versione 2
Dovresti avere ora questo elenco:
Ottimo! Non ci resta che passare tutto al buon Google Analytics (ma potresti passare queste metriche a qualsiasi altro strumento).
STEP 3 – Creare il Tag di Google Analytics e configuriamolo per la web vitals
Yep, ci siamo. Creiamo il tag di Google Analytics!
- Tag > Nuovo.
- Tipo di Tag: Universal Analytics.
- Tipo di monitoraggio: Evento.
- Categoria: {{dlv – event_category}}
- Azione: {{dlv – event_action}}
- Etichetta: {{dlv – event_label}}
- Valore: {{dlv – event_value}}
- Hit da non interazione: True
A questo punto possiamo selezionare la variabile di Google Analytics su Impostazioni di Google Analytics e abilitare l’override, mettendo come ID Monitoraggio la tua costante GA oppure il codice UA.
- Attivatori di azionamento:“Web Vitals”.
- Nomina il Tag: “GA – Event – Web Vitals”.
- Salva
Ecco come dovrebbe essere
STEP 5 – VERIFICA IL TAG
Dopo tutta questa fatica, diamoci un’occhiata che tutto funzioni.
Con la funzione di Anteprima e Debug attiva, vai sul tuo sito: nella colonna a sinistra si attiverà tre volte l’evento “web-vitals” e se ci cliccherai sopra, tra i Tags Fired On This Event troverai il Tag che hai appena creato.
Quindi si attiverà per 3 volte, una per ogni metrica. Tieni presente che l’evento corrispondente alla metrica CLS ci metterà un po’ più di tempo ad uscire.
Ecco cosa dovresti vedere:
Su ogni evento quindi ci sarà un push nel dataLayer che avrà i parametri delle tre metriche:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
E il conseguente trasporto di questi Tag in Google Analytics
STEP 6 – Pubblica il contenitore
Se è tutto verificato, allora vuol dire che tutto funziona e non ti resta che pubblicare!
Clicca sul pulsante blu “Invia” per pubblicare le modifiche ufficialmente.
Prossimi step: realizza il tuo RUM
Ora che hai i dati in pancia a Google Analytics dovresti esportarli e realizzare un bel po’ di report e costruirti il tuo Real User Monitoring. Come dice la l’articolo ufficiale di web.dev
“For each of the above metrics, to ensure you’re hitting the recommended target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.”
Consiglia di dividere il desktop dal mobile e che ci sia un percentile del 75. Quindi bisogna aspettare un po’ di dati (qualche giorno) e poi fare un po’ di estrapolazioni. Siccome il buon GA non è che sia proprio il massimo, possiamo esportare questi dati in strumenti come Google Sheet, BigQuery e Data Studio.
Ecco un esempio:
Ti piacerebbe un corso che ti spiega come realizzarla e avere già dei template di Data Studio pronti all’uso?
Iscrivi al Corso SEGNI VITALI
Ho realizzato un corso ad hoc che spiega come gestire al meglio i Core Web Vitals con Google Tag Manager e creare dei report in Data Studio.
Sì, voglio iscrivermi al corso “Segni Vitali” e ottenere i report di Data Studio
Hai daomande? Scrivimele nei commenti 🙂
Link utili
- Definizione delle soglie delle metriche Core Web Vitals (in inglese)
- Iniziare a misurare Web Vitals (in inglese)
- Strumenti per misurare le Core Web Vitals (in inglese)
- Metodo alternativo per crearsi un report (in inglese)
Altre Guide che potrebbero interessarti
Advanced Guide: how to track Core Web Vitals with…
Glossario: Core Web Vitals e la SEO
Glossario: Che Cos'è il Real User Monitoring ovvero…
Guida Base: Come installare Google Analytics 4 con…
Il mio primo template ufficiale in Google Tag Manager su GA4
Guida Avanzata: Come conoscere la città di un utente…
Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!
- TERZA EDIZIONE ITALIANA aggiornata e espansa con 164 pagine in più
- Videocorso di 2 ore con tutti gli aggiornamenti su GTM IN OMAGGIO
- Bonus segreto del valore di 597 Euro IN OMAGGIO
NEWSLETTER
Iscriviti e rimani sempre aggiornato su Google Tag Manager
Articoli recenti
- News: Facebook vs iOS14. Gli impatti dell’AppTracking Transparency
- Glossario: Enhanced Measurement in Google Analytics 4
- Glossario: Data Stream (Stream di Dati) in Google Analytics 4
- Testimonianza: Corrado Di Scala e “l’importanza di uno strumento fondamentale come Google Tag Manager”
- Guida Base: Come installare Google Analytics 4 con Google Tag Manager
Che Guida Cerchi?
Commenti recenti
- Matteo Zambon su Guida su come tracciare l’E-Commerce con Google Analytics 4 in Google Tag Manager
- Matteo Zambon su Guida Base: Tracciare i Click sugli Outbound Link con Google Tag Manager
- Matteo Zambon su How to move FROM Enhanced Ecommerce tracking TO Google Analytics 4 ecommerce tracking with Google Tag Manager
- Matteo Zambon su Come abilitare Enhanced Ecommerce (per WooCommerce) con Google Tag Manager
- Matteo Zambon su Come abilitare Enhanced Ecommerce (per WooCommerce) con Google Tag Manager
roberto
30 12 2020
Matteo ho seguito la tua guida e raccolgo i web vitals su analytics, complimenti perchè è chiarissima, ma non ho capito nelle etichette dell’evento, che cosa rappresentano la coppia di numeri separati dal segno meno. Esempio per LCP mi ritrovo label event: 1609237564461-5126100210924. Ancora grazie
Matteo Zambon
31 12 2020
Ciao Roberto, ho aggiornato la guida perché la libreria ora è 1.0.1. (rivedi lo Step 1) Puoi verificare ora?
A presto!
roberto
04 01 2021
Grazie dell’update matteo, stavo facendo debug ora e con la preview di tagmanager attiva noto un fatto diverso rispetto alla precedente versione: ad ogni pageview risultano onfire eventi VITALS solo per LCP e CLS mentre non vedo il FID.
Domando: ho solo aggiornato il tag della libreria allo step 1, salvato e fatto preview. Ci sono altri passaggi che dovrei modificare? Inoltre, per ora non sono ancora andato live, può essere questo?
Matteo Zambon
07 01 2021
Ciao Roberto, no è solo la libreria che cambia. Personalmente io vedo FID come evento (lo vedi anche su questo sito di Tag Manager Italia).
Fammi sapere!
Alessandro
13 10 2020
Ciao Matteo!
Prima di tutto complimenti per la guida e grazie di averla condivisa.
Ho seguito passo passo la tua guida ma ho un problema lato analytics.
In evento “azione” da’ sempre “undefined” mentre nel debug di Tag Manager il valore è corretto.
E’ così o mi sono perso qualcosa?
Grazie mille!
Matteo Zambon
19 10 2020
Ciao Alessandro 🙂
Hai cannato qualcosa nel primo step, oppure nella variabile che popola l’action. Occhio alle maiuscole e minuscole 😉
A presto!
Max
11 06 2020
Vado subito a implementare tramite Andromeda, certo che se facessi una guida per la creazione di una dashboard su data studio sarebbe il massimo 😉
Matteo Zambon
11 06 2020
Ciao Max, è in arrivo! Nel Club ci sarà un video passo passo 🙂
A presto!