Questa pagina è stata tradotta dall'API Cloud Translation.

Misura il rendimento con web-vitals.js, Google Analytics e BigQuery

1. Prima di iniziare

Attività previste

In questo codelab, imparerai a:

Collega la tua proprietà Google Analytics 4 a BigQuery.
Aggiungi la libreria web-vitals a una pagina web.
Prepara e invia i dati web-vitals a Google Analytics.
Esegui query sui dati di Core Web Vitals in BigQuery.
Crea una dashboard in Google Data Studio per visualizzare i dati di 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, ad esempio Google Chrome o Microsoft Edge. Per ulteriori informazioni sul motivo per cui è necessario un browser web basato su Chromium, vedi Supporto dei browser.
Un editor di testo a tua scelta, ad esempio Sublime Text o Visual Studio Code.
Ospitare le tue pagine di test per vedere come funziona la libreria web-vitals. Puoi utilizzare un server locale per pubblicare pagine web statiche oppure ospitare le tue pagine di test su GitHub.
Un sito pubblico in cui puoi eseguire il deployment del codice di analisi. La messa in produzione del codice 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 la procedura nel Centro assistenza Google Analytics per collegare la 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 nel tuo sito.

2. Aggiungi la libreria di web-vitals e gtag a una pagina web

Innanzitutto, aggiungi la libreria web-vitals a una pagina web.

Apri un modello di pagina a cui vuoi aggiungere la libreria 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 nel tuo editor di testo.
Salva il file in locale come basic.html.
Copia questo script del modulo e incollalo subito prima del tag </body> di chiusura. Questo script carica la libreria web-vitals da 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 metriche Core Web Vitals misurano le esperienze utente reali, in base a quanto acquisite tramite Chrome o la libreria web-vitals sui browser Chromium. Quando rilasci web-vitals in versione di produzione, vedi un'ampia gamma di risultati in base alle velocità di connessione, potenza del dispositivo e come 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 Google Chrome.

Fai clic sulla scheda Console > Impostazioni della console .

Seleziona la casella di controllo Conserva log per rendere persistenti i log quando aggiorni la pagina web.

Fai clic sulla scheda Rete > Online > 3G lento 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 veloce per simulare una connessione di rete veloce.
Fai clic sulla scheda Console.
Fai clic in un punto qualsiasi della pagina web per forzare di nuovo la stampa della metrica LCP.

Fai clic su Ricarica questa pagina per forzare nuovamente la stampa delle metriche per CLS e INP.

È tutto. Hai misurato i Core Web Vitals della pagina web.

4. Esplorare più in dettaglio i dati delle vital web

Per ogni evento di 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 del rendimento. Ogni evento web-vitals contiene un array entries, con informazioni sugli eventi che contribuiscono al valore della metrica corrente.

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 del layout, che hanno entrambi spostato un elemento h1 sulla pagina. La proprietà currentRect ci indica dove si trova ora l'elemento, mentre l'elemento previousRect ci comunica dov'era prima.

LCP `entries`

L'espansione della proprietà entry dell'oggetto registrato da onLCP() mostra quali elementi erano candidati per Largest Contentful Paint prima che fosse riportato 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 per primo 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 alla colorazione successiva della pagina.

La proprietà name indica il tipo di input utente che ha attivato il timer per la disponibilità del thread principale. Il value segnalato da web-vitals è il ritardo assegnato come proprietà duration della voce PerformanceEventTiming, convertito da microsecondi a millisecondi. In questo caso, l'INP misurato è di 48 millisecondi.

5. Prepara e invia i dati delle metriche web a Google Analytics 4

Prima di poter inviare i dati di web-vitals a Google Analytics 4, devi convertirli in un formato che può ricevere da GA4.

Strutturare le informazioni di debug per ogni CWV

L'ultimo passaggio prima di inviare questo codice a Google Analytics è strutturare le informazioni dalle voci, incluse quelle restituite dalle funzioni sopra citate.

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 prenda i parametri dall'evento web-vitals e li passi 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 si attiva quando il browser è pronto a misurare ciascun evento:

diagnostics.html

onLCP(sendToGoogleAnalytics);
onINP(sendToGoogleAnalytics);
onCLS(sendToGoogleAnalytics);

Ben fatto! Stai inviando web-vitals eventi a Google Analytics.

6. Verifica che i dati delle metriche web 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 eventi INP.
Cerca la sezione Conteggio eventi per nome evento dell'interfaccia utente Panoramica in tempo reale. Dovresti vedere eventi LCP, INP e CLS.

Fai clic sul nome di un evento qualsiasi 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. È sufficiente modificare le istruzioni return nella funzione getDebugInfo().

Quando sei soddisfatto dei dati provenienti dalle tue pagine di test, implementa il nuovo codice GA in produzione sul tuo sito e vai al passaggio successivo.

7. Eseguire query sui dati in BigQuery

Una volta che il codice di Google Analytics è attivo per alcuni giorni, puoi iniziare a eseguire query sui dati in BigQuery. Innanzitutto, verifica che i dati vengano trasferiti in BigQuery.

Apri la console Google Cloud e seleziona il tuo progetto dal menu a discesa nella parte superiore dello schermo.
Dal menu di navigazione in alto a sinistra dello schermo, fai clic su BigQuery sotto l'intestazione Analytics.
Nel riquadro Explorer, espandi il progetto per visualizzare il set di dati di 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. Dovresti vedere una tabella events_. Il numero tra parentesi indica il numero di giorni disponibili per la query.

Sottoquery per selezionare solo eventi CWV

Per eseguire una query su un set di dati che includa solo i nostri eventi CWV, inizia con una sottoquery che selezioni gli ultimi 28 giorni di eventi LCP, CLS e INP. In particolare, cerca l'ultimo valore segnalato per ogni ID evento web-vitals utilizzando la chiave metric_id per assicurarti di non conteggiare gli stessi eventi CWV più di una volta.

# 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 su questo set di dati. La tua query principale verrà eseguita sulla tabella temporanea web_vitals_events.

Come sono strutturati gli eventi GA4

Ogni dato sugli eventi di Google Analytics 4 viene conservato in una colonna STRUCT della colonna event_params. Ciascuno dei parametri evento che passi 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 int_value o un double_value, quindi viene utilizzata la funzione COALESCE(). Per ottenere la debug_target che hai passato in precedenza, seleziona la chiave string_value in debug_target.

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

Trova le pagine e gli elementi con il rendimento peggiore

debug_target è una stringa del selettore CSS che corrisponde all'elemento sulla pagina più pertinente al valore della metrica.

Con CLS, debug_target rappresenta l'elemento più grande della più grande variazione del layout che ha contribuito al valore CLS. Se nessun elemento è stato spostato, il valore debug_target è null.

Le seguenti pagine di query elencano dalla peggiore alla migliore in base alla relativa 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 vengono spostati, dovrebbe essere molto più facile identificare e risolvere la causa principale del problema.

Tieni presente che gli elementi qui riportati potrebbero non essere gli stessi che vedi cambiare quando esegui il debug delle pagine localmente, motivo per cui è così importante acquisire questi dati. È molto difficile risolvere problemi che non ti sembrano problemi.

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. È sufficiente sostituire la clausola WHERE con la metrica pertinente di cui 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 dashboard senza costi. Per visualizzare i risultati della query dopo averla eseguita nell'interfaccia utente di BigQuery, fai clic su Esplora i dati e seleziona Esplora con Data Studio.

Esplora con l'opzione Data Studio in BigQuery

In questo modo viene creato un link diretto da BigQuery a Data Studio nella vista 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 precedenti, puoi creare questo grafico a linee per visualizzare l'andamento dei valori LCP nel tempo:

Grafico a linee di valori LCP giornalieri in Data Studio

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 analisi aggiuntive, potresti voler esaminare diversi grafici in una dashboard interattiva per ottenere una visione più olistica o per poter visualizzare i dati in dettaglio. Grazie a una dashboard a portata di mano, non dovrai scrivere query e generare grafici manualmente ogni volta che vuoi analizzare le metriche.

Puoi creare una dashboard in Data Studio utilizzando il connettore BigQuery nativo. Per farlo, vai a datastudio.google.com, crea una nuova origine dati, seleziona il connettore BigQuery e scegli il set di dati con cui lavorare:

Utilizzo del connettore nativo BigQuery in Data Studio

9. Materializza i dati di Web Vitals

Quando si creano dashboard dei dati sugli eventi di Web Vitals, come descritto in precedenza, non è possibile usare direttamente il set di dati di esportazione di Google Analytics 4. A causa della struttura dei dati GA4 e della pre-elaborazione richiesta per le metriche Web Vitals, parti della query vengono eseguite più volte. Questo crea due problemi: le prestazioni della dashboard e i costi di BigQuery.

Puoi utilizzare senza costi la modalità sandbox di BigQuery. 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 non utilizzi un set di dati molto grande o che esegui regolarmente query sul set di dati, dovresti poter rimanere entro questo limite senza costi ogni mese. Tuttavia, se hai un sito web con traffico elevato e vuoi monitorare regolarmente metriche diverse utilizzando una dashboard interattiva veloce, ti consigliamo di pre-elaborare e materializzare i dati dei dati web vitals, utilizzando al contempo le funzionalità di efficienza di BigQuery come il partizionamento, il clustering e la memorizzazione nella cache.

Lo script seguente pre-elabora 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 ha diversi vantaggi:

La struttura dei dati è bidimensionale ed è più facile eseguire query.
Conserva solo gli eventi Web Vitals del set di dati GA4 originale.
L'ID sessione, il tipo di utente (nuovi e ricorrenti) e le informazioni sul coinvolgimento della sessione sono disponibili direttamente nelle colonne.
La tabella è partizionata per data e raggruppata in cluster per nome della metrica. Questo di solito riduce la quantità di dati elaborati per ogni query.
Poiché non è necessario 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 associati alla ripetizione della stessa query.
Se utilizzi BigQuery BI Engine, puoi eseguire funzioni e operatori SQL ottimizzati in questa tabella.

Puoi eseguire query direttamente su questa tabella materializzata dall'interfaccia utente di BigQuery oppure utilizzarla in Data Studio con il connettore BigQuery.

Esegui regolarmente job di materializzazione

Se esegui la query riportata sopra senza un intervallo di date, viene eseguita sull'intero set di dati di Google Analytics. È consigliabile evitare di farlo 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 ulteriore criterio alla clausola WHERE della sottoquery a fronte della 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 del giorno precedente. Potrai quindi utilizzare la console BigQuery per pianificare la query in modo che venga eseguita ogni giorno.

10. Visualizzare i dati in Google Data Studio.

Google Data Studio supporta in modo nativo la lettura dei dati da Google BigQuery. Ora che hai i dati web-vitals di Google Analytics 4 compilati in BigQuery, puoi utilizzare il connettore BigQuery di Data Studio per leggere direttamente la tabella materializzata.

Utilizzare il connettore Web Vitals

Poiché creare una dashboard da zero richiede molto tempo, abbiamo sviluppato una soluzione in pacchetto che consente di creare una dashboard modello per te. Innanzitutto, assicurati di aver materializzato la tabella Web Vitals utilizzando la query precedente. Quindi, 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:

Schermata di autorizzazione di Web Vitals Connector

Fornisci l'ID tabella BigQuery materializzata (ad es. la tabella di destinazione) e l'ID progetto di fatturazione BigQuery. Dopo aver fatto clic su COLLEGA, Data Studio crea una nuova dashboard basata su modelli a cui associa i tuoi dati. Puoi modificare 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.

Esplorare la dashboard

Mentre navighi nella dashboard, puoi vedere le tendenze giornaliere delle metriche Web Vitals e alcune informazioni sull'utilizzo del tuo sito web, come utenti e sessioni, nella scheda Riepilogo.

Nella scheda Analisi degli utenti, puoi selezionare una metrica e ottenere un'analisi dettagliata del percentile delle metriche, nonché del conteggio degli utenti, in base a metriche aziendali e di utilizzo diverse.

La scheda Analisi del percorso di pagina consente di identificare le aree problematiche del sito web. Qui puoi scegliere una metrica per visualizzare la panoramica, ma puoi anche vedere la mappa a dispersione di tutti i percorsi 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 a quelli previsti. Dopo aver selezionato le pagine, puoi visualizzare in dettaglio l'area del problema utilizzando il grafico a dispersione della tabella Percorso pagina o visualizzando la tabella Target di debug.

La scheda Analisi delle entrate mostra un esempio di come monitorare le metriche relative all'attività e al rendimento dalla stessa posizione. Questa sezione mostra 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 tenere traccia delle prestazioni di Core Web Vitals sul tuo sito con un alto livello di granularità. Dovresti anche essere in grado di identificare tipi di pagine ed elementi specifici del tuo sito che causano un alto numero di CWV, in modo da poter concentrare le tue ottimizzazioni.

Per approfondire

Sul sito web.dev puoi trovare una serie di articoli e case study che illustrano strategie per migliorare i Core Web Vitals. Inizia con gli articoli sull'ottimizzazione per ogni metrica:

Documenti di riferimento

Questo codelab si basa molto su due articoli di web.dev:
L'articolo sulla misurazione di Web Vitals 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 su GA4 > integrazione di BigQuery Export, consulta il Centro assistenza Google Analytics.

Misura il rendimento con web-vitals.js, Google Analytics e BigQuery

1. Prima di iniziare

Attività previste

Che cosa ti serve

Prima di iniziare

2. Aggiungi la libreria di web-vitals e gtag a una pagina web

basic.html

basic.html

basic.html

3. Misurare i Core Web Vitals della pagina web

4. Esplorare più in dettaglio i dati delle vital web

CLS entries

LCP entries

INP - entries

5. Prepara e invia i dati delle metriche web a Google Analytics 4

Strutturare le informazioni di debug per ogni CWV

diagnostics.html

Inviare i dati a Google Analytics

diagnostics.html

diagnostics.html

6. Verifica che i dati delle metriche web vengano compilati in Google Analytics

7. Eseguire query sui dati in BigQuery

Sottoquery per selezionare solo eventi CWV

Come sono strutturati gli eventi GA4

Trova le pagine e gli elementi con il rendimento peggiore

Eseguire il debug di altre metriche

8. Visualizzare i risultati delle query in Data Studio

9. Materializza i dati di Web Vitals

Esegui regolarmente job di materializzazione

10. Visualizzare i dati in Google Data Studio.

Utilizzare il connettore Web Vitals

Esplorare la dashboard

11. Altre risorse

Per approfondire

Documenti di riferimento

CLS `entries`

LCP `entries`

INP - `entries`