Dopo un lungo periodo di guide su “come prepararsi per l’aggiornamento di Core Web Vitals”, è arrivato il momento di tracciare e monitorare l’effetto dell’aggiornamento dell’algoritmo di Page Experience.
Prima di immergerci nella nostra guida passo-passo sul tracciamento e monitoraggio dei CWV, ricapitoliamo brevemente cosa sono i Core Web Vital e perché è importante monitorare questi ultimi per scopi sia di SEO che di UX.
Perché dovresti monitorare le prestazioni di Core Web Vitals?
Come già spiegato nel nostro precedente blog, “Come Prepararsi per l’Aggiornamento dell’Algoritmo Google 2021: 5 Suggerimenti” (una lettura suggerita se ritieni di non essere ancora pronto), i Core Web Vitals sono metriche che segnano:
- Velocità di caricamento della pagina (Large Contentful Paint).
- Interattività della pagina (First Input Delay).
- Stabilità visiva (Cumulative Layout Shift).
Questi aspetti, se non gestiti correttamente, potrebbero influenzare fortemente (in modo negativo) l’esperienza dell’utente. Questo è il motivo per cui sono stati inclusi da Google nel recente aggiornamento di Page Experience, iniziato a giugno 2021 e completato entro la fine di agosto 2021.
The page experience update is now slowly rolling out (Top Stories will begin using this new signal by Thursday). It will be complete by the end of August 2021. More here: https://t.co/kDwhhOYklK
— Google Search Central (@googlesearchc) June 15, 2021
Con questo aggiornamento, i Core Web Vitals sono diventati fattori di classificazione ufficiali, insieme ad altri segnali già esistenti relativi alla UX. Questa notizia ha dato una scossa all’intero mondo digitale. Risolvere e ottimizzare la velocità di caricamento della pagina, l’interattività e i problemi di stabilità visiva è diventata una priorità per la maggior parte dei proprietari di siti Web, esperti SEO e UX designer.
Ecco perché, dopo aver implementato la tua migliore strategia per superare il test Core Web Vitals, dovresti iniziare a tracciare e monitorare i tuoi progressi e intervenire quando richiesto. Proprio per questo, gli approfondimenti finali ti aiuteranno a definire le correzioni necessarie per migliorare le prestazioni SEO, l’esperienza utente e a far giudicare a Google il tuo sito web come di qualità. Continua a leggere la nostra guida per iniziare!
- Come tenere traccia dei Core Web Vitals: “Strumenti pronti all’uso”
- Tracciamento dei principali Web Vitals con Google Tag Manager: “una guida passo-passo”
- Come monitorare i Core Web Vitals in Analytics
Come tenere traccia dei Core Web Vitals: “Strumenti pronti all’uso”
Al momento in cui scriviamo, Google consente di analizzare e revisionare i Core Web Vitals su Search Console tramite i report di Esperienza sulle Pagine e di Core Web Vitals, nonché tramite filtri specifici nel report sul Rendimento di Ricerca.
Ma Google Search Console non è l’unico strumento che hai per monitorare. Infatti, potresti anche impostare una dashboard dedicata di Google Data Studio in cima a Chrome UX Report. Anche Lighthouse Audit è molto utile per l’analisi di singole pagine.
Tutti gli strumenti di monitoraggio sopra menzionati sono efficaci e utili, ma, in alcuni casi, potrebbero non offrire l’accuratezza, la riproducibilità e la granularità di cui voi o i vostri clienti potreste aver bisogno, fornendo solo un punteggio di alto livello delle prestazioni dei vostri CWV.
Ecco perché, in questo blog, suggeriamo un approccio diverso volto a monitorare i Core Web Vitals a livello di sito o di pagina specifica in Analytics. Gli strumenti necessari per procedere sono Google Analytics e Tag Manager.
Prima di immergerci nella nostra guida, ringraziamo Simo Ahava e Matteo Zambon di Tagmanageritalia. Il loro lavoro è stato di grande ispirazione per la stesura di questa guida.
Tracciamento dei principali Web Vitals con Google Tag Manager: “una guida passo-passo”
Se ti piace armeggiare con gli strumenti digitali, configurare tutto il necessario nel tuo Tag Manager Container sarà un gioco da ragazzi. In caso contrario, non preoccuparti, ti guideremo attraverso l’intero processo.
Ecco i 4 passaggi che devi eseguire in GTM per iniziare a inviare i dati Core Web Vitals ad Analytics:
- Configurazione di un Tag HTML Personalizzato – OPPURE NO!
- Configurazione di un Trigger di Evento Personalizzato
- Impostazione delle Variabili del Livello Dati
- Creazione di un tag evento di Universal Analytics
Iniziamo.
1. Configurazione di un Tag HTML Personalizzato – OPPURE NO!
Prima di tutto, devi configurare un nuovo tag, ovvero un segmento di codice personalizzato che ti aiuterà a integrare e gestire le API (Application Programming Interface, ovvero interfacce di programmazione) di Web Vitals nel tuo account GTM.
Il tag personalizzato che imposteremo si basa su una versione modificata di uno script di GitHub sviluppato specificamente per inviare eventi relativi ai Web Vitals nel livello dati. Lo script che ti forniamo è stato curato e personalizzato da Simen Hansen per TagManagerItalia.
Poiché stiamo partendo da uno script già pronto, il lavoro che devi fare per configurare il tuo tag Core Web Vitals personalizzato è abbastanza semplice.
Ecco i passaggi necessari:
- Accedi all’interfaccia utente di GTM e fai clic su “Aggiungi un nuovo tag”
Since we are starting from a ready-made script, the work you need to do to configure your custom Core Web Vitals tag is quite straightforward.
2. Assegna il nome che preferisci al nuovo tag (es. “Web Vitals Personalizzati”) e, in “Configurazione tag”, seleziona il tipo di tag “HTML personalizzato”
3. Copia e incolla lo script modificato di GitHub nella casella di testo HTML. Ecco di seguito lo script per la tua comodità:
Importante: come puoi vedere, lo script fa riferimento alla libreria UNPKG Library, l’ultima versione del 06.21 è la 2.0.1. Ti suggeriamo di fare una verifica e di aggiornarlo in caso di ulteriori variazioni e miglioramenti.
4. Scorri verso il basso fino alla sezione “Attivazione” e scegli l’attivatore “Tutte le pagine” per attivare il tag.
5. Salva il tuo nuovo tag e pubblicalo.
OPPURE NO!
Se preferisci risparmiare tempo o non hai familiarità con Google Tag Manager, puoi semplicemente saltare questo passaggio e utilizzare il Custom Tag Template di Simo Ahava. Questo blog dedicato ti aiuterebbe a configurarlo con facilità.
Importante: come spiegato dall’autore, questo modello pronto all’uso recupererà sempre l’ultima versione della libreria web-vitals e si occuperà sempre di aggiornarla e correggerla quando necessario.
2. Configurazione di un Trigger di Evento Personalizzato
I trigger sono un elemento essenziale in GTM. Sono event listeners sviluppati per ascoltare eventi specifici e dire al tag quando attivare o bloccare. Senza trigger, i tag sarebbero inutili. Pertanto, dopo aver creato il tag, è necessario impostare un trigger dedicato.
Come per il Tag HTML, configurare un nuovo trigger è abbastanza semplice.
- Vai alle sezioni Trigger e fai clic sul pulsante “Nuovo”.
- Successivamente, avvia la configurazione inserendo il nome del trigger, ad es. Web Vitals.
- In Configurazione trigger, seleziona il tipo di trigger “Evento personalizzato”, in “Altro” e imposta “web-vitals” come nome dell’evento.
4. Salva
Il tuo evento personalizzato è ora pronto.
3. Impostazione delle Variabili del Livello Dati
Dopo aver creato un tag HTML personalizzato e il relativo attivatore, ora sei pronto per impostare le variabili del livello dati. Questi oggetti sono dei contenitori che puoi riempire con tutte le informazioni (eventi, variabili) che vuoi passare a GTM. Sono composti da coppie di chiavi e valori, che verrebbero utilizzati per impostare i trigger.
Ogni variabile viene utilizzata per spingere la valuta dell’evento al tag. Pertanto, il numero di variabili dipende dal numero di eventi che si desidera monitorare.
Per il nostro scopo, è necessario creare 4 diverse variabili per i seguenti valori:
- event_category
- event_action
- event_value
- event_label
Configurarli è abbastanza semplice, dovrai solo:
- Vai alla scheda “Variabili” e fai clic su “Nuovo” nella sezione “Variabili definite dall’utente”
2. Quindi, rinomina la variabile a seconda dell’evento che stai per monitorare. Ad esempio, potresti chiamarlo: Variabile – event_category, Variabile – event_action e così via.
3. Quindi, scegli il tipo di “Variabile di livello dati” e assegna un nome in base all’evento, ad es. event_category.
Seleziona la versione 2 e salva.
Puoi seguire la stessa procedura per ogni variabile che necessiti di creare.
4.Creazione di un tag evento di Universal Analytics
Ora è il momento di configurare un tag aggiuntivo per l’attivazione degli eventi in Analytics.
La creazione e la configurazione del tag è una procedura in 5 passaggi.
- Torna alla sezione Tag e clicca su “Nuovo”.
- Nella casella “Configurazione tag”, imposta “GA – Evento – Web Vitals” come nome e seleziona il tipo di tag “Google Analytics”.
3. Assicurati di impostare tutti i campi necessari secondo le seguenti immagini:
Per ogni parametro ti basterà selezionare le relative variabili precedentemente create.
4. Nelle Impostazioni di Google Analytics, seleziona la variabile di Google Analytics e “Abilita l’override delle impostazioni in questo tag”. Inserisci il tuo ID di Google Analytics nel campo ID di monitoraggio.
Quindi, in “Altre impostazioni” > “Campi da impostare”, inserisci il campo di trasporto per il beacon (non necessario per GA4).
5. Scorri verso il basso fino alla sezione “Attivatore” e seleziona il trigger che abbiamo impostato nel secondo passaggio
5. Funzionamento del Tag: è ora di controllare
Se hai eseguito correttamente tutti i passaggi precedenti, la configurazione di GTM è ora completa. L’ultima ma più importante cosa che devi fare è controllare il corretto funzionamento del tuo tag personalizzato prima di implementarlo.
Google Tag Manager ti mette a disposizione una modalità “Anteprima” accessibile tramite il pulsante dedicato nell’interfaccia utente principale. Una volta in modalità anteprima, aggiorna la pagina, lascia che si carichi completamente e poi, naviga un po’ nel sito e interagisci con le pagine per raccogliere alcune misurazioni. Se il tuo tag è stato configurato correttamente, dovresti vedere una casella di riepilogo nella pagina che conferma l’attivazione dell’evento “web-vitals”.
Idealmente, gli eventi elencati dovrebbero essere tre. Tuttavia, a volte, possono essere misurate solo due delle tre metriche. In altri casi, potresti visualizzare più di tre eventi. Il nostro suggerimento è di lasciare che la pagina si carichi completamente e interagisca un po’ prima di tornare alla finestra “Tag Assistant”.
Ecco un esempio degli eventi che dovresti vedere nel riepilogo:
(Fonte)
Fai clic sull’evento e dai un’occhiata alla visualizzazione della chiamata API. Dovresti ottenere qualcosa del genere:
(Fonte)
Dopo aver verificato la corretta funzionalità del tag, sei pronto per pubblicarlo.
Come monitorare i Core Web Vitals in Analytics
Ora che il grosso del lavoro è stato svolto, è tempo di raccogliere i frutti. Il tuo tag personalizzato e gli eventi invieranno i dati raccolti in Google Analytics, permettendoti di tenere traccia delle prestazioni dei tuoi CWV.
Per accedere ai dati di alto livello, vai su “Comportamento” > “Eventi”. Lì troverai la categoria di eventi Web Vitals, che include tutti gli eventi relativi a CWV.
(Fonte)
In questo report, non sarai in grado di vedere le metriche medie relative a pagine specifiche. In effetti, per farlo, dovresti andare su Comportamento> Eventi> Pagine, dove troverai un rapporto approfondito che mostra tutti gli eventi per pagina inclusi gli eventi totali, il valore dell’evento e il valore medio.
Con l’ausilio di dimensioni secondarie (es. Event Action) e filtri (es. Event Action > Equals > CLS) vedrai tutti i dati medi di ogni evento per ogni singola pagina.
Conclusione
Ottimo lavoro! Ora che sei qui, hai tutti gli strumenti necessari per monitorare i tuoi CWV a qualsiasi livello. Questo ti sarà di grande aiuto per tenere traccia delle pagine che richiedono ulteriori miglioramento.
Se questa implementazione ti è sembrata troppo complicata, contattaci. I nostri esperti di analisi dei dati saranno lieti di aiutarti con la configurazione di Google Analytics e Google Tag Manager.
