Data Layer para Publishers: capturando editorias e tags no GA4

A +A −

Quando se trata de portais de conteúdo e notícias, uma dúvida comum que chega aos consultores de aquisição é: “Como posso identificar quais editorias, autores e tópicos geraram mais interesse nas pautas veiculadas?” ou mesmo quaisquer outras informações relevantes que não são coletadas diretamente em plataformas como o Google Analytics. Para responder a essa pergunta de maneira eficiente, a implementação de um Data Layer (camada de dados “adicionais”) é a alma da estratégia editorial.

Fique conosco que nesse post, eu diria o melhor até o momento sobre o tema, irei mostrar como criar um dataLayer relevante para qualquer canal de notícias, vamos dar o código pré-pronto para vopcê usar na sua aplicação em WordPress, mostrar como configurar no GTM e no GA4, e ainda mais: como criar um relatório com esses dados no Analytics e no Looker. Em outras palavras:

• A importância de capturar informações ricas com um Data Layer, e o que “pescar” de informações nele.
  • Código para caputar as informações no WordPress (php super levinho)
• Como visualizar esses dados pode transformar estratégias editoriais.
  • Configuração no GTM
  • Configuração no GA4
  • Relatório básico de análise GA4
  • Dashzinho de leve no Looker
• Um guia prático para configurar e validar o Data Layer no seu WordPress (o conceito vale para qualquer aplicação DEVs), GTM e GA4 com dashboard integrado no Looker.

Antes de mais nada: por que capturar dados ricos é essencial?

A criação de um Data Layer permite que você registre e analise informações detalhadas sobre o desempenho do seu conteúdo. Saber por exemplo quais editorias, autores e tags geram mais engajamento fornece insights valiosos, ou mesmo quantas palavras os posts de maior sucesso possuiam, se eram mais curtos ou extensos, se tinham galerias, quizz, relacionadas, anúncios, enfim… Perceba que você pode e deve criar os seus gatilhos interessantes para analisar.

Essa estratégia de: do que eu preciso para que eu preciso, pode te levar para:

• Identificar os temas que mais interessam ao público.
• Mapear tendências de comportamento.
• Orientar estratégias editoriais baseadas em dados reais.
• Testes da influencia de layouts diferentes influenciam em métricas de engajamento
• etc…
• etc..
• e etc…

É dentro dos detalhes que estão as respostas… e uma camada de dados tonificada vai te dar maior clareza das ações necessárias para a sua audiência.

Cuspindo o Data layer

Para capturar informações específicas nas páginas do seu site ou blog, entenda o que você quer, de cada template, tipo de post, enfim, o primeiro passo é capturar informações do back-end, montar um script e enviar as informações através de um push no Data Layer, que servirá para o tagueamentyo nas plataformas.

O código abaixo é o verdadeiro “ouro” para você capturar informações das suas singles (postagens editoriais). Ele deve ser colocado no cabeçalho das páginas, normalmente o header.php, e de acordo com seus objetivos de coleta. Repare no código PHP para WordPress abaixo com os devidos comentários:

%%PB_PROTECTED_0%%

<?php if (is_singular('post')) : ?>

<script>
window.dataLayer = window.dataLayer || [];
dataLayer = [{
"titulo": "<?php echo esc_js(get_the_title()); ?>",
"linhaFina": "<?php echo esc_js(get_the_excerpt()); ?>",
"url": "<?php echo esc_url(get_the_permalink()); ?>",
"autor": "<?php echo esc_js(get_the_author_meta('user_firstname')); ?> <?php echo esc_js(get_the_author_meta('user_lastname')); ?>",
"dataPublicacao": "<?php echo esc_html(get_the_date('Y-m-d')); ?>",
"horaPublicacao": "<?php echo esc_html(get_the_date('H:i')); ?>",
"dataModificacao": "<?php echo esc_html(get_the_modified_date('Y-m-d')); ?>",
"horaModificacao": "<?php echo esc_html(get_the_modified_date('H:i')); ?>",
"id": "<?php echo esc_js(get_the_ID()); ?>",
"path": "<?php echo esc_url(parse_url(get_permalink(), PHP_URL_PATH)); ?>",
"tipo": "<?php echo esc_js(get_post_type() === 'post' ? 'Single Post' : 'Single Glossário'); ?>",
"termoBusca": "<?php global $wp_query;
// Verifica se há uma query de busca
$termoBusca = '';
if (is_search() && isset($wp_query->query_vars['s'])) {
$termoBusca = sanitize_text_field($wp_query->query_vars['s']);
}
echo esc_js($termoBusca); ?>",
"numeroPalavras": "<?php echo esc_js(str_word_count(trim(strip_tags($post->post_content)))); ?>",
"temImagem": "<?php 
$content = get_the_content();
$featured_image = get_the_post_thumbnail_url();
$content = str_replace($featured_image, '', $content);
echo esc_js(preg_match_all('/<img[^>]+>/', $content) > 0 ? 'sim' : 'não'); 
?>",
"editoria": [<?php 
$categories = get_the_category();
$category_names = array();
foreach ($categories as $category) {
$category_names[] = "\"" . esc_js($category->name) . "\"";
}
echo implode(", ", $category_names);
?>],
"tags": [<?php 
$tags = get_the_tags();
$tag_names = array();
if ($tags) {
foreach ($tags as $tag) {
$tag_names[] = "\"" . esc_js($tag->name) . "\"";
}
}
echo implode(", ", $tag_names);
?>]
}];
</script>

<?php endif; ?>

No exemplo acima estaremos capturando várias informações valiosas. São elas:

Título (titulo)

• O título do post ou página.

Linha fina (linhaFina)

• O resumo ou excerpt do conteúdo.

URL (url)

• O link completo para o post ou página.

Autor (autor)

• Nome completo do autor do conteúdo.

Data de publicação (dataPublicacao)

• Data em que o conteúdo foi publicado (formato: YYYY-MM-DD).

Hora de publicação (horaPublicacao)

• Hora exata da publicação (formato: HH:mm).

Data de modificação (dataModificacao)

• Data da última modificação do conteúdo (formato: YYYY-MM-DD).

Hora de modificação (horaModificacao)

• Hora da última modificação do conteúdo (formato: HH:mm).

ID (id)

• Identificador único do post ou página.

Caminho (path)

• O caminho da URL (sem o domínio).

Tipo (tipo)

• Identifica o tipo de conteúdo (ex.: Single Post, default, etc.).

Número de palavras (numeroPalavras)

• Quantidade de palavras no conteúdo.

Tem imagem (temImagem)

• Indica se o conteúdo tem imagens destacadas incorporadas (valores: sim ou não).

Editorias (editoria)

• Lista de categorias do conteúdo.

Tags (tags)

• Lista de tags associadas ao conteúdo.

Use o DevTools no navegador para confirmar os valores no Data Layer

Depois de colocar o código acima nas páginas de interesse, no caso acima das postagens em “post” e “glossario”, devemos agora verificar se os dados estão realmente disponíveis no Data Layer. No console do navegador:

• Acesse o site e abra o DevTools (F12 ou Ctrl+Shift+I).
• Vá até a aba Console.
• Digite dataLayer e pressione Enter.
• Verifique se o Data Layer contém os valores esperados, como editorias, tags, etc.

Um exemplo esperado:

Se o Data Layer não contiver esses dados, será necessário ajustar o script que popula o Data Layer. Use o chatGPT para te guiar. Essa é uma tarefa relativamente simples.

Crie variáveis personalizadas no GTM

Crie variáveis personalizadas com “variáveis de camada de dados” no GTM, inclua cada parâmetro como “editorias”, “tags”, “autores”, e nomeie a sua variável personalizada para busca-la quando criarmos a tag de disparo.

Estarei utilizando uma nomenclatura de exemplo, mas quero deixá-los a vontade para escolher como preferirem. Vou criar algumas de exemplificação e depois vocês devem recriar o processo para cada variável de informação. Criarei:

• DL - Editorias
• DL - Tags
• DL - Autor

Passo a passo para criar as variáveis personalizadas no GTM

1. Acesse o GTM e vá até Variáveis.
2. Encontre as variáveis personalizadas, como DL - Editorias, e clique nelas.
3. Verifique:
   • Tipo de variável: Camada de Dados.
   • Nome da chave: editorias (deve ser exatamente como está no Data Layer).

Configuração dos parâmetros de eventos na tag do GA4 no GTML

Certifique-se de que os parâmetros personalizados editoria e tags estão corretamente configurados na tag do GA4:

• Acesse a tag do GA4 no GTM.
• Na seção de Parâmetros Personalizados, insira:
  • Nome do parâmetro: editoria
  • Valor: {{DL - Editorias}}
  • Nome do parâmetro: tags
  • Valor: {{DL - Tags}}

Teste a implementação no GTM

Já que vc cuspiu o dataLayer nas páginas, criou as variáveis personalizadas, configurou a tag global do Ga4, agora já pode visualizar no debug mode se eles estão aparecendo em “Variáveis”.

Use o Modo de Prévia do GTM:

• Acesse o GTM e clique em Visualizar.
• Navegue no seu site para acionar a tag do GA4.
• Verifique no painel do Debug Mode do GTM se os valores de editoria e tags estão sendo capturados corretamente no Data Layer.

Use o DebugView do GA4:

• No GA4, vá até Administrador > DebugView.
• Navegue no seu site e procure eventos disparados. Veja se os parâmetros editoria e tags aparecem associados aos eventos no DebugView.

Agora que está tudo certo no GTM, você precisa ir até o GA4 e criar “Definições personalizadas” na área do Administrador:

Configure os Parâmetros Personalizados no GA4

No GA4, você precisa registrar os parâmetros editoria e tags para visualizá-los nos relatórios:

1. Acesse Administrador > Definições Personalizadas > Parâmetros Personalizados.
2. Clique em Criar Definição Personalizada.
3. Para cada parâmetro:
   • Nome: Editorias (ou Tags, conforme o caso).
   • Escopo: Evento.
   • Parâmetro do evento: editoria (ou tags).
4. Salve as configurações.

Configurar os parâmetros no GA4

Certifique-se de que os valores enviados pelos eventos estão sendo registrados corretamente no GA4:

• Acesse o Google Analytics 4.
• Vá para Configurações de evento e confirme se os eventos do Data Layer (como editoria, tags, etc.) estão sendo coletados.
  • No menu lateral, clique em Administração > Eventos > Parâmetros Personalizados.
  • Adicione os parâmetros (editoria, tags, etc.) como dimensões personalizadas:
    • Nome da dimensão: Editorias
    • Escopo: Evento
    • Nome do parâmetro: editoria (o nome exatamente como enviado pelo evento no GTM).

Aguarde até 24 horas para que as dimensões personalizadas estejam disponíveis no Looker Studio.

Agora você pode criar Relatórios Personalizados para Visualizar Editorias e Tags

Para visualizar editorias mais acessadas

1. Acesse o menu Exploração no GA4.
2. Clique em Criar Exploração.
3. Configure as dimensões e métricas:
   • Dimensão principal: Editorias.
   • Métrica: Total de eventos (ou outra métrica, como Visualizações de Página).
4. Arraste a dimensão “Editorias” para Linhas e a métrica “Total de Eventos” para Valores.

Para visualizar as tags mais utilizadas

1. Acesse o menu Exploração no GA4.
2. Clique em Criar Exploração.
3. Configure as dimensões e métricas:
   • Dimensão principal: Tags.
   • Métrica: Total de eventos (ou outra métrica, como Visualizações de Página).
4. Arraste a dimensão “Tags” para Linhas e a métrica “Total de Eventos” para Valores.

Valide os Dados nos Relatórios do GA4

Após configurar tudo, dê alguns dias para que os dados comecem a ser populados. Verifique:

• Em Explorações, veja se os valores de editorias e tags aparecem corretamente.
• Use filtros para identificar padrões e tendências.

Use os Dados nos Relatórios no Looker Studio (antigo Data Studio)

Conectar o Looker Studio ao GA4

1. Acesse o Looker Studio.
2. Crie um novo relatório.
3. Conecte ao GA4:
   • Escolha Adicionar Dados e selecione Google Analytics.
   • Escolha sua propriedade GA4.

Criar a tabela para mostrar as editorias

1. Adicione um gráfico de tabela ao relatório:
   • Clique em Adicionar Gráfico > Tabela.
2. Configure os campos:
   • Dimensão principal: Selecione o parâmetro editoria (ou a dimensão personalizada correspondente criada no GA4).
   • Métrica: Escolha Contagem de Eventos (ou qualquer métrica relevante, como Usuários ou Visualizações).
3. Personalize os filtros:
   • Filtro de evento: Inclua apenas os eventos que contêm o parâmetro editoria.
     • Exemplo: Crie um filtro onde event_name=page_view (ou outro evento específico usado para registrar as editorias).

Visualizar as editorias mais acessadas

O relatório deve exibir uma tabela com:

• Coluna 1: Nomes das editorias.
• Coluna 2: Quantidade de eventos relacionados (ou usuários, conforme escolhido).

Exemplo:

Screenshot:

Dica extra: se você não está conseguindo encontrar os campos criados, você precisa atualiuzar sua conexão para que o Looker consiga receber as novas dimensões. Para isso, vá em gerenciar fontes de dados, encontre sua conexão com o GA4 e atualize:

Adicionar segmentação e análises adicionais

Para enriquecer seu relatório:

• Adicionar filtros por período: Adicione controles para selecionar intervalos de datas.
• Filtrar por tags ou autor: Se os valores das tags e autor também estão sendo enviados, use-os como dimensões adicionais para explorar mais dados.
• Criar gráficos complementares:
  • Gráfico de barras para visualizar as editorias mais acessadas.
  • Gráfico de pizza para ver a proporção de acessos por editoria.

Insights finais dos ratos

Daqui para frente é a sua necessidade que irá molar a criação de relatórios no GA4 e dashboards no Looker. Use e abuse da sua imaginação para coletar comportamentos e dados específicos para análises enriquecidas.

Dica final

Empodere seu time para saber como coletar e analisar as informações corretas.

Pink and Brain

Se você precisa de suporte para criar formas claras e eficientes de analisar o desempenho do seu negócio, fale com a Pink and Brain. Somos especialistas em business intelligence e apaixonados por transformar dados em insights poderosos.