[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 dei 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[email protected]/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 seleziona 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à in 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/[email protected]/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/[email protected]/

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 4 – Creare il Tag di Google Analytics e configurarlo per i Core 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 domande? 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)