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 predefinido do Gerenciador de tags do Google (GTM) e a 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 os dados dos campos das Core Web Vitals e as métricas de performance do anúncio 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 das Web Vitals nos relatórios do dataLayer e do GA4.
  • Vincule sua propriedade do GA4 ao Google Ad Manager e ao Google AdSense.
  • Correlacionar 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 fazer o download do modelo de tag do GTM.

  1. Abra o arquivo template.tpl
  2. Faça o download do arquivo no seu computador

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

  1. Abra o contêiner da Web.
  2. Crie um novo espaço de trabalho e insira um nome, por exemplo, "Medição das 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".

Importação de um modelo de tag do Gerenciador de tags do Google.

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

Salvando 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 das Métricas da Web

  1. No seu espaço de trabalho do Gerenciador de tags do Google, acesse "Tags".
  2. Para adicionar a tag das Métricas da Web, clique em "Novo" e em "Configuração da tag". e escolha as "Métricas da Web" na guia "Personalizado" nesta seção.
  3. A próxima etapa é definir as diferentes configurações. Todas as configurações são explicadas no repositório do GitHub (link em inglês). 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, "Todas as páginas".
  2. Adicione também exceções de acionador, se necessário.
  3. Nomeie a tag como "Core Web Vitals – Todas as páginas". e salvar.

Acionador personalizado para a tag de Métricas da Web.

4. analisar os dados das Métricas da Web na camada de dados

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 solicitar um URL para visualizar e depurar sua configuração. Informe 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 a dataLayer.
  4. Primeiro, verifique se a tag de Métricas da Web foi disparada no acionador de visualização de página escolhido.

Verificando se a tag de Métricas da Web foi 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 Métricas da Web na camada de dados.

  1. Clique no primeiro e, à direita, abra a guia "API Call", onde você vai encontrar 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 de web-vitals.js como referência para os diferentes tipos de dados.

5. Enviar dados das Métricas da Web 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
  • Crie 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. Para adicionar um novo acionador, 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.

Acionar a configuração da tag do GA4.

Criar as variáveis da camada de dados

  1. No espaço de trabalho do Gerenciador de tags do Google, acesse "Variáveis".
  2. Crie uma nova variável definida pelo usuário do tipo "Variável da camada de dados".
  3. Definir "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 da camada de dados.

  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 da dataLayer.

  1. Crie "webVitalsData.rating".

Configuração da quarta variável da dataLayer.

  1. Crie "webVitalsData.delta".

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

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

Visão geral de todas as variáveis da camada de dados.

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. Para adicionar uma tag de evento do GA4, clique em "Novo" e em "Configuração da tag" e escolha "Google Analytics: evento do GA4". tag do "Google Analytics" nesta seção.
  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 do nome do evento do GA4.

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

Configuração dos 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 do GA4.
  3. Defina o evento personalizado "web_vitals" como um acionador para a tag do GA4.
  4. Adicione também exceções de acionador, se necessário.

Configuração do acionador da tag do GA4.

6. Verificar dados no GA4

Se quiser validar o fluxo de dados para o GA4, mude novamente para o modo de visualização do Gerenciador de tags do Google. Informe 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 é disparada.

Verificando se a tag do GA4 é disparada.

  1. Abra a tag do GA4 clicando no card para validar. Os dados foram extraídos corretamente do dataLayer. Não se esqueça de mostrar as variáveis como valores.

Enviou dados pela tag do GA4.

  1. Agora, mude para a 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 das Core Web Vitals foram coletados.

Verificação dos dados recebidos no relatório de tempo real do GA4.

  1. Se uma grande quantidade de dados for processada no relatório em tempo real, talvez os eventos não sejam tão fáceis de identificar. Nesse caso, use o relatório de depuração, que permite conferir dados de um dispositivo específico.

Verificação dos dados recebidos no relatório "Visualização de depuração" do GA4.

7. Publicar a configuração

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

  1. Abra o espaço de trabalho do Gerenciador de tags do Google.
  2. No canto superior direito da interface, clique em "Enviar".
  3. Informe o nome e a descrição da 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 das 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. É necessário ter permissão de editor (ou superior) no GA4 e de administrador no Google Ad Manager e no AdSense para fazer a vinculação.

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. Em "Configurações do relatório" ative a opção "Relatórios de propriedades do Google Analytics 4 nos relatórios do Ad Manager".

Ativando 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 e pronto.

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 junto 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 anúncios.

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

Para que o painel funcione e mostre os dados corretamente, os dados dependem da sintaxe e da convenção de nomenclatura deste codelab.

A primeira página do painel mostra um histórico da performance das Core Web Vitals:

Página 1 do Painel de Core Web Vitals.

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

Página 2 do Painel de Core Web Vitals.

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

Página 3 do Painel de Core Web Vitals.

10. Conclusão

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

Saiba mais