Tracking avanzato dei Web Vitals con Google Tag Manager

By Giugno 1, 2020Giugno 24th, 2020Search Engine Optimization

Quando un utente visita una pagina e interagisce con essa, la velocità e la stabilità con la quale essa risponde influenza l’esperienza utente. Ecco perché Google ha creato i Web Vitals, o ”segnali web essenziali”, una serie di metriche che misurano come gli utenti percepiscono l’esperienza di interazione con una pagina web. Sono così importanti che sono stati dichiarati esplicitamente segnale di ranking

Google ha messo a disposizione diversi strumenti, come PageSpeed Insights, nuovi report in Search Console e una dashboard DataStudio, il cui scopo è fornire informazioni “reali” sulle performance del sito web.
Questi strumenti sono basati sui dati di Chrome User Experience (CrUX) e, dunque, sulla misurazione tanto reale quanto parziale dei tuoi utenti, in quanto Google raccoglie i dati in CrUX solo per utenti che hanno lasciato specifici consensi e condizioni (sincronizzazione della cronologia di navigazione, nessuna passphrase di sincronizzazione e hanno abilitato il reporting delle statistiche di utilizzo).
Insomma, non il 100% dei tuoi utenti.

E se ti dicessi che esiste un modo per raccogliere le metriche Web Vitals di ogni singolo utente che visita il tuo sito web?
In questo articolo ti spiego come realizzare tecnicamente il tracking avanzato dei Web Vitals con Google Tag Manager e come utilizzare i dati estrapolati per effettuare un analisi più granulare rispetto a Search Console, più precisa rispetto ai dati CrUX ed intersecabile con altre dimensioni.

Cosa sono i Core Web Vitals? Un veloce ripasso

I Core Web Vitals sono 3 metriche relative all’esperienza utente: Largest Contentful Paint (LCP), First Input Delay (FID), Cumlative Layout Shift (CLS).

Il Largest Contentful Paint (LCP) è il tempo di rendering dell’elemento più grande visibile all’interno della viewport (compreso fra <img>, <video>, elementi in background caricati via url() e block-elements). Un LCP basso aiuta a rassicurare l’utente che la pagina è utile.

Il First Input Delay (FID), è il tempo trascorso tra la prima interazione di un utente con la tua pagina (clic su un link, tocco di un pulsante e così via) e il momento in cui il browser risponde effettivamente a quell’interazione. Un FID basso assicura che la pagina sia usabile.

Il Cumulative Layout Shift (CLS) misura i cambiamenti di layout inattesi che si verificano durante l’intera visita alla pagina. Un CLS basso aiuta a garantire che la pagina sia piacevole.

Google ha anche assegnato dei valori precisi che identificano un’esperienza povera, che ha bisogno di miglioramenti o buona per ogni Core Web Vitals. Ho riassunto questi valori in una tabella.

Metrics Scope Poor Needs improvement Good
LCP (Largest Contentful Paint) Loading 4.0s 2.5~4.0s 2.5s
FID (First Input Delay) Interactivity 300ms 100ms~300ms 100ms
CLS (Cumulative Layout Shift) Visual stability 0.25 0.1-0.25 0.1

Google ha anche messo a disposizione una nuova libreria Javascript dedicata ai Web vitals e delle API per permette di misurare ogni Core web vitals e raccogliere dati degli utenti reali.

Nel prossimi capitolo vedremo come implementare questa libreria con Tag manager per raccogliere i dati in Google Analytics.

In pratica

Il primo passo è quello di creare un nuovo Tag custom HTML in Google Tag Manager (Tag > Nuovo > HTML personalizzato) ed inserire il codice che riporto di seguito.

Questo codice non farà altro che caricare la libreria web-vitals tramite una cdn, chiamare l’API e creare un push nel data layer con le metriche relative ai Core Web Vitals. Sei libero di rendere più efficiente il caricamento di questa libreria, per lo scopo di questo articolo la caricherò direttamente nel tag.


<script defer src="https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js"></script>
<script>

function sendToGTM(vital, delta, id) {
  // il datalayer deve essere già stato inizializzato
  // il CLS viene moltiplicato per 1000 per una precisione maggiore, se lo desideri puoi eliminare o rivedere questa moltiplicazione
  delta = vital.delta;
  if (vital.name ==='CLS'){
    delta = delta *1000;
  }
  dataLayer.push({
    event: 'web-vitals',
    event_category: 'Web Vitals',
    event_action: vital.name,
    // le metriche di Google Analytics devono essere valori interi, dunque il valore è arrotondato
    event_value: Math.round(delta),
    // Il valore id sarà unico per la page load corrente, dunque quando mandi più valori dalla stessa pagina (es. per il CLS) puoi raggupparli tramite la dimensione eventLabel
    event_label: vital.id,
  });
}

webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);

</script>

Crea ora delle variabili livello dati che utilizzeremo per immagazzinare le metriche Core Web Vitals. Da Google Tag Manager vai su Variabili > Nuova > Variabili di livello dati. Ad ogni variabile dai un distinto Data Layer Variable name come vedi in figura.

Queste variabili si popoleranno con i valori contenuti nel push effettuato dal tag custom HTML creato nel punto precedente.
Ecco un esempio di valori che verranno immagazzinati dalle variabili:

  • ad Event action verrà assegnata una stringa contenente la tipologia di metrica Core web vitals, in questo caso LCP (Large contentful paint)
  • ad Event label verrà assegnato un ID relativo all’interazione con quella determinata pagina
  • ad Event value verrà assegnato un valore numerico in millisecondi
  • ad Event category sarà infine la categoria fissa per individuare un evento relativo ai web vitals.

Crea ora un tag evento da Tag > Nuovo > Google Analytics: Universal Analytics. La tipologia di evento dovrà essere Event, mentre a Category, Action, Label e Value assegnerai le variabili di livello dati create nel punto precedente. Ricorda di impostare questo evento come Non-interaction True.

Crea un trigger custom event con Event name web-vitals.

Pubblica queste modifiche.

75° percentile

Una volta che avrai raccolto almeno 24 ore di dati, potrai iniziare ad estrapolarli e visualizzarli. Purtroppo non riuscirai a fare un’analisi completa direttamente in Analytics, in quanto GA mostra dati aggregati e questa volta abbiamo la necessità di lavorare con dati granulari.

Questo perché quando si analizzano dati RUM (real user monitoring) è importante prestare attenzione agli estremi distribuzione. Spesso infatti il comportamento degli utenti e dei device varia molto e dunque l’utilizzo della media può facilmente mascherare i comportamenti reali.

Per quanto riguarda i Web Vitals, Google stesso utilizza la percentuale di esperienze “buone” corrispondente al 75° percentile, piuttosto che statistiche come mediane o medie. Il 75% delle pagine visitate dovrebbe dunque soddisfare la soglia “buona” per ciascuna metrica.

Per questo avremmo bisogno di disaggregare i dati di Analytics, estraendo tutti gli eventi legati ai Web Vitals e calcolare il 75° percentile.

Vediamo come.

Estrazione

Per esportare i singoli eventi, ho scelto l’addon Analytics per Google sheets. Puoi utilizzare anche strumenti più avanzati, come BigQuery, nel caso tu abbia un account Google Analytics 360.

Per effettuare l’estrazione in sheets segui questi passi:

  1. Crea un nuovo sheet di Google.
  2. Installa l’add on.
  3. Configura l’estrazione come nella figura sotto, collegando lo sheet alla vista analytics desiderata.
  4. Estendi il limite di visualizzazione delle righe e imposta la data d’interesse.
  5. Esegui il report.

A questo punto dovresti ritrovarti con una serie di righe, una per singolo evento.

Collegamento a Data Studio

È ora di creare un nuovo progetto in Data Studio per analizzare i dati estratti. Per farlo segui questi passi:

  1. Crea un nuovo progetto in Data Studio.
  2. Crea una nuova sorgente di dati di tipologia Fogli Google.
  3. Assicurati di includere il giusto intervallo (dalla prima riga all’ultima riga contenente gli eventi nel tuo sheets).

Aggiungi alla fonte la metrica calcolata 75° percentile, utilizzando la formula PERCENTILE(Event value, 75). Infine, aggiungi la fonte al report.

Analisi dei Core Web Vitals?
Sii creativo

Potrai ora utilizzare la fonte per visualizzare i dati relativi ai Web Vitals nella maniera che più ritieni utile. Io li ho visualizzati, nell’esempio che segue, in una semplice tabella con focus a livello di pagina e in 3 indicatori che mostrano la performance generale di tutto il sito web.

In questo modo è emerso che l’esperienza del sito analizzato è globalmente peggiore da mobile e, in maniera particolare, si verificano layout shift più importanti rispetto che da desktop

Analizzando i dati relativi ai CLS a livello pagina, ho potuto notare che una delle pagine più importanti del sito in esame (un configuratore dove viene abbondantemente utilizzato Javascript per manipolare il front end) ha un pessimo punteggio CLS.

Potrebbe dunque essere corretta una revisione di questa sezione in ottica di facilitare l’interazione, specialmente da mobile.

E i report di Google Search Console cosa dicono? Ad oggi Search Console non segnala problemi in questa specifica pagina nella sua sezione dedicata ai Web Vitals, anche se potrebbe essere solo una questione di tempo prima che Google segnali a sua volta questo problema nei suoi report. 

In questo articolo abbiamo dunque capito le potenzialità di tracciare in maniera avanzata i Web Vitals tramite Google Tag Manager.

Se ti è servita questa guida, lascia un commento qui sotto!

Leave a Reply

Leave a Reply