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

1. Prima di iniziare

In questo codelab, imparerai a misurare Core Web Vitals con un modello di tag predefinito Google Tag Manager (GTM) e a inviare i dati a una proprietà Google Analytics 4 (GA4). Imparerai inoltre a estrarre i dati da Google Ad Manager e Google AdSense a GA4 per mettere in correlazione i dati dei campi di Core Web Vitals e le metriche di rendimento degli annunci con una dashboard di Looker Studio predefinita.

Attività previste

• Importa e imposta un tag nel contenitore di Google Tag Manager.
• Misura i Core Web Vitals della pagina web in GA4.
• Impostare un tag evento GA4 in Google Tag Manager.
• Esplora i dati Web Vitals nel dataLayer e nei report GA4.
• Collega la tua 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 in modifica.
• 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. Aggiungi il modello di tag da GitHub a GTM

La misurazione di Core Web Vitals tramite un modello di tag GTM si basa sulla raccolta di web-vitals. Per prima cosa, scaricheremo il modello di tag GTM.

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

Ora, accedi al tuo account Google Tag Manager.

1. Apri il contenitore web.
2. Crea una nuova area di lavoro e inserisci un nome (ad es. "Misurazione di 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. Configura il tag Web Vitals

1. Nell'area di lavoro di Google Tag Manager, vai a "Tag".
2. Aggiungi il tag Web Vitals facendo clic su "Nuovo" e poi su "Configurazione tag". e scegli l'opzione "Web Vitals" della sezione "Personalizzato" .
3. Il passaggio successivo è configurare le diverse impostazioni. Tutte le impostazioni sono spiegate nel repository GitHub. Affinché questo codelab e la dashboard finale funzionino, sono sufficienti le seguenti impostazioni.

4. Applica uno degli attivatori di visualizzazione di pagina, ad esempio. la sezione "Tutte le pagine" trigger.
5. Se necessario, aggiungi anche eccezioni attivatori.
6. Assegna al tag il nome "Core Web Vitals - Tutte le pagine" e salvo.

4. Esplora i dati di Web Vitals nel dataLayer

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

1. Interagisci con la pagina scorrendo e facendo clic su elementi o spazi bianchi.
2. Poi torna alla scheda con Tag Assistant e alla modalità di anteprima di Google Tag Manager.
3. A sinistra vedrai i diversi eventi inviati al dataLayer.
4. Innanzitutto devi verificare se il tag Web Vitals si è attivato sull'attivatore di visualizzazione di pagina scelto.

5. Dovresti anche vedere tre "web_vitals" ciascuno dei quali rappresenta una metrica di Core Web Vitals: LCP, INP e CLS.

6. Fai clic sul primo pulsante e apri la "Chiamata API" a destra dove vedrai i dati trasferiti dal modello di tag a dataLayer.

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

5. Invia i dati di Web Vitals a GA4

Per estrarre i dati di Core Web Vitals dall'dataLayer e inviarli a GA4, devi:

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

Crea il trigger

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

Creare le variabili dataLayer

1. Nell'area di lavoro di Google Tag Manager, vai a "Variabili".
2. Crea una nuova variabile definita dall'utente dal tipo "Variabile di 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 del 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 avere 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. Nell'area di lavoro di Google Tag Manager, vai a "Tag".
2. Aggiungi un tag evento GA4 facendo clic su "Nuovo" e poi su "Configurazione tag". e scegli "Google Analytics: evento GA4" del tag di "Google Analytics" .
3. Inserisci il tuo ID misurazione nel campo corrispondente.

4. Per "Nome evento" scegli la variabile dataLayer "DLV - webVitalsData.name" nel campo di immissione dal passaggio creato in precedenza.

5. Aggiungi le altre variabili dataLayer come parametri evento, come mostrato nello screenshot. Assicurati inoltre 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 il parametro "web_vitals" evento personalizzato come attivatore per il tag GA4.
9. Se necessario, aggiungi anche eccezioni attivatori.

6. Controllare i dati in GA4

Per convalidare il flusso di dati verso GA4, passa nuovamente alla modalità di anteprima di Google Tag Manager. Fornisci un URL a Tag Assistant e fai clic su "Connetti".

1. Interagisci con la pagina scorrendo e facendo clic su elementi o spazi bianchi.
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 "web_vitals" e verifica che si attivi il tag Core Web Vitals di GA4.

4. Apri il tag GA4 facendo clic sulla scheda per verificare 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 sezione "Conteggio eventi per nome evento" puoi convalidare se gli 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 così facilmente identificabili. In tal caso, utilizza il report DebugView, che ti consente di visualizzare i dati relativi a un dispositivo specifico.

7. Pubblica la configurazione

Dopo aver testato la configurazione, è il momento di pubblicare l'area di lavoro.

1. Apri l'area di lavoro di Google Tag Manager.
2. In alto a destra nella UI, fai clic su "Invia".
3. Fornisci un nome e una descrizione della versione e pubblica la tua configurazione facendo clic su "Pubblica".

8. Collegare GA4 a Google Ad Manager o Google AdSense

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

Collegare GA4 a Google Ad Manager

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

4. Rivedi i termini e le condizioni e fai clic su "Conferma".
5. Salva l'aggiornamento.
6. Vai ad "Amministrazione" -> "Account collegati" -> "Google Analytics 4".
7. Fai clic su "Nuovo collegamento proprietà Google Analytics 4".
8. Trova e seleziona la proprietà GA4 da collegare.
9. Per terminare, 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 link".

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

9. Visualizzare i dati con Looker Studio

Per una presentazione visiva dei dati di Core Web Vitals insieme alle metriche relative agli annunci, questo passaggio prevede la configurazione di una dashboard di Looker Studio. Segui questi passaggi per mettere in relazione Core Web Vitals e 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 i dati correttamente, i dati si basano sulla sintassi e sulla convenzione di denominazione di questo codelab.

Nella prima pagina della dashboard potrai avere una visione cronologica del tuo rendimento in Core Web Vitals:

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

La terza pagina ti offre la possibilità di analizzare il rendimento di Core Web Vitals a livello di percorso pagina insieme a metriche relative agli annunci:

10. Conclusione

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

Scopri di più

• Caricamento efficace degli annunci senza influire sulla velocità della pagina
• Ottimizza la visualizzazione di Largest Contentful Paint
• Ottimizzare Cumulative Layout Shift
• Ottimizzare l'interazione con Next Paint