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

  • Importar e configurar 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.
  • 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 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 é feita com base na biblioteca web-vitals. Primeiro, faremos 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 seu 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. Em "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 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 seu contêiner do Gerenciador de tags do Google.

3. Configurar a tag das Métricas da Web

  1. No 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 este codelab e o painel final funcionarem, as configurações abaixo são suficientes.

Configuração da tag.

  1. Aplique um dos acionadores de visualização de página, por exemplo, "Todas as páginas" gatilho.
  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 será aberto e solicitará 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 será aberta com o URL fornecido.

  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ê verá os diferentes eventos enviados para 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 deve ver três "web_vitals", eventos, em que cada uma representa uma das Core Web Vitals: LCP, INP e CLS.

Três eventos de Métricas da Web na camada de dados.

  1. Clique na primeira e, à direita, abra "Chamada de API" que mostra os dados enviados do modelo de tag para o dataLayer.

Dados enviados pela tag para a camada de dados.

  1. Verifique também as outras entradas de "web_vitals" eventos. 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" e em "Configuração do acionador" e escolha "Evento personalizado" na guia "Outros" nesta seção.
  3. Definir "web_vitals" No campo "Nome do evento", dê um nome ao acionador e salve.

Configuração do 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. 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 para a 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 para a quarta variável "dataLayer".

  1. Crie "webVitalsData.delta".

Configuração para a quinta variável do 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 do ID de métricas do GA4.

  1. Para o campo "Nome do evento", campo de entrada, 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 "web_vitals" evento personalizado como um acionador para a tag do GA4.
  4. Adicione também exceções de acionador, se necessário.

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

6. Verificar os 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. Forneça um URL para o 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 um dos "web_vitals" e confirme se a tag de 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. Mude para a propriedade do GA4 e abra o Relatório de tempo real.
  2. Na caixa "Contagem de eventos por nome do evento", para verificar se os eventos das Core Web Vitals foram coletados.

Verificar os dados recebidos no relatório em 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 facilmente identificáveis. Nesse caso, use o relatório debugview, que permite ver dados de um dispositivo específico.

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

7. Publicar a configuração

Depois de testar a configuração, é hora de publicar o 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. Forneça um nome e uma descrição da versão e publique a configuração clicando em "Publicar".

8. Conectar o GA4 com o Google Ad Manager ou 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 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 publicidade.

  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 dados corretamente, os dados dependem da convenção de sintaxe e nomenclatura deste codelab.

A primeira página do painel oferece uma visualização histórica do desempenho das Core Web Vitals:

Página 1 do Painel de Core 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 Core Web Vitals.

Na terceira página, você pode analisar o desempenho das Core Web Vitals no nível do caminho da página com métricas relacionadas a anúncios:

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