Dopo un lungo periodo di guide su “come prepararsi per l’aggiornamento di Core Web Vitals”, \u00e8 arrivato il momento di tracciare e monitorare l’effetto dell’aggiornamento dell’algoritmo di Page Experience.<\/p>\n\n\n\n
Prima di immergerci nella nostra guida passo-passo sul tracciamento e monitoraggio dei CWV<\/strong>, ricapitoliamo brevemente cosa sono i Core Web Vital e perch\u00e9 \u00e8 importante monitorare questi ultimi per scopi sia di SEO che di UX.<\/p>\n\n\n\n Come gi\u00e0 spiegato nel nostro precedente blog, “Come Prepararsi per l\u2019Aggiornamento dell\u2019Algoritmo Google 2021: 5 Suggerimenti<\/span><\/a>” (una lettura suggerita se ritieni di non essere ancora pronto), i Core Web Vitals sono metriche che segnano<\/strong>:<\/p>\n\n\n\n Questi aspetti, se non gestiti correttamente, potrebbero influenzare fortemente (in modo negativo) l’esperienza dell’utente. Questo \u00e8 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.<\/p>\n\n\n\n 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<\/a><\/p>\n\n\n\n \u2014 Google Search Central (@googlesearchc) June 15, 2021<\/a><\/p>\n<\/blockquote>\n\n\n\n Con questo aggiornamento, i Core Web Vitals sono diventati fattori di classificazione ufficiali<\/strong>, insieme ad altri segnali gi\u00e0 esistenti relativi alla UX. Questa notizia ha dato una scossa all’intero mondo digitale. Risolvere e ottimizzare la velocit\u00e0 di caricamento della pagina, l’interattivit\u00e0 e i problemi di stabilit\u00e0 visiva \u00e8 diventata una priorit\u00e0 per la maggior parte dei proprietari di siti Web, esperti SEO e UX designer.<\/p>\n\n\n\n Ecco perch\u00e9, 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\u00e0. Continua a leggere la nostra guida per iniziare!<\/p>\n\n\n\n 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\u00e9 tramite filtri specifici nel report sul Rendimento di Ricerca.<\/p>\n\n\n\n Ma Google Search Console non \u00e8 l’unico strumento che hai per monitorare. Infatti, potresti anche impostare una dashboard dedicata di Google Data Studio in cima a Chrome UX Report<\/span><\/a>. Anche Lighthouse Audit<\/span><\/a> \u00e8 molto utile per l’analisi di singole pagine.<\/p>\n\n\n\n Tutti gli strumenti di monitoraggio sopra menzionati sono efficaci e utili, ma, in alcuni casi, potrebbero non offrire l’accuratezza, la riproducibilit\u00e0 e la granularit\u00e0 di cui voi o i vostri clienti potreste aver bisogno, fornendo solo un punteggio di alto livello delle prestazioni dei vostri CWV.<\/p>\n\n\n\n Ecco perch\u00e9, 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<\/strong> per procedere sono Google Analytics<\/strong> e Tag Manager<\/strong>.<\/p>\n\n\n\n Prima di immergerci nella nostra guida, ringraziamo Simo Ahava<\/span><\/a> e Matteo Zambon di Tagmanageritalia<\/span><\/a>. Il loro lavoro \u00e8 stato di grande ispirazione per la stesura di questa guida.<\/p>\n\n\n\n Se ti piace armeggiare con gli strumenti digitali, configurare tutto il necessario nel tuo Tag Manager Container sar\u00e0 un gioco da ragazzi. In caso contrario, non preoccuparti, ti guideremo attraverso l’intero processo.<\/p>\n\n\n\n Ecco i 4 passaggi che devi eseguire in GTM per iniziare a inviare i dati Core Web Vitals ad Analytics:<\/p>\n\n\n\n Iniziamo.<\/p>\n\n\n\n Prima di tutto, devi configurare un nuovo tag, ovvero un segmento di codice personalizzato che ti aiuter\u00e0 a integrare e gestire le API<\/strong> (Application Programming Interface, ovvero interfacce di programmazione) di Web Vitals nel tuo account GTM.<\/p>\n\n\n\n Il tag personalizzato che imposteremo si basa su una versione modificata di uno script di GitHub<\/span><\/a> sviluppato specificamente per inviare eventi relativi ai Web Vitals nel livello dati. Lo script che ti forniamo \u00e8 stato curato e personalizzato da Simen Hansen<\/span><\/a> per TagManagerItalia.<\/p>\n\n\n\n Poich\u00e9 stiamo partendo da uno script gi\u00e0 pronto, il lavoro che devi fare per configurare il tuo tag Core Web Vitals personalizzato \u00e8 abbastanza semplice.<\/p>\n\n\n\n Ecco i passaggi necessari:<\/p>\n\n\n\n 1. Accedi all’interfaccia utente di GTM e fai clic su “Aggiungi un nuovo tag” <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 2. Assegna il nome che preferisci al nuovo tag (es. \u201cWeb Vitals Personalizzati\u201d) e, in \u201cConfigurazione tag\u201d, seleziona il tipo di tag \u201cHTML personalizzato\u201d<\/p>\n\n\n\n 3. Copia e incolla lo script modificato di GitHub nella casella di testo HTML. Ecco di seguito lo script per la tua comodit\u00e0:<\/p>\n\n\n\n Importante: come puoi vedere, lo script fa riferimento alla libreria UNPKG Library<\/strong><\/span><\/a>, l’ultima versione del 06.21 \u00e8 la 2.0.1. Ti suggeriamo di fare una verifica e di aggiornarlo <\/strong>in caso di ulteriori variazioni e miglioramenti.<\/p>\n\n\n\n 4. Scorri verso il basso fino alla sezione \u201cAttivazione\u201d e scegli l’attivatore “Tutte le pagine” per attivare il tag.<\/p>\n\n\n\n 5. Salva il tuo nuovo tag e pubblicalo.<\/p>\n\n\n\n OPPURE NO!<\/strong><\/p>\n\n\n\n Se preferisci risparmiare tempo o non hai familiarit\u00e0 con Google Tag Manager, puoi semplicemente saltare questo passaggio e utilizzare il Custom Tag Template<\/span><\/a> di Simo Ahava. Questo blog dedicato<\/span><\/a> ti aiuterebbe a configurarlo con facilit\u00e0.<\/p>\n\n\n\n Importante: come spiegato dall’autore, questo modello pronto all’uso recuperer\u00e0 sempre l’ultima versione della libreria web-vitals e si occuper\u00e0 sempre di aggiornarla e correggerla quando necessario.<\/p>\n\n\n\n I trigger sono un elemento essenziale in GTM. Sono event listeners<\/strong> 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, \u00e8 necessario impostare un trigger dedicato.<\/p>\n\n\n\n Come per il Tag HTML, configurare un nuovo trigger \u00e8 abbastanza semplice.<\/p>\n\n\n\n Il tuo evento personalizzato \u00e8 ora pronto.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Per il nostro scopo, \u00e8 necessario creare 4 diverse variabili per i seguenti valori:<\/p>\n\n\n\n Configurarli \u00e8 abbastanza semplice, dovrai solo:<\/p>\n\n\n\n 1. Vai alla scheda \u201cVariabili\u201d e fai clic su \u201cNuovo\u201d nella sezione \u201cVariabili definite dall’utente\u201d <\/p>\n\n\n\n 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\u00ec via.<\/p>\n\n\n\n 3. Quindi, scegli il tipo di \u201cVariabile di livello dati\u201d e assegna un nome in base all’evento, ad es. event_category.<\/p>\n\n\n\n Seleziona la versione 2 e salva.<\/p>\n\n\n\n Puoi seguire la stessa procedura per ogni variabile che necessiti di creare.<\/p>\n\n\n\n Ora \u00e8 il momento di configurare un tag aggiuntivo per l’attivazione degli eventi in Analytics.<\/p>\n\n\n\n La creazione e la configurazione del tag \u00e8 una procedura in 5 passaggi.<\/p>\n\n\n\n 1. Torna alla sezione Tag e clicca su \u201cNuovo\u201d. <\/p>\n\n\n\n 2. Nella casella \u201cConfigurazione tag\u201d, imposta “GA – Evento – Web Vitals” come nome e seleziona il tipo di tag “Google Analytics”. <\/p>\n\n\n\n 3. Assicurati di impostare tutti i campi necessari secondo le seguenti immagini:<\/p>\n\n\n\n Per ogni parametro ti baster\u00e0 selezionare le relative variabili precedentemente create.<\/p>\n\n\n\n 4. Nelle Impostazioni di Google Analytics, seleziona la variabile di Google Analytics e \u201cAbilita l’override delle impostazioni in questo tag\u201d. Inserisci il tuo ID di Google Analytics nel campo ID di monitoraggio.<\/p>\n\n\n\n Quindi, in “Altre impostazioni” > “Campi da impostare”, inserisci il campo di trasporto per il beacon<\/span><\/a> (non necessario per GA4).<\/p>\n\n\n\n 5. Scorri verso il basso fino alla sezione \u201cAttivatore\u201d e seleziona il trigger che abbiamo impostato nel secondo passaggio<\/p>\n\n\n\n Se hai eseguito correttamente tutti i passaggi precedenti, la configurazione di GTM \u00e8 ora completa. L’ultima ma pi\u00f9 importante cosa che devi fare \u00e8 controllare il corretto funzionamento del tuo tag personalizzato prima di implementarlo.<\/p>\n\n\n\n Google Tag Manager ti mette a disposizione una modalit\u00e0 \u201cAnteprima\u201d accessibile tramite il pulsante dedicato nell’interfaccia utente principale. Una volta in modalit\u00e0 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 \u00e8 stato configurato correttamente, dovresti vedere una casella di riepilogo nella pagina che conferma l’attivazione dell’evento “web-vitals”.<\/p>\n\n\n\n Idealmente, gli eventi elencati dovrebbero essere tre. Tuttavia, a volte, possono essere misurate solo due delle tre metriche. In altri casi, potresti visualizzare pi\u00f9 di tre eventi. Il nostro suggerimento \u00e8 di lasciare che la pagina si carichi completamente e interagisca un po’ prima di tornare alla finestra \u201cTag Assistant\u201d.<\/p>\n\n\n\n Ecco un esempio degli eventi che dovresti vedere nel riepilogo:<\/p>\n\n\n\n (Fonte<\/span><\/a>)<\/p>\n\n\n\n Fai clic sull’evento e dai un’occhiata alla visualizzazione della chiamata API. Dovresti ottenere qualcosa del genere:<\/p>\n\n\n\n (Fonte<\/span><\/a>)<\/p>\n\n\n\n Dopo aver verificato la corretta funzionalit\u00e0 del tag, sei pronto per pubblicarlo.<\/p>\n\n\n\n Ora che il grosso del lavoro \u00e8 stato svolto, \u00e8 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.<\/p>\n\n\n\n Per accedere ai dati di alto livello<\/strong>, vai su \u201cComportamento<\/strong>\u201d > \u201cEventi<\/strong>\u201d. L\u00ec troverai la categoria di eventi Web Vitals, che include tutti gli eventi relativi a CWV.<\/p>\n\n\n\n (Fonte<\/span><\/a>)<\/p>\n\n\n\n In questo report, non sarai in grado di vedere le metriche medie relative a pagine specifiche<\/strong>. In effetti, per farlo, dovresti andare su Comportamento<\/strong>> Eventi<\/strong>> Pagine<\/strong>, dove troverai un rapporto approfondito che mostra tutti gli eventi per pagina inclusi gli eventi totali, il valore dell’evento e il valore medio.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Ottimo lavoro! Ora che sei qui, hai tutti gli strumenti necessari per monitorare i tuoi CWV a qualsiasi livello. Questo ti sar\u00e0 di grande aiuto per tenere traccia delle pagine che richiedono ulteriori miglioramento.<\/p>\n\n\n\n Se questa implementazione ti \u00e8 sembrata troppo complicata, contattaci<\/span><\/a>. I nostri esperti di analisi dei dati<\/strong> saranno lieti di aiutarti con la configurazione di Google Analytics e Google Tag Manager.<\/p>\n<\/span>Perch\u00e9 dovresti monitorare le prestazioni di Core Web Vitals?<\/span><\/h2>\n\n\n\n
\n
\n
\n
<\/span>Come tenere traccia dei Core Web Vitals: \u201cStrumenti pronti all’uso\u201d<\/span><\/h2>\n\n\n\n
<\/span>Tracciamento dei principali Web Vitals con Google Tag Manager: \u201cuna guida passo-passo\u201d<\/span><\/h2>\n\n\n\n
\n
1. Configurazione di un Tag HTML Personalizzato – OPPURE NO! <\/strong><\/h3>\n\n\n\n
2. Configurazione di un Trigger di Evento Personalizzato<\/strong><\/h3>\n\n\n\n
\n
3. Impostazione delle Variabili del Livello Dati<\/strong><\/h3>\n\n\n\n
\n
4. Creazione di un tag evento di Universal Analytics<\/strong><\/h3>\n\n\n\n
5. Funzionamento del Tag: \u00e8 ora di controllare<\/strong><\/h3>\n\n\n\n
<\/span>Come monitorare i Core Web Vitals in Analytics<\/strong><\/span><\/h2>\n\n\n\n
<\/span>Conclusione<\/strong><\/span><\/h2>\n\n\n\n