1. Prima di iniziare
Attività previste
In questo codelab:
- Collega la tua proprietà Google Analytics 4 a BigQuery.
- Aggiungi la libreria
web-vitalsa una pagina web. - Prepara e invia i dati
web-vitalsa Google Analytics. - Esegui query sui dati Core Web Vitals in BigQuery.
- Crea una dashboard in Google Data Studio per visualizzare i dati dei Core Web Vitals.
Che cosa ti serve
- Un account Google Analytics con una proprietà GA4.
- Un account Google Cloud.
- Un browser web basato su Chromium, come Google Chrome o Microsoft Edge. Per ulteriori informazioni sul motivo per cui è necessario un browser web basato su Chromium, consulta Supporto del browser.
- Un editor di testo a tua scelta, ad esempio Sublime Text o Visual Studio Code.
- Un luogo in cui ospitare le pagine di test per vedere come funziona la libreria
web-vitals. Puoi utilizzare un server locale per pubblicare pagine web statiche o ospitare le pagine di test su GitHub. - Un sito pubblico in cui puoi eseguire il deployment del codice di analisi. L'inserimento del codice in produzione rende più comprensibili gli esempi di BigQuery e Data Studio alla fine di questo codelab.
- Conoscenza di HTML, CSS, JavaScript e Chrome DevTools.
Prima di iniziare
Innanzitutto, collega Google Analytics 4 a BigQuery per assicurarti di poter iniziare ad analizzare il rendimento non appena il codice viene pubblicato.
Segui i passaggi descritti nel Centro assistenza Google Analytics per collegare la tua proprietà GA4 a BigQuery.
Ora che la tua proprietà Google Analytics è pronta per esportare i dati sugli eventi in BigQuery, integra la libreria web-vitals sul tuo sito.
2. Aggiungere la libreria web-vitals e gtag a una pagina web
Innanzitutto, aggiungi la libreria web-vitals a una pagina web.
- Apri un modello di pagina in cui vuoi aggiungere la raccolta
web-vitals. Per questo esempio, utilizzeremo una pagina semplice:
basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Vitals Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
<p>Text below image</p>
</body>
</html>
- Incolla il codice sorgente in un file vuoto nell'editor di testo.
- Salva il file localmente come
basic.html. - Copia questo script del modulo e incollalo appena prima del tag
</body>di chiusura. Questo script carica la libreriaweb-vitalsda una rete CDN (Content Delivery Network).
basic.html
<script type="module">
import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';
onCLS(console.log);
onINP(console.log);
onLCP(console.log);
</script>
Il codice risultante dovrebbe avere l'aspetto seguente.
basic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Vitals Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
<p>Text below image</p>
<script type="module">
import {onCLS, onINP, onLCP} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.js?module';
onCLS(console.log);
onINP(console.log);
onLCP(console.log);
</script>
</body>
</html>
- Salva il file.
Hai aggiunto la libreria web-vitals alla pagina web.
3. Misurare i Core Web Vitals della pagina web
Le Core Web Vitals sono una misura delle esperienze degli utenti reali, acquisite tramite Chrome o la libreria web-vitals sui browser Chromium. Quando rilasci web-vitals in produzione, visualizzi un'ampia gamma di risultati in base alla velocità di connessione degli utenti, alla potenza del dispositivo e al modo in cui interagiscono con il tuo sito. Per dimostrare le funzionalità della libreria web-vitals, simuleremo un'esperienza utente con una connessione lenta.
- Apri il file salvato nel browser web.
- Fai clic con il tasto destro del mouse sulla pagina web.
- Fai clic su Ispeziona per aprire gli Strumenti per sviluppatori di Chrome.
- Fai clic sulla scheda Console > Impostazioni console
.
- Seleziona la casella di controllo Conserva log per mantenere i log quando aggiorni la pagina web.
- Fai clic sulla scheda Rete > Online > 3G lenta per simulare una connessione di rete lenta.
- Fai clic sulla scheda Console.
- Fai clic in un punto qualsiasi della pagina web per forzare la stampa della metrica Largest Contentful Paint (LCP).
- Fai clic su Ricarica questa pagina
per forzare la stampa delle metriche per Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP).
- Fai clic sulla scheda Rete > Online > 3G rapida per simulare una connessione di rete veloce.
- Fai clic sulla scheda Console.
- Fai clic in un punto qualsiasi della pagina web per forzare la stampa della metrica per LCP.
- Fai clic su Ricarica questa pagina per forzare la stampa delle metriche per CLS e INP.
È tutto. Hai misurato i Core Web Vitals della pagina web.
4. Esplorare i dati web vitals in modo più dettagliato
Per ciascuno degli eventi dei Core Web Vitals che stai misurando, nei dati restituiti è disponibile una serie di informazioni che puoi utilizzare per eseguire il debug dei colli di bottiglia delle prestazioni. Ogni evento web-vitals contiene un array entries con informazioni sugli eventi che contribuiscono al valore attuale della metrica.
CLS entries
Se espandi la proprietà entries dell'oggetto registrato da onCLS(), viene visualizzato un elenco di voci LayoutShift. Ogni LayoutShift contiene una proprietà value che riflette il punteggio di variazione del layout e un array sources che possiamo utilizzare per vedere quali elementi sono stati spostati.
In questo esempio si sono verificate due variazioni di layout, entrambe spostando un elemento h1 nella pagina. La proprietà currentRect indica la posizione attuale dell'elemento, mentre l'elemento previousRect indica la posizione precedente.
LCP entries
L'espansione della proprietà delle voci dell'oggetto registrato da onLCP() mostra quali elementi erano candidati per Largest Contentful Paint prima che venisse segnalato il valore finale.
In questo esempio, l'array entries contiene un elenco di tutti i candidati LCP in ordine cronologico. In questo caso, è stato visualizzato prima un elemento h1, seguito da un elemento img. img è stato il Largest Contentful Paint. L'elemento LCP segnalato è sempre l'ultimo elemento dell'array.
INP entries
Quando espandi la proprietà entries dell'oggetto registrato da onINP(),, viene visualizzato un array contenente la voce PerformanceEventTiming per l'interazione al successivo rendering sulla pagina.
La proprietà name indica il tipo di input dell'utente che ha attivato il timer per la disponibilità del thread principale. Il value riportato da web-vitals è il ritardo indicato come proprietà duration della voce PerformanceEventTiming, convertito da microsecondi a millisecondi. In questo caso, l'INP misurato è di 48 millisecondi.
5. Preparare e inviare i dati web-vitals a Google Analytics 4
Prima di poter inviare i dati web-vitals a Google Analytics 4, è necessario convertirli in un formato che GA4 possa ricevere.
Strutturare le informazioni di debug per ogni metrica CWV
L'ultimo passaggio prima di inviare questo codice a Google Analytics consiste nello strutturare le informazioni delle voci, incluse quelle restituite dalle funzioni precedenti.
diagnostics.html
function getDebugInfo(name, attribution) {
// In some cases there won't be any entries (e.g. if CLS is 0,
// or for LCP after a bfcache restore), so we have to check first.
if (attribution) {
if (name === 'LCP') {
return {
debug_url: attribution.url,
debug_time_to_first_byte: attribution.timeToFirstByte,
debug_resource_load_delay: attribution.resourceLoadDelay,
debug_resource_load_time: attribution.resourceLoadTime,
debug_element_render_delay: attribution.elementRenderDelay,
debug_target: attribution.element || '(not set)',
};
} else if (name === 'INP') {
return {
debug_event: attribution.interactionType,
debug_time: Math.round(attribution.interactionTime),
debug_load_state: attribution.loadState,
debug_target: attribution.interactionTarget || '(not set)',
debug_interaction_delay: Math.round(attribution.inputDelay),
debug_processing_duration: Math.round(attribution.processingDuration),
debug_presentation_delay: Math.round(attribution.presentationDelay),
};
} else if (name === 'CLS') {
return {
debug_time: attribution.largestShiftTime,
debug_load_state: attribution.loadState,
debug_target: attribution.largestShiftTarget || '(not set)',
}
}
}
// Return default/empty params in case there is no attribution.
return {
debug_target: '(not set)',
};
}
function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
gtag('event', name, {
// Built-in params:
value: delta, // Use `delta` so the value can be summed.
// Custom params:
metric_id: id, // Needed to aggregate events.
metric_value: value, // Value for querying in BQ
metric_delta: delta, // Delta for querying in BQ
// Send the returned values from getDebugInfo() as custom parameters
...getDebugInfo(name, attribution)
});
}
Inviare i dati a Google Analytics
Infine, crea una funzione che accetta i parametri dell'evento web-vitals e li trasmette a Google Analytics.
diagnostics.html
function sendToGoogleAnalytics({ name, delta, value, id, entries, attribution }) {
gtag('event', name, {
// Built-in params:
value: delta, // Use `delta` so the value can be summed.
// Custom params:
metric_id: id, // Needed to aggregate events.
metric_value: value, // Value for querying in BQ
metric_delta: delta, // Delta for querying in BQ
// Send the returned values from getDebugInfo() as custom parameters
...getDebugInfo(name, attribution)
});
}
Registra la funzione con ciascuna delle funzioni web-vitals, che viene attivata quando il browser è pronto a misurare ogni evento:
diagnostics.html
onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);
Ben fatto! Ora stai inviando gli eventi web-vitals a Google Analytics.
6. Controllare che i dati web-vitals vengano compilati in Google Analytics
Per assicurarti che gli eventi vengano registrati dalla proprietà Google Analytics 4:
- Apri la proprietà Google Analytics 4 e vai a Report.
- Seleziona In tempo reale.
- Aggiorna la pagina di test alcune volte e assicurati di fare clic sulla pagina tra un aggiornamento e l'altro per attivare gli eventi INP.
- Cerca la sezione Conteggio eventi per nome evento dell'interfaccia utente Panoramica in tempo reale. Dovresti visualizzare gli eventi LCP, INP e CLS.
- Fai clic su uno dei nomi degli eventi per visualizzare i parametri trasmessi con questi eventi.
- Fai clic su queste chiavi parametro per visualizzare un riepilogo dei valori ricevuti da Google Analytics.
Potresti voler aggiungere altri dati alle informazioni di debug, come i nomi dei modelli di pagina o gli altri eventi di pagina pertinenti a INP discussi in precedenza in questo Codelab. Modifica semplicemente le istruzioni return nella funzione getDebugInfo().
Quando i dati provenienti dalle pagine di test ti soddisfano, esegui il deployment del nuovo codice GA in produzione sul tuo sito e passa al passaggio successivo.
7. Eseguire query sui dati in BigQuery
Una volta che il codice Google Analytics è attivo da alcuni giorni, puoi iniziare a eseguire query sui dati in BigQuery. Innanzitutto, verifica che i dati vengano trasferiti a BigQuery.
- Apri la console Google Cloud e seleziona il tuo progetto dal menu a discesa nella parte superiore dello schermo.
- Nel menu di navigazione
in alto a sinistra nella schermata, fai clic su BigQuery sotto l'intestazione Analytics. - Nel riquadro Explorer, espandi il progetto per visualizzare il set di dati Google Analytics. Il nome del set di dati è
analytics_seguito dall'ID proprietà Google Analytics 4 (ad es.analytics_229787100). - Espandi il set di dati e dovresti visualizzare una tabella
events_. Il numero tra parentesi indica il numero di giorni disponibili per la query.
Subquery per selezionare solo gli eventi CWV
Per eseguire una query su un set di dati che include solo i nostri eventi CWV, inizia con una sottoquery che seleziona gli eventi LCP, CLS e INP degli ultimi 28 giorni. In particolare, cerca l'ultimo valore segnalato per ogni ID evento web-vitals utilizzando la chiave metric_id per assicurarsi di non conteggiare più di una volta gli stessi eventi CWV.
# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
(
SELECT *
, IF (ROW_NUMBER() OVER (
PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
) = 1, true, false) AS is_last_received_value
# Make sure to update your project ID and GA4 property ID here!
FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
WHERE event_name in ('CLS', 'INP', 'LCP') AND
_TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
)
WHERE is_last_received_value
)
Questo costituisce la base di tutte le query eseguite su questo set di dati. La query principale verrà eseguita sulla tabella temporanea web_vitals_events.
Come sono strutturati gli eventi GA4
Ogni dato sugli eventi di Google Analytics 4 è contenuto in una colonna STRUCT event_params. Ciascuno dei parametri evento che trasmetti a GA4 sul tuo sito è rappresentato dalla relativa chiave e il valore è un STRUCT con una chiave per ogni tipo di dati possibile. Nell'esempio precedente, la chiave metric_value potrebbe avere un valore int_value o double_value, quindi viene utilizzata la funzione COALESCE(). Per ottenere il debug_target che hai superato in precedenza, seleziona il tasto string_value in debug_target.
...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...
Trovare le pagine e gli elementi con il rendimento peggiore
debug_target è una stringa del selettore CSS che corrisponde all'elemento della pagina più pertinente al valore della metrica.
Con CLS, debug_target rappresenta l'elemento più grande della variazione di layout più grande che ha contribuito al valore CLS. Se non sono stati spostati elementi, il valore di debug_target è null.
Il seguente elenco di query elenca le pagine dalla peggiore alla migliore in base al valore CLS al 75° percentile, raggruppate per debug_target:
# Main query logic
SELECT
page_path,
debug_target,
APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
COUNT(1) as page_views
FROM (
SELECT
REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
*
FROM web_vitals_events
WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a
# minimum number of pageviews to reduce noise in your reports.
# HAVING page_views > 50
ORDER BY metric_p75 DESC
Se sai quali elementi della pagina si spostano, dovrebbe essere molto più facile identificare e risolvere la causa principale del problema.
Tieni presente che gli elementi segnalati qui potrebbero non essere gli stessi che vedi spostarsi quando esegui il debug delle pagine in locale, motivo per cui è così importante acquisire questi dati. È molto difficile risolvere i problemi di cui non ti rendi conto.
Eseguire il debug di altre metriche
La query precedente mostra i risultati per la metrica CLS, ma la stessa tecnica può essere utilizzata per generare report sui target di debug per LCP e INP. Basta sostituire la clausola WHERE con la metrica pertinente da eseguire il debug:
# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'
8. Visualizzare i risultati delle query in Data Studio
BigQuery offre un modo rapido per visualizzare i risultati di qualsiasi query tramite Data Studio. Data Studio è uno strumento di visualizzazione dei dati e creazione di dashboard senza costi. Per visualizzare i risultati della query dopo averla eseguita nell'interfaccia utente BigQuery, fai clic su Esplora dati e seleziona Esplora con Data Studio.
In questo modo viene creato un collegamento diretto da BigQuery a Data Studio nella visualizzazione Esplora. In questa visualizzazione, puoi selezionare i campi da visualizzare, scegliere i tipi di grafici, impostare i filtri e creare grafici ad hoc per un'analisi visiva rapida. Dai risultati della query precedente, puoi creare questo grafico a linee per visualizzare l'andamento dei valori LCP nel tempo:
Grazie a questo collegamento diretto tra BigQuery e Data Studio, puoi creare grafici rapidi da qualsiasi query ed eseguire analisi visive. Tuttavia, se vuoi eseguire un'analisi aggiuntiva, potresti voler esaminare diversi grafici in una dashboard interattiva per ottenere una visione più olistica o per poter visualizzare in dettaglio i dati. Una dashboard pratica ti consente di non dover scrivere query e generare grafici manualmente ogni volta che vuoi analizzare le metriche.
Puoi creare un dashboard in Data Studio utilizzando il connettore BigQuery nativo. Per farlo, vai su datastudio.google.com, crea una nuova origine dati, seleziona il connettore BigQuery e scegli il set di dati con cui vuoi lavorare:
9. Materializzare i dati Web Vitals
Quando crei dashboard dei dati degli eventi Web Vitals come descritto sopra, non è efficiente utilizzare direttamente il set di dati di esportazione di Google Analytics 4. A causa della struttura dei dati GA4 e della preelaborazione richiesta per le metriche Segnali web essenziali, alcune parti della query vengono eseguite più volte. Ciò crea due problemi: prestazioni della dashboard e costi di BigQuery.
Puoi utilizzare la modalità sandbox di BigQuery senza costi. Con il livello di utilizzo senza costi di BigQuery, il primo TB di dati di query elaborati al mese è senza costi. Per i metodi di analisi descritti in questo post, a meno che tu non utilizzi un set di dati molto grande o esegua query pesanti regolarmente, dovresti riuscire a rimanere entro questo limite senza costi ogni mese. Tuttavia, se hai un sito web con un traffico elevato e vuoi monitorare regolarmente metriche diverse utilizzando una dashboard interattiva veloce, ti suggeriamo di preelaborare e materializzare i dati Web Vitals utilizzando le funzionalità di efficienza di BigQuery come il partizionamento, il clustering e la memorizzazione nella cache.
Il seguente script preelabora i dati BigQuery (tabella di origine) e crea una tabella materializzata (tabella di destinazione).
# Materialize Web Vitals metrics from GA4 event export data
# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
PARTITION BY DATE(event_timestamp)
AS
SELECT
ga_session_id,
IF(
EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
'New user',
'Returning user') AS user_type,
IF(
(SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
AS session_engagement,
evt.* EXCEPT (session_engaged, event_name),
event_name AS metric_name,
FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
(
SELECT
ga_session_id,
ARRAY_AGG(custom_event) AS events
FROM
(
SELECT
ga_session_id,
STRUCT(
country,
device_category,
device_os,
traffic_medium,
traffic_name,
traffic_source,
page_path,
debug_target,
event_timestamp,
event_name,
metric_id,
IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
user_pseudo_id,
session_engaged,
session_revenue) AS custom_event
FROM
(
SELECT
(SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
AS ga_session_id,
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
AS metric_id,
ANY_VALUE(device.category) AS device_category,
ANY_VALUE(device.operating_system) AS device_os,
ANY_VALUE(traffic_source.medium) AS traffic_medium,
ANY_VALUE(traffic_source.name) AS traffic_name,
ANY_VALUE(traffic_source.source) AS traffic_source,
ANY_VALUE(
REGEXP_SUBSTR(
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
r'^[^?]+')) AS page_path,
ANY_VALUE(
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
AS debug_target,
ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
ANY_VALUE(geo.country) AS country,
ANY_VALUE(event_name) AS event_name,
SUM(ecommerce.purchase_revenue) AS session_revenue,
MAX(
(
SELECT
COALESCE(
value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
FROM UNNEST(event_params)
WHERE key = 'session_engaged'
)) AS session_engaged,
TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
MAX(
(
SELECT COALESCE(value.double_value, value.int_value)
FROM UNNEST(event_params)
WHERE key = 'metric_value'
)) AS metric_value,
FROM
# Replace source table name
`YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
WHERE
event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
GROUP BY
1, 2
)
)
WHERE
ga_session_id IS NOT NULL
GROUP BY ga_session_id
)
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');
Questo set di dati materializzato presenta diversi vantaggi:
- La struttura dei dati è appiattita e più facile da interrogare.
- Conserva solo gli eventi Web Vitals del set di dati GA4 originale.
- L'ID sessione, il tipo di utente (nuovo o ricorrente) e le informazioni sul coinvolgimento nella sessione sono disponibili direttamente nelle colonne.
- La tabella è partizionata per data e raggruppata in cluster per nome della metrica. In genere, in questo modo si riduce la quantità di dati elaborati per ogni query.
- Poiché non devi utilizzare caratteri jolly per eseguire query su questa tabella, i risultati della query possono essere memorizzati nella cache per un massimo di 24 ore. In questo modo si riducono i costi derivanti dalla ripetizione della stessa query.
- Se utilizzi BigQuery BI Engine, puoi eseguire funzioni e operatori SQL ottimizzati su questa tabella.
Puoi eseguire query direttamente su questa tabella materializzata dall'interfaccia utente BigQuery o utilizzarla in Data Studio utilizzando il connettore BigQuery.
Esegui job di materializzazione regolari
Se esegui la query riportata sopra senza un intervallo di date, viene eseguita sull'intero set di dati Google Analytics. Ti consigliamo di evitare di eseguire questa operazione ogni giorno, in quanto vengono rielaborate grandi quantità di dati storici. Puoi aggiornare la query in modo da aggiungere solo i dati dell'ultimo giorno rimuovendo l'istruzione CREATE or REPLACE TABLE all'inizio della query e aggiungendo un criterio aggiuntivo alla clausola WHERE nella sottoquery rispetto alla tabella events_intraday_:
FROM
# Replace source table name
`YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
event_name IN ('LCP', 'INP', 'CLS', 'first_visit', 'purchase')
# The _TABLE_SUFFIX replaces the asterisk (*) in the table name
#
AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)
Questa query restituisce solo i dati di ieri. Puoi quindi utilizzare la console BigQuery per pianificare l'esecuzione della query su base giornaliera.
10. Visualizzare i dati in Google Data Studio
Google Data Studio supporta in modo nativo la lettura dei dati da Google BigQuery. Ora che i dati web-vitals di Google Analytics 4 vengono inseriti in BigQuery, puoi utilizzare il connettore BigQuery di Data Studio per leggere direttamente la tabella materializzata.
Utilizzare il connettore Web Vitals
Poiché la creazione di una dashboard da zero richiede tempo, abbiamo sviluppato una soluzione confezionata che crea un modello di dashboard per te. Innanzitutto, assicurati di aver materializzato la tabella Web Vitals utilizzando la query riportata sopra. Poi accedi al connettore Web Vitals per Data Studio utilizzando questo link: goo.gle/web-vitals-connector
Dopo aver fornito un'autorizzazione una tantum, dovresti visualizzare la seguente schermata di configurazione:
Fornisci l'ID tabella BigQuery materializzata (ovvero la tabella di destinazione) e l'ID progetto di fatturazione BigQuery. Dopo aver fatto clic su CONNETTI, Data Studio crea un nuovo dashboard basato su un modello e associa i tuoi dati. Puoi modificare, personalizzare e condividere la dashboard come preferisci. Se crei una dashboard una volta, non devi visitare di nuovo il link del connettore, a meno che tu non voglia creare più dashboard da set di dati diversi.
Navigare nella dashboard
Nella scheda Riepilogo, mentre navighi nella dashboard, puoi visualizzare le tendenze giornaliere delle metriche Web Vitals e alcune informazioni sull'utilizzo del tuo sito web, come utenti e sessioni.
Nella scheda Analisi utente, puoi selezionare una metrica e ottenere una suddivisione del percentile della metrica, nonché il conteggio degli utenti, in base a diverse metriche di utilizzo e commerciali.
La scheda Analisi del percorso pagina ti aiuta a identificare le aree problematiche del tuo sito web. Qui puoi scegliere una metrica per visualizzare la panoramica, ma puoi anche vedere la mappa a dispersione di tutti i percorsi di pagina con il valore percentile sull'asse y e il conteggio dei record sull'asse x. La mappa a dispersione può aiutarti a identificare le pagine con valori delle metriche inferiori al previsto. Una volta selezionate le pagine, puoi visualizzare in dettaglio l'area problematica con il grafico a dispersione della tabella Percorso pagina o visualizzando la tabella Destinazione di debug.
La scheda Analisi delle entrate è un esempio di come monitorare le metriche aziendali e di rendimento nello stesso posto. Questa sezione traccia tutte le sessioni in cui l'utente ha effettuato un acquisto. Puoi confrontare le entrate generate con l'esperienza utente durante una sessione specifica.
11. Altre risorse
Complimenti per aver completato questo codelab. Ora dovresti essere in grado di monitorare le prestazioni dei tuoi Core Web Vitals in tutto il sito con un elevato livello di granularità. Dovresti anche essere in grado di identificare tipi di pagine ed elementi specifici del tuo sito che causano valori CWV elevati, in modo da concentrare le tue ottimizzazioni.
Further reading
web.dev offre una serie di articoli e casi studio con strategie per migliorare i Core Web Vitals. Inizia con gli articoli di ottimizzazione per ogni metrica:
- Ottimizzare Largest Contentful Paint
- Ottimizzare il Cumulative Layout Shift
- Ottimizzare Interaction to Next Paint
Documentazione di riferimento
- Questo codelab si basa in gran parte su due articoli di web.dev:
- L'articolo sulla misurazione delle metriche web essenziali sul campo.
- L'articolo sull'utilizzo dei dati GA4 di Web Vitals in BigQuery, che contiene molti altri esempi di query che puoi utilizzare.
- Se hai bisogno di ulteriori informazioni sull'integrazione di GA4 e BigQuery Export, consulta il Centro assistenza Google Analytics.