Misura i dati dei campi relativi ai Core Web Vitals con le metriche relative agli annunci

1. Prima di iniziare

In questo codelab, scoprirai come misurare i Core Web Vitals con un modello di tag Google Tag Manager (GTM) predefinito e come inviare i dati a una proprietà Google Analytics 4 (GA4). Scoprirai anche come estrarre i dati da Google Ad Manager e Google AdSense in GA4, per correlare i dati sul campo dei Core Web Vitals e le metriche sul rendimento degli annunci con una dashboard di Looker Studio predefinita.

In questo lab proverai a:

• Importare e configurare un tag nel contenitore di Google Tag Manager.
• Misurare i Core Web Vitals della pagina web in GA4.
• Configurare un tag evento GA4 in Google Tag Manager.
• Esplorare i dati dei Segnali web in dataLayer e nei report di GA4.
• Collegare la proprietà GA4 a Google Ad Manager e Google AdSense.
• Correlare i Core Web Vitals e le entrate pubblicitarie tramite una dashboard di Looker Studio.

Che cosa ti serve

• Un account Google Analytics e una proprietà web GA4 con accesso come editor.
• Un account Google Tag Manager e un contenitore web con diritti di pubblicazione.
• Una rete Google Ad Manager e/o un account Google AdSense con accesso amministrativo.
• Un account Looker Studio.

2. Aggiungere il modello di tag da GitHub a GTM

La misurazione dei Core Web Vitals tramite un modello di tag GTM si basa sulla web-vitals libreria. Innanzitutto, scaricheremo il modello di tag GTM.

1. Apri il file template.tpl
2. Scarica il file sul computer

Ora, vai al tuo account Google Tag Manager.

1. Apri il contenitore web.
2. Crea un nuovo workspace e inserisci un nome (ad es. "Misurazione dei Core Web Vitals").
3. Vai a "Modelli".
4. Nella sezione "Modelli di tag", fai clic sul pulsante "Nuovo".

5. Fai clic sul menu Altre azioni e seleziona Importa.

6. Seleziona il file TPL scaricato in precedenza dal computer.
7. Fai clic sul pulsante "Salva".

Hai aggiunto il modello di tag al contenitore di Google Tag Manager.

3. Configurare il tag Web Vitals

1. Nel workspace di Google Tag Manager, vai a "Tag".
2. Aggiungi il tag Segnali web facendo clic su "Nuovo", poi su "Configurazione tag" e scegli il tag "Segnali web" dalla sezione "Personalizzato".
3. Il passaggio successivo consiste nel configurare le diverse impostazioni. Tutte le impostazioni sono spiegate nel repository GitHub. Per il funzionamento di questo codelab e della dashboard finale, sono sufficienti le seguenti impostazioni.

4. Applica uno degli attivatori di visualizzazione di pagina, ad es. l'attivatore "Tutte le pagine".
5. Se necessario, aggiungi anche le eccezioni di attivazione.
6. Assegna al tag il nome "Core Web Vitals - Tutte le pagine" e salvalo.

4. Esplorare i dati dei Segnali web in dataLayer

Per vedere il tag in azione, passa alla modalità di anteprima di Google Tag Manager. Si aprirà Tag Assistant, che ti chiederà un URL per visualizzare l'anteprima e il debug della configurazione. Fornisci l'URL di una pagina con il contenitore di Google Tag Manager implementato e fai clic su "Connetti". Si aprirà una scheda separata con l'URL fornito.

1. Interagisci con la pagina scorrendo e facendo clic sugli elementi o sugli spazi vuoti.
2. Poi torna alla scheda con Tag Assistant e alla modalità di anteprima di Google Tag Manager.
3. A sinistra vedrai i diversi eventi inseriti in dataLayer.
4. Per prima cosa, controlla se il tag Web Vitals è stato attivato sull'attivatore di visualizzazione di pagina scelto.

5. Dovresti vedere anche tre eventi "web_vitals", ognuno dei quali rappresenta un Segnale web essenziale: LCP, INP e CLS.

6. Fai clic sul primo e a destra apri la scheda "Chiamata API", dove vedrai i dati inseriti dal modello di tag in dataLayer.

7. Controlla anche le altre voci degli eventi "web_vitals". Utilizza la web-vitals.js documentazione come riferimento per i diversi tipi di dati.

5. Inviare i dati di Web Vitals a GA4

Per estrarre i dati dei Core Web Vitals da dataLayer e inviarli a GA4, devi:

• Creare un attivatore per il tag GA4
• Creare variabili per estrarre i dati da dataLayer
• Creare il tag evento GA4

Creare l'attivatore

1. Nel workspace di Google Tag Manager, vai ad "Attivatori".
2. Aggiungi un nuovo attivatore facendo clic su "Nuovo", poi su "Configurazione attivatore" e scegli "Evento personalizzato" dalla sezione "Altro".
3. Imposta "web_vitals" nel campo Nome evento, assegna un nome all'attivatore e salva.

Creare le variabili dataLayer

1. Nel workspace di Google Tag Manager, vai a "Variabili".
2. Crea una nuova variabile definita dall'utente di tipo "Variabile livello dati".
3. Imposta "webVitalsData.name" nel campo Nome variabile livello dati, assegna un nome alla variabile (ad es. "DLV - webVitalsData.name") e salva.

4. Ripeti questi passaggi per le altre quattro variabili livello dati richieste. Crea "webVitalsData.value".

5. Crea un'altra variabile con il campo del nome "webVitalsData.id".

6. Crea "webVitalsData.rating".

7. Crea "webVitalsData.delta".

8. Dovresti ottenere le seguenti variabili dataLayer definite dall'utente:

Creare il tag evento GA4

Prima di creare un tag evento GA4, assicurati che il tag Google sia già configurato.

1. Nel workspace di Google Tag Manager, vai a "Tag".
2. Aggiungi un tag evento GA4 facendo clic su "Nuovo", poi su "Configurazione tag" e scegli il tag "Google Analytics: evento GA4" dalla sezione "Google Analytics".
3. Inserisci l'ID misurazione nel campo corrispondente.

4. Per il campo di immissione "Nome evento", scegli la variabile dataLayer "DLV - webVitalsData.name" creata nel passaggio precedente.

5. Aggiungi le altre variabili dataLayer come parametri evento, come mostrato nello screenshot. Assicurati anche di aggiungere il parametro "event_category" con un valore come "Web Vitals" per raggruppare gli eventi Core Web Vitals.

6. Registra questi parametri evento come dimensioni personalizzate nell'interfaccia utente di GA4.
7. Applica impostazioni aggiuntive in base ai requisiti di configurazione di GA4.
8. Imposta l'evento personalizzato "web_vitals" come attivatore per il tag GA4.
9. Se necessario, aggiungi anche le eccezioni di attivazione.

6. Controllare i dati in GA4

Per convalidare il flusso di dati in GA4, torna alla modalità di anteprima di Google Tag Manager. Fornisci l'URL a Tag Assistant e fai clic su "Connetti".

1. Interagisci con la pagina scorrendo e facendo clic sugli elementi o sugli spazi vuoti.
2. Poi torna alla scheda con Tag Assistant e alla modalità di anteprima di Google Tag Manager.
3. A sinistra, fai clic su ciascuna delle voci "web_vitals" e conferma che il tag Core Web Vitals di GA4 venga attivato.

4. Apri il tag GA4 facendo clic sulla scheda per convalidare che i dati vengano estratti correttamente da dataLayer. Assicurati di visualizzare le variabili come valori.

5. Ora passa alla proprietà GA4 e apri il report In tempo reale.
6. Nella scheda "Conteggio eventi per nome evento" puoi verificare se i tuoi eventi Core Web Vitals vengono raccolti correttamente.

7. Se nel report in tempo reale viene elaborata una grande quantità di dati, è possibile che gli eventi non siano facilmente identificabili. In questo caso, utilizza il report DebugView, che ti consente di visualizzare i dati relativi a un dispositivo specifico.

7. Pubblicare la configurazione

Dopo aver testato correttamente la configurazione, è il momento di pubblicare il workspace.

1. Apri il workspace di Google Tag Manager.
2. In alto a destra nell'interfaccia utente, fai clic su "Invia".
3. Fornisci un nome e una descrizione della versione e pubblica la configurazione facendo clic su "Pubblica".

8. Collegare GA4 a Google Ad Manager o Google AdSense

Dopo aver raccolto i dati dei Core Web Vitals in GA4, anche le metriche correlate agli annunci devono essere disponibili in GA4 per il funzionamento della dashboard. Collega Google Ad Manager e Google AdSense a GA4 o solo una di queste soluzioni pubblicitarie. Tieni presente che per il collegamento devi disporre dell'autorizzazione di modifica (o superiore) in GA4 e dell'autorizzazione di amministratore in Google Ad Manager e Google AdSense.

Collegare GA4 a Google Ad Manager

1. Vai alla tua rete Google Ad Manager.
2. Fai clic su "Amministratore" -> "Impostazioni globali" -> "Impostazioni della rete".
3. Nella sezione "Impostazioni report", attiva l'opzione "Report proprietà Google Analytics 4 nei report di Ad Manager".

4. Esamina i termini e le condizioni e fai clic su "Conferma".
5. Salva l'aggiornamento.
6. Vai ad "Amministratore" -> "Account collegati" -> "Google Analytics 4".
7. Fai clic su "Nuovo collegamento proprietà Google Analytics 4".
8. Trova e seleziona la proprietà GA4 che vuoi collegare.
9. Al termine, fai clic su Salva.

Collegare GA4 a Google AdSense

1. Vai al tuo account Google AdSense.
2. Fai clic su "Account" -> "Accesso e autorizzazione" -> "Integrazione di Google Analytics".
3. Fai clic su "+ Nuovo collegamento".

4. Trova e seleziona la proprietà GA4 che vuoi collegare.
5. Fai clic su "Crea collegamento".

9. Visualizzare i dati con Looker Studio

Per una presentazione visiva dei dati Core Web Vitals insieme alle metriche degli annunci, questo passaggio prevede la configurazione di una dashboard di Looker Studio. Segui questi passaggi per correlare i Core Web Vitals e le entrate pubblicitarie.

1. Apri questo modello di dashboard di Looker Studio
2. Copia la dashboard.
3. Aggiorna l'origine dati selezionando la proprietà GA4 dall'elenco a discesa.
4. Fine

Tieni presente che, affinché la dashboard funzioni e visualizzi correttamente i dati, questi si basano sulla sintassi e sulla convenzione di denominazione di questo codelab.

La prima pagina della dashboard mostra una visualizzazione storica del rendimento dei Core Web Vitals:

Nella seconda pagina puoi correlare i Core Web Vitals con le entrate pubblicitarie di Google Ad Manager e/o Google AdSense:

La terza pagina ti consente di analizzare il rendimento dei Core Web Vitals a livello di percorso pagina insieme alle metriche correlate agli annunci:

10. Conclusione

Complimenti! Hai imparato a misurare e generare report sui Core Web Vitals con GA4 e sulle metriche sul rendimento degli annunci di Google Ad Manager e Google AdSense.

Scopri di più

• Correlare i Core Web Vitals e le entrate pubblicitarie con gli strumenti Google
• Caricare gli annunci in modo efficace senza influire sulla velocità della pagina
• Ottimizzare Largest Contentful Paint
• Ottimizzare Cumulative Layout Shift
• Ottimizzare Interaction to Next Paint