Medir a performance com a web-vitals.js, o Google Analytics e o BigQuery

1. Antes de começar

O que você vai fazer

Neste codelab, você vai:

vincular sua propriedade do Google Analytics 4 ao BigQuery;
adicionar a biblioteca web-vitals a uma página da Web;
preparar e enviar dados da web-vitals ao Google Analytics;
consultar os dados das Principais métricas da Web no BigQuery;
criar um painel no Google Data Studio para ver os dados das Principais métricas da Web.

O que é necessário

Uma conta do Google Analytics com uma propriedade do GA4.
Uma conta do Google Cloud.
Um navegador da Web baseado no Chromium, como o Google Chrome ou o Microsoft Edge. Para saber mais informações sobre por que você precisa de um navegador da Web baseado no Chromium, consulte Suporte a navegadores (link em inglês).
Um editor de texto que preferir, como o Sublime Text ou o Visual Studio Code.
Um lugar para hospedar suas páginas de teste para ver como a biblioteca web-vitals funciona. É possível usar um servidor local para exibir páginas da Web estáticas ou hospedar suas páginas de teste no GitHub (links em inglês).
Um site público em que você pode implantar o código do Google Analytics. Colocar o código em fase de produção vai ajudar você a entender os exemplos do BigQuery e do Data Studio ao final deste codelab.
Conhecimento sobre HTML, CSS, JavaScript e Chrome DevTools.

Antes de começar

Primeiro, vincule o Google Analytics 4 ao BigQuery para começar a analisar a performance assim que o código for publicado.

Siga as etapas na Central de Ajuda do Google Analytics para vincular sua propriedade do GA4 ao BigQuery.

Agora que a propriedade do Google Analytics está pronta para exportar dados de eventos ao BigQuery, integre a biblioteca web-vitals ao seu site.

2. Adicionar a biblioteca web-vitals e a gtag a uma página da Web

Primeiro, adicione a biblioteca web-vitals a uma página da Web.

Abra um modelo da página em que você quer adicionar a biblioteca web-vitals. Para este exemplo, vamos usar uma página simples:

basic.html (link em inglês)

<!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>

Cole o código-fonte em um arquivo em branco no editor de texto.
Salve o arquivo localmente como basic.html.
Copie e cole esse script de módulo antes da tag de fechamento </body>. Esse script carrega a biblioteca web-vitals usando uma rede de fornecimento de conteúdo.

basic.html (link em inglês)

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

O código resultante vai ficar parecido com este.

basic.html (link em inglês)

<!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 {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Salve o arquivo.

Você adicionou a biblioteca web-vitals à página da Web.

3. Medir as Principais métricas da Web da página

As Principais métricas da Web são uma medida das experiências reais do usuário, capturadas pelo Chrome ou pela biblioteca web-vitals nos navegadores Chromium. Ao usar a web-vitals durante a fase de produção, você vai ver vários resultados com base na velocidade da conexão dos usuários, na capacidade do dispositivo deles e em como eles interagem com o site. Para demonstrar os recursos da biblioteca web-vitals, vamos simular a experiência de um usuário com uma conexão lenta.

Abra o arquivo salvo no navegador da Web.
Clique com o botão direito na página da Web.
Clique em Inspect (Inspecionar) para abrir as Ferramentas para desenvolvedores do Chrome.

Clique na guia Console > Ícone das configurações do Console .

Marque a caixa de seleção Preserve log (Preservar registro) para manter os registros quando você atualizar a página.

Clique na guia Network (Rede) > Online > Slow 3G (Conexão 3G lenta) para simular uma conexão de rede lenta.

Clique na guia Console.
Clique em qualquer lugar na página da Web para gerar as métricas da Maior exibição de conteúdo (LCP) e de Latência na primeira entrada (FID).
Clique em Atualizar esta página para gerar a métrica de Mudança de layout cumulativa (CLS).

Clique na guia Network (Rede) > Online > Fast 3G (Conexão 3G rápida) para simular uma conexão de rede rápida.
Clique na guia Console.
Clique em qualquer lugar na página da Web para gerar as métricas de LCP e FID novamente.

Clique em "Atualizar esta página" para gerar a CLS novamente.

Pronto! Você mediu as Principais métricas da Web da página.

4. Analisar os dados da web-vitals em mais detalhes

Para cada um dos eventos das Principais métricas da Web que você está medindo, há várias informações disponíveis nos dados retornados que podem ser usadas para depurar os gargalos de performance. Cada evento da web-vitals contém uma matriz entries, com informações sobre os eventos que contribuem para o valor atual da métrica.

`entries` de CLS

A expansão da propriedade entries do objeto registrado por getCLS() mostra uma lista de entradas LayoutShift. Cada LayoutShift contém uma propriedade value, que reflete a pontuação da mudança do layout (link em inglês) e uma matriz sources, que podemos usar para ver quais elementos mudaram.

Nesse exemplo, duas mudanças de layout ocorreram, ambas movendo um elemento h1 na página. A propriedade currentRect informa onde o elemento está atualmente e o elemento previousRect nos diz onde ele estava antes.

`entries` de LCP

Expandir a propriedade de entradas do objeto registrado pelo getLCP() nos mostra quais elementos eram candidatos a ser a Maior exibição de conteúdo antes do valor final ser informado.

No exemplo, a matriz entries contém uma lista de todos os candidatos à LCP em ordem cronológica. Nesse caso, um elemento h1 foi renderizado primeiro, depois outro img. O elemento img foi identificado como a Maior exibição de conteúdo. O elemento da LCP informado é sempre o último item da matriz.

`entries` de FID

Quando você expande a propriedade entries do objeto registrado por getFID(), ela mostra uma matriz contendo a entrada PerformanceEventTiming para a primeira entrada do usuário na página.

A propriedade name informa qual tipo de entrada do usuário acionou o timer para a disponibilidade da linha de execução principal. O value que a web-vitals informa é o atraso entre as propriedades startTime e processingStart da entrada PerformanceEventTiming, convertidas de microssegundos para milissegundos. Nesse caso, a FID medida é de dois milissegundos.

5. Preparar e enviar dados da web-vitals ao Google Analytics 4

Antes de enviar os dados da web-vitals ao Google Analytics 4, eles precisam ser convertidos em um formato que o GA4 aceite. Você também vai adicionar algumas funções úteis que extraem informações valiosas de diagnóstico.

Gerar um seletor para ajudar a identificar o nó de destino de entrada

Primeiro, adicione uma função ao bloco de script que gere uma representação de string do nó e o lugar dele no DOM, em um formato parecido com um seletor de CSS. A saída dessa função ajuda a identificar quais elementos da página são responsáveis pelos valores das Principais métricas da Web.

diagnostics.html (link em inglês)

function getSelector(node, maxLen = 100) {
 let sel = '';
 try {
   while (node && node.nodeType !== 9) {
     const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
       (node.className && node.className.length) ?
       '.' + Array.from(node.classList.values()).join('.') : '');
     if (sel.length + part.length > maxLen - 1) return sel || part;
     sel = sel ? part + '>' + sel : part;
     if (node.id) break;
     node = node.parentNode;
   }
 } catch (err) {
   // Do nothing...
 }
 return sel;
}

Extrair informações de `LayoutShift`

Registrar toda mudança de layout que ocorrer pode gerar uma quantidade excessiva de dados. As funções abaixo se concentram apenas na maior entrada LayoutShift e na maior LayoutShiftSource nela. Isso permite que você concentre as otimizações nas causas mais significativas de mudanças de layout no site. À medida que você identifica as causas de mudanças no layout e encontra maneiras de minimizar essas ocorrências, a fonte da maior mudança de layout vista nos relatórios muda para mostrar o novo elemento com pior resultado.

diagnostics.html (link em inglês)

function getLargestLayoutShiftEntry(entries) {
 return entries.reduce((a, b) => a && a.value > b.value ? a : b);
}

function getLargestLayoutShiftSource(sources) {
 return sources.reduce((a, b) => {
   return a.node && a.previousRect.width * a.previousRect.height >
       b.previousRect.width * b.previousRect.height ? a : b;
 });
}

getLargestLayoutShiftEntry() retorna apenas a maior entrada de mudança de layout durante o ciclo de vida da visualização de página.
getLargestLayoutShiftSource() retorna apenas a maior fonte de mudança de layout nessa entrada.

Determinar se a FID aconteceu antes ou depois de `DOMContentLoaded`

O evento DOMContentLoaded ocorre depois que o HTML da página é carregado e analisado completamente, o que inclui aguardar o carregamento de qualquer script síncrono, adiado ou de módulos, incluindo todos os módulos importados estaticamente. Essa função vai retornar true se a primeira entrada do usuário tiver ocorrido antes de DOMContentLoaded ou false se a entrada acontecer depois.

diagnostics.html (link em inglês)

function wasFIDBeforeDCL(fidEntry) {
 const navEntry = performance.getEntriesByType('navigation')[0];
 return navEntry && fidEntry.startTime < navEntry.domContentLoadedEventStart;
}

Identificar o elemento de destino da FID

Outro sinal de depuração potencialmente útil é o elemento com que a interação ocorreu. Embora a interação com o elemento não contribua para a FID, porque ela é apenas uma parte do atraso da latência total do evento, saber com quais elementos os usuários estão interagindo pode ser útil para determinar como melhorar a FID.

Para acessar o elemento associado ao primeiro evento de entrada, faça referência à propriedade target da entrada first-input:

diagnostics.html (link em inglês)

function getFIDDebugTarget(entries) {
  return entries[0].target;
}

Identificar o tipo de evento de entrada da FID

Também pode ser útil capturar qual tipo de evento acionou a medição da FID para identificar como os usuários estão interagindo com as páginas.

diagnostics.html (link em inglês)

function getFIDEventType(entries) {
  return entries[0].name;
}

Estruturar informações de depuração para cada uma das Principais métricas da Web

A última etapa antes de enviar esse código ao Google Analytics é organizar as informações das entradas, incluindo as informações retornadas pelas funções acima.

diagnostics.html (link em inglês)

function getDebugInfo(name, entries = []) {
  // 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 (entries.length) {
    if (name === 'LCP') {
      const lastEntry = entries[entries.length - 1];
      return {
        debug_target: getSelector(lastEntry.element),
        event_time: lastEntry.startTime,
      };
    } else if (name === 'FID') {
      const firstEntry = entries[0];
      return {
        debug_target: getSelector(firstEntry.target),
        debug_event: firstEntry.name,
        debug_timing: wasFIDBeforeDCL(firstEntry) ? 'pre_dcl' : 'post_dcl',
        event_time: firstEntry.startTime,
      };
    } else if (name === 'CLS') {
      const largestEntry = getLargestLayoutShiftEntry(entries);
      if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
        const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
        if (largestSource) {
          return {
            debug_target: getSelector(largestSource.node),
            event_time: largestEntry.startTime,
          };
        }
      }
    }
  }
  // Return default/empty params in case there are no entries.
  return {
    debug_target: '(not set)',
  };
}

Enviar os dados ao Google Analytics

Por fim, crie uma função que transmita os parâmetros do evento web-vitals ao Google Analytics.

diagnostics.html (link em inglês)

function sendToGoogleAnalytics({ name, delta, value, id, entries }) {
  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, entries)
  });
}

Registre a função com cada uma das funções web-vitals, que vão ser acionadas quando o navegador estiver pronto para medir cada evento:

diagnostics.html (link em inglês)

getLCP(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getCLS(sendToGoogleAnalytics);

Muito bem! Agora você está enviando eventos da web-vitals ao Google Analytics.

6. Verificar se os dados da web-vitals estão preenchidos no Google Analytics

Para garantir que os eventos sejam registrados pela propriedade do Google Analytics 4, faça o seguinte:

Abra a propriedade do Google Analytics 4 e navegue até Reports (relatórios).

Selecione Realtime (tempo real).

Atualize a página de teste algumas vezes e clique nela a cada atualização para acionar eventos da FID.
Procure a seção Event count by event name (quantidade de eventos por nome do evento) na IU da Realtime overview (visão geral em tempo real). Você vai ver os eventos LCP, FID e CLS.

Clique no nome de qualquer um dos eventos para ver os parâmetros transmitidos por ele.

Clique nessas chaves de parâmetros para ver um resumo dos valores que o Google Analytics recebeu.

Você pode adicionar outros dados às informações de depuração, como nomes de modelos de páginas ou outros eventos relevantes para a FID discutidos anteriormente neste codelab. Basta modificar as instruções return na função getDebugInfo().

Quando os dados das páginas de teste forem suficientes, implante o novo código do GA na produção do seu site e avance para a próxima etapa.

7. Consultar dados no BigQuery

Depois que o código do Google Analytics estiver ativo por alguns dias, você vai poder consultar os dados no BigQuery. Primeiro, confira se os dados estão sendo transferidos para o BigQuery.

Abra o Console do Google Cloud e selecione seu projeto no menu suspenso na parte de cima da tela.
No menu de navegação no canto esquerdo de cima da tela, clique em BigQuery no cabeçalho Analytics.
No painel Explorer, expanda seu projeto para ver o conjunto de dados do Google Analytics. O nome do conjunto de dados é analytics_, seguido pelo ID da propriedade do Google Analytics 4 (por exemplo, analytics_229787100).
Expanda o conjunto de dados para ver uma tabela events_. O número entre parênteses é a quantidade de dias disponíveis para consulta.

Subconsulta para selecionar apenas eventos das Principais métricas da Web

Para consultar um conjunto de dados que inclua apenas nossos eventos das Principais métricas da Web, comece com uma subconsulta que selecione os eventos de LCP, CLS e FID dos últimos 28 dias. Essa consulta procura especificamente o último valor informado para cada ID de evento da web-vitals usando a chave metric_id. Isso garante que os mesmos eventos das Principais métricas da Web não sejam contados mais de uma vez.

# 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', 'FID', '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
)

Isso forma a base de todas as suas consultas deste conjunto de dados. A consulta principal vai ser executada na tabela temporária web_vitals_events.

Como os eventos do GA4 são estruturados

Cada dado de evento do Google Analytics 4 é armazenado em um elemento STRUCT na coluna event_params. Cada um dos parâmetros de evento transmitidos ao GA4 no seu site é representado pela própria chave, e o valor é uma STRUCT com uma chave para cada tipo de dados possível. No exemplo acima, a chave metric_value pode ter um int_value ou um double_value. Portanto, a função COALESCE() é usada. Para receber o debug_target transmitido anteriormente, selecione a chave string_value no debug_target.

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

Encontrar as páginas e elementos com pior desempenho

O debug_target é uma string de seletor de CSS que corresponde ao elemento na página mais relevante para o valor da métrica.

No caso da CLS, o debug_target representa o maior elemento da maior mudança de layout que contribuiu para o valor do CLS. Se nenhum elemento tiver mudado, o valor de debug_target vai ser null.

As listas de consultas abaixo mostram as páginas do pior desempenho para o melhor usando o valor de CLS no 75º percentil, agrupadas pelo 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 você souber quais elementos na página estão mudando, vai ser mais fácil identificar e corrigir a raiz do problema.

Não se esqueça que os elementos informados aqui podem não ser os mesmos que você vê ao modificar suas páginas localmente. Por isso, é muito importante capturar esses dados. É muito difícil corrigir problemas que você não percebe.

Depurar outras métricas

A consulta acima mostra os resultados da métrica da CLS. A mesma técnica pode ser usada para gerar relatórios sobre os destinos de depuração de LCP e FID. Basta substituir a cláusula WHERE pela métrica relevante para depurar:

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. Ver os resultados da consulta no Data Studio

O BigQuery oferece uma maneira rápida de visualizar os resultados de consultas usando o Data Studio. O Data Studio é uma ferramenta para visualizar e converter dados em painéis que pode ser usada sem custos financeiros. Para visualizar os resultados da consulta após a execução na IU do BigQuery, clique em Explore Data (explorar dados) e selecione Explore with Data Studio (explorar com o Data Studio).

Opção "Explorar com o Data Studio" no BigQuery

Fazer isso cria um link do BigQuery no Data Studio na visualização de exploração. Nessa página, você pode selecionar os campos que quer visualizar, escolher os tipos de gráfico, configurar filtros e criar gráficos ad-hoc para uma análise visual mais rápida. Com base nos resultados da consulta acima, é possível criar este gráfico de linhas para ver a tendência dos valores de LCP ao longo do tempo:

Gráfico de linhas de valores diários de LCP no Data Studio

Com essa vinculação direta entre o BigQuery e o Data Studio, você pode criar gráficos rápidos usando qualquer uma das suas consultas e fazer análises visuais. Se quiser fazer outras análises, você pode ver vários gráficos em um painel interativo para ter uma visão mais holística ou analisar os dados em mais detalhes. Ter um painel prático significa que você não precisa escrever consultas e gerar gráficos manualmente sempre que quiser analisar as métricas.

Você pode criar um painel no Data Studio usando o conector nativo do BigQuery. Para fazer isso, acesse datastudio.google.com, crie uma nova fonte de dados, selecione o conector do BigQuery e escolha o conjunto de dados com que você quer trabalhar:

Uso do conector nativo do BigQuery no Data Studio

9. Materializar os dados das Métricas da Web

Não é eficiente usar o conjunto de dados de exportação do Google Analytics 4 diretamente ao criar painéis de dados de eventos de Métricas da Web como descrito acima. Devido à estrutura dos dados do GA4 e ao pré-processamento necessário para as Métricas da Web, partes da consulta acabam sendo executadas várias vezes. Isso cria dois problemas: o desempenho do painel e os custos do BigQuery.

É possível usar o modo sandbox do BigQuery sem custos financeiros. Com o nível de uso sem custos financeiros do BigQuery, não é preciso pagar pelo primeiro 1 TB de dados de consulta processados por mês. Para os métodos de análise discutidos nessa postagem, a menos que você esteja usando um conjunto de dados significativamente grande ou consultando com frequência o conjunto de dados, é possível permanecer dentro desse limite todos os meses. No entanto, se você tem um site de alto tráfego e quer monitorar regularmente diferentes métricas usando um painel interativo rápido, sugerimos o pré-processamento e a materialização dos seus dados das Métricas da Web, além do uso dos recursos de eficiência do BigQuery, como particionamento, clustering e armazenamento em cache.

O script abaixo faz o pré-processamento dos dados do BigQuery (tabela de origem) e cria uma tabela materializada (tabela de destino).

# 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', 'FID', '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');

Esse conjunto de dados materializados oferece várias vantagens:

A estrutura dos dados é simplificada e mais fácil de consultar.
Ele retém apenas os eventos das Métricas da Web do conjunto de dados original do GA4.
As informações sobre o ID da sessão, tipo de usuário (novo x recorrente) e engajamento ficam disponíveis diretamente nas colunas.
A tabela é particionada por data e agrupada em cluster pelo nome da métrica. Isso geralmente reduz a quantidade de dados processados em cada consulta.
Como você não precisa usar caracteres curinga para consultar essa tabela, os resultados da consulta podem ser armazenados em cache por até 24 horas. Isso reduz os custos de repetir a mesma consulta.
Se você usar o BI Engine do BigQuery, vai poder executar funções e operadores SQL otimizados nesta tabela.

É possível consultar diretamente essa tabela materializada na IU do BigQuery ou usar ela no Data Studio pelo conector do BigQuery.

Executar jobs de materialização com frequência

Se você executar a consulta acima sem estabelecer um período, ela vai ser executada usando todo o conjunto de dados do Google Analytics. Evite fazer isso, porque muitos dados históricos vão ser processados novamente. É possível atualizar a consulta para anexar apenas os dados do dia anterior. Para isso, remova a instrução CREATE or REPLACE TABLE no início da consulta e adicione outros critérios à cláusula WHERE na subconsulta da tabela events_intraday_:

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'FID', '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)

Essa consulta retorna apenas dados do dia anterior. Você pode usar o Console do BigQuery para programar a consulta de modo que ela seja executada diariamente.

10. Visualizar os dados no Google Data Studio

O Google Data Studio oferece suporte nativo à leitura de dados do Google BigQuery. Agora que os dados da web-vitals do Google Analytics 4 estão sendo preenchidos no BigQuery, use o conector do BigQuery no Data Studio para ler diretamente a tabela materializada.

Usar o conector das Métricas da Web

Desenvolvemos uma solução em pacote que cria um modelo de painel por você já que fazer isso do zero demoraria muito. Primeiro, confira se você materializou a tabela das Principais métricas da Web usando a consulta acima. Em seguida, acesse o conector das Métricas da Web do Data Studio neste link: goo.gle/web-vitals-connector

Depois de fornecer uma autorização única, você vai ver a tela de configuração abaixo:

Tela de autorização do conector das Métricas da Web

Forneça o ID da tabela materializada do BigQuery (ou seja, a tabela de destino) e o ID do projeto de faturamento do BigQuery. Depois que você clicar em CONNECT (conectar), o Data Studio vai criar um novo painel com modelo e associar os dados a ele. Você pode editar, modificar e compartilhar o painel como quiser. Se você criar um painel uma vez, não vai precisar acessar o link do conector novamente, a menos que queira criar vários painéis usando diferentes conjuntos de dados.

Navegar no painel

Ao navegar no painel, você vê as tendências diárias das Métricas da Web e algumas informações sobre o uso do site, como usuários e sessões, na guia "Resumo".

Na guia "Análise de usuários", é possível selecionar uma métrica e ver informações detalhadas do percentil e da contagem de usuários de acordo com diferentes métricas de uso e de negócios.

A guia "Análise de caminho da página" ajuda a identificar as áreas problemáticas do site. Nessa guia, é possível selecionar uma métrica para acessar a visão geral e também ver o mapa da dispersão de todos os caminhos da página, com o valor do percentil no eixo y e a contagem de registros no eixo X. O mapa pode ajudar a identificar páginas com valores de métrica menores do que o esperado. Depois de selecionar as páginas, você pode detalhar a área problemática com o gráfico de dispersão da tabela "Caminho da página" ou visualizando a tabela "Destino de depuração".

A guia "Análise de receita" é um exemplo de como monitorar métricas comerciais e de desempenho no mesmo lugar. Essa seção mostra todas as sessões em que o usuário fez uma compra. Você pode comparar a receita ganha com a experiência do usuário durante uma sessão específica.

11. Outros recursos

Você terminou este codelab. Agora você sabe acompanhar o desempenho do seu site com um alto nível de granularidade usando as Principais métricas da Web. Também consegue identificar tipos de página e elementos específicos do site que causam altas nas Principais métricas da Web para que você saiba onde concentrar as otimizações.

Documentos de referência

Este codelab usa como referência dois artigos do web.dev:
Artigo sobre como medir as Métricas da Web no campo.
O artigo sobre como usar os dados das Métricas da Web do GA4 no BigQuery (em inglês), com muitos outros exemplos de consulta.
Se você precisar de mais informações sobre a integração do GA4 > BigQuery Export, consulte a Central de Ajuda do Google Analytics.

Medir a performance com a web-vitals.js, o Google Analytics e o BigQuery

1. Antes de começar

O que você vai fazer

O que é necessário

Antes de começar

2. Adicionar a biblioteca web-vitals e a gtag a uma página da Web

basic.html (link em inglês)

basic.html (link em inglês)

basic.html (link em inglês)

3. Medir as Principais métricas da Web da página

4. Analisar os dados da web-vitals em mais detalhes

entries de CLS

entries de LCP

entries de FID

5. Preparar e enviar dados da web-vitals ao Google Analytics 4

Gerar um seletor para ajudar a identificar o nó de destino de entrada

diagnostics.html (link em inglês)

Extrair informações de LayoutShift

diagnostics.html (link em inglês)

Determinar se a FID aconteceu antes ou depois de DOMContentLoaded

diagnostics.html (link em inglês)

Identificar o elemento de destino da FID

diagnostics.html (link em inglês)

Identificar o tipo de evento de entrada da FID

diagnostics.html (link em inglês)

Estruturar informações de depuração para cada uma das Principais métricas da Web

diagnostics.html (link em inglês)

Enviar os dados ao Google Analytics

diagnostics.html (link em inglês)

diagnostics.html (link em inglês)

6. Verificar se os dados da web-vitals estão preenchidos no Google Analytics

7. Consultar dados no BigQuery

Subconsulta para selecionar apenas eventos das Principais métricas da Web

Como os eventos do GA4 são estruturados

Encontrar as páginas e elementos com pior desempenho

Depurar outras métricas

8. Ver os resultados da consulta no Data Studio

9. Materializar os dados das Métricas da Web

Executar jobs de materialização com frequência

10. Visualizar os dados no Google Data Studio

Usar o conector das Métricas da Web

Navegar no painel

11. Outros recursos

Leia mais

Documentos de referência

`entries` de CLS

`entries` de LCP

`entries` de FID

Extrair informações de `LayoutShift`

Determinar se a FID aconteceu antes ou depois de `DOMContentLoaded`