Medir os dados de campo das Core Web Vitals com as métricas de anúncios

1. Antes de começar

Neste codelab, você vai aprender a medir as Core Web Vitals com um modelo de tag Gerenciador de tags do Google (GTM) pré-criado e enviar os dados para uma propriedade do Google Analytics 4 (GA4). Você também vai aprender a extrair dados do Google Ad Manager e do Google AdSense para o GA4, a fim de correlacionar dados de campo das Core Web Vitals e métricas de performance de anúncios com um painel pré-criado do Looker Studio.

Atividades deste laboratório

  • Importe e configure uma tag no contêiner do Gerenciador de tags do Google.
  • Meça as Core Web Vitals da página no GA4.
  • Configure uma tag de evento do GA4 no Gerenciador de tags do Google.
  • Analise os dados de Web Vitals no dataLayer e nos relatórios do GA4.
  • Vincule sua propriedade do GA4 ao Google Ad Manager e ao Google AdSense.
  • Correlacione as Core Web Vitals e a receita de publicidade em um painel do Looker Studio.

O que é necessário

  • Uma conta do Google Analytics e uma propriedade da Web do GA4 com acesso de editor.
  • Uma conta do Gerenciador de tags do Google e um contêiner da Web com direitos de publicação.
  • Uma rede do Google Ad Manager e/ou uma conta do Google AdSense com acesso de administrador.
  • Uma conta do Looker Studio.

2. Adicionar o modelo de tag do GitHub ao GTM

A medição das Core Web Vitals usando um modelo de tag do GTM é baseada na biblioteca web-vitals. Primeiro, vamos baixar o modelo de tag do GTM.

  1. Abra o arquivo template.tpl.
  2. Baixe o arquivo no computador.

Agora, acesse sua conta do Gerenciador de tags do Google.

  1. Abra seu contêiner da Web.
  2. Crie um espaço de trabalho e insira um nome (por exemplo, "Medição de Core Web Vitals").
  3. Acesse "Modelos".
  4. Na seção "Modelos de tag", clique no botão "Novo".

Adicionar um modelo de tag do Gerenciador de tags do Google.

  1. Clique no menu Mais ações e selecione "Importar".

Importar um modelo de tag do Gerenciador de tags do Google.

  1. Selecione o arquivo TPL baixado anteriormente no seu computador.
  2. Clique no botão "Salvar".

Salvar um modelo de tag do Gerenciador de tags do Google.

Você adicionou o modelo de tag ao contêiner do Gerenciador de tags do Google.

3. Configurar a tag Web Vitals

  1. No espaço de trabalho do Gerenciador de tags do Google, acesse "Tags".
  2. Para adicionar a tag Web Vitals, clique em "Nova", depois em "Configuração da tag" e escolha a tag "Web Vitals" na seção "Personalizada".
  3. A próxima etapa é configurar as diferentes configurações. Todas as configurações estão explicadas no repositório do GitHub. Para que este codelab e o painel final funcionem, as configurações a seguir são suficientes.

Configuração da tag.

  1. Aplique um dos acionadores de visualização de página, por exemplo, o acionador "Todas as páginas".
  2. Adicione também exceções de acionamento, se necessário.
  3. Nomeie a tag como "Core Web Vitals - Todas as páginas" e salve.

Gatilho personalizado para a tag Web Vitals.

4. Analisar dados de Web Vitals no dataLayer

Para ver a tag em ação, mude para o modo de visualização do Gerenciador de tags do Google. O Assistente de tags vai abrir e pedir um URL para visualizar e depurar sua configuração. Forneça o URL de uma página com o contêiner do Gerenciador de tags do Google implementado e clique em "Conectar". Uma guia separada com o URL fornecido será aberta.

  1. Interaja com a página rolando e clicando em elementos ou espaços em branco.
  2. Em seguida, volte para a guia com o Assistente de tags e o modo de visualização do Gerenciador de tags do Google.
  3. À esquerda, você vai encontrar os diferentes eventos enviados para o dataLayer.
  4. Primeiro, verifique se a tag das Core Web Vitals foi disparada no acionador de visualização de página escolhido.

Verificar se a tag Web Vitals é disparada.

  1. Você também vai encontrar três eventos "web_vitals", em que cada um representa uma Core Web Vital: LCP, INP e CLS.

Três eventos de Web Vitals no dataLayer.

  1. Clique no primeiro e, à direita, abra a guia "Chamada de API", onde você verá os dados enviados do modelo de tag para o dataLayer.

Dados enviados pela tag para o dataLayer.

  1. Verifique também as outras entradas dos eventos "web_vitals". Use a documentação do web-vitals.js como referência para os diferentes tipos de dados.

5. Enviar dados de Web Vitals para o GA4

Para extrair os dados das Core Web Vitals do dataLayer e enviá-los ao GA4, você precisa:

  • Criar um acionador para a tag do GA4
  • Criar variáveis para extrair dados do dataLayer
  • Criar a tag de evento do GA4

Criar o gatilho

  1. No espaço de trabalho do Gerenciador de tags do Google, acesse "Acionadores".
  2. Clique em "Novo", depois em "Configuração do acionador" e escolha "Evento personalizado" na seção "Outros".
  3. Defina "web_vitals" no campo "Nome do evento", nomeie o acionador e salve.

Configuração de acionador para a tag do GA4.

Criar as variáveis dataLayer

  1. No espaço de trabalho do Gerenciador de tags do Google, acesse "Variáveis".
  2. Crie uma variável definida pelo usuário do tipo "Variável da camada de dados".
  3. Defina "webVitalsData.name" no campo "Nome da variável da camada de dados", nomeie a variável (por exemplo, "DLV - webVitalsData.name") e salve.

Configuração da primeira variável dataLayer.

  1. Repita essas etapas para as outras quatro variáveis obrigatórias da camada de dados. Crie "webVitalsData.value".

Configuração para a segunda variável dataLayer.

  1. Crie outra variável com o campo de nome "webVitalsData.id".

Configuração para a terceira variável dataLayer.

  1. Crie "webVitalsData.rating".

Configuração da quarta variável dataLayer.

  1. Cria "webVitalsData.delta".

Configuração para a quinta variável dataLayer.

  1. Você vai terminar com as seguintes variáveis dataLayer definidas pelo usuário:

Visão geral de todas as variáveis dataLayer.

Criar a tag de evento do GA4

Antes de criar uma tag de evento do GA4, verifique se a tag do Google já está configurada.

  1. No espaço de trabalho do Gerenciador de tags do Google, acesse "Tags".
  2. Adicione uma tag de evento do GA4 clicando em "Nova", depois em "Configuração da tag" e escolha a tag "Google Analytics: evento do GA4" na seção "Google Analytics".
  3. Insira seu ID de métricas no campo correspondente.

Campo para o ID de métricas do GA4.

  1. No campo de entrada "Nome do evento", escolha a variável dataLayer "DLV - webVitalsData.name" da etapa criada anteriormente.

Campo para o nome do evento do GA4.

  1. Adicione as outras variáveis dataLayer como parâmetros de evento, conforme mostrado na captura de tela. Adicione também o parâmetro "event_category" com um valor como "Web Vitals" para agrupar os eventos Core Web Vitals.

Configuração de parâmetros de evento na tag do GA4.

  1. Registre esses parâmetros de evento como dimensões personalizadas na interface do GA4.
  2. Aplique outras configurações com base nos requisitos de configuração do GA4.
  3. Defina o evento personalizado "web_vitals" como um acionador para a tag do GA4.
  4. Adicione também exceções de acionamento, se necessário.

Configuração do acionador para a tag do GA4.

6. Verificar dados no GA4

Para validar o fluxo de dados para o GA4, mude novamente para o modo de visualização do Gerenciador de tags do Google. Forneça um URL ao Assistente de tags e clique em "Conectar".

  1. Interaja com a página rolando e clicando em elementos ou espaços em branco.
  2. Em seguida, volte para a guia com o Assistente de tags e o modo de visualização do Gerenciador de tags do Google.
  3. À esquerda, clique em cada uma das entradas "web_vitals" e confirme se a tag das Core Web Vitals do GA4 é acionada.

Verificar se a tag do GA4 é disparada.

  1. Clique no card para abrir a tag do GA4 e validar se os dados estão sendo extraídos corretamente do dataLayer. Mostre as variáveis como valores.

Dados enviados pela tag do GA4.

  1. Agora mude para sua propriedade do GA4 e abra o relatório em tempo real.
  2. No card "Contagem de eventos por nome", você pode validar se os eventos dos Core Web Vitals foram coletados corretamente.

Verificar os dados recebidos no relatório de tempo real do GA4.

  1. Se uma grande quantidade de dados for processada no relatório de tempo real, talvez não seja tão fácil identificar os eventos. Nesse caso, use o relatório do DebugView, que permite ver dados de um dispositivo específico.

Verificar os dados recebidos no relatório DebugView do GA4.

7. Publicar a configuração

Depois de testar a configuração, é hora de publicar o espaço de trabalho.

  1. Abra seu espaço de trabalho do Gerenciador de tags do Google.
  2. No canto superior direito da interface, clique em "Enviar".
  3. Dê um nome e uma descrição à versão e clique em "Publicar" para ativar a configuração.

8. Conectar o GA4 ao Google Ad Manager ou ao Google AdSense

Depois de coletar dados de Core Web Vitals no GA4, as métricas relacionadas a anúncios também precisam estar disponíveis no GA4 para que o painel funcione. Conecte o Google Ad Manager e o Google AdSense ao GA4 ou apenas uma dessas soluções de publicidade. Para fazer a vinculação, você precisa ter permissão de editor (ou superior) no GA4 e de administrador no Google Ad Manager e no Google AdSense.

Conectar o GA4 ao Google Ad Manager

  1. Acesse sua rede do Google Ad Manager.
  2. Clique em "Administrador" > "Configurações globais" > "Configurações de rede".
  3. Na seção "Configurações do relatório", ative "Relatórios de propriedade do Google Analytics 4 nos relatórios do Ad Manager".

Ativar os relatórios de propriedade do GA4 nos relatórios do Ad Manager.

  1. Leia os Termos e Condições e clique em "Confirmar".
  2. Salve a atualização.
  3. Acesse "Administrador" -> "Contas vinculadas" -> "Google Analytics 4".
  4. Clique em "Nova vinculação de propriedade do Google Analytics 4".
  5. Encontre e selecione a propriedade do GA4 que você quer vincular.
  6. Clique em "Salvar" para concluir.

Conectar uma propriedade do GA4 ao Ad Manager.

Conectar o GA4 ao Google AdSense

  1. Acesse sua conta do Google AdSense.
  2. Clique em "Conta" > "Acesso e autorização" > "Integração do Google Analytics".
  3. Clique em "+ Novo link".

Conectar uma propriedade do GA4 ao Google AdSense.

  1. Encontre e selecione a propriedade do GA4 que você quer vincular.
  2. Clique em "Criar link".

9. Visualizar dados com o Looker Studio

Para uma apresentação visual dos dados das Core Web Vitals com as métricas de anúncios, esta etapa envolve a configuração de um painel do Looker Studio. Siga estas etapas para correlacionar as Core Web Vitals e a receita de publicidade.

  1. Abra este modelo de painel do Looker Studio.
  2. Copie o painel.
  3. Para atualizar a fonte de dados, selecione sua propriedade do GA4 na lista suspensa.
  4. Concluído

Para que o painel funcione e mostre os dados corretamente, eles precisam seguir a sintaxe e a convenção de nomenclatura deste codelab.

A primeira página do painel mostra uma visão histórica da performance das Core Web Vitals:

Página 1 do Painel de Web Vitals.

Na segunda página, é possível correlacionar as Core Web Vitals com a receita de publicidade do Google Ad Manager e/ou do Google AdSense:

Página 2 do Painel de Web Vitals.

A terceira página permite analisar a performance das Core Web Vitals no nível do caminho da página junto com métricas relacionadas a anúncios:

Página 3 do Painel de Web Vitals.

10. Conclusão

Parabéns! Você aprendeu a medir e gerar relatórios sobre as Core Web Vitals com o GA4 e as métricas de performance de anúncios do Google Ad Manager e do Google AdSense.

Saiba mais