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:

<?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; ?>

<?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.

O post Data Layer para Publishers: capturando editorias e tags no GA4 apareceu primeiro em Pink and Brain.

A análise de dados envolve o processo de coleta, limpeza e modelagem de dados brutos para extrair insights utilizáveis. Por outro lado, a visualização de dados utiliza esses insights para criar representações visuais claras e compreensíveis, como gráficos e tabelas, facilitando a interpretação e a tomada de decisões informadas pelas empresas. Entenda mais a fundo:

Análise de dados

A análise de dados é um processo no qual dados brutos são coletados de diversas fontes. Esses dados são então limpos, formatados e modelados para que possam ser utilizados de maneira mais fácil. O principal objetivo da análise de dados é extrair insights úteis que ajudem uma empresa a tomar diferentes tipos de decisões.

Tipos de análise de dados

• Análise descritiva: responde à pergunta “o que está acontecendo?”
• Análise diagnóstica: investiga as razões que levam a um problema, como vendas ou marketing.
• Análise preditiva: utiliza dados históricos para fazer previsões futuras.
• Análise prescritiva: identifica padrões nos dados para auxiliar na tomada de decisões.

Visualização de dados

A visualização de dados é um processo no qual os dados disponíveis são formatados de forma que possam ser visualizados. Isso cria uma representação visual dos dados, permitindo uma melhor compreensão. Conjuntos de dados complexos e grandes podem ser mostrados graficamente, o que ajuda na interpretação.

Para que criar dashboards para visualização de dados?

• Correlação de dados: gráficos podem mostrar a correlação entre diferentes conjuntos de dados, como desempenho do site e vendas.
• Desempenho em gráficos: os dados podem ser mostrados em gráficos para demonstrar se uma decisão específica teve impacto positivo ou negativo.
• Exploração visual: ao apresentar dados em formato tabular, anomalias ou padrões inesperados podem ser facilmente identificados.
• Visualizações avançadas multi-facetadas: combina diferentes variáveis para contar histórias complexas que envolvem vários fatores.

Diferenças entre visualização de dados e análise de dados

A análise de dados e a visualização de dados são complementares no processo de tomada de decisões. A análise de dados envolve a coleta e a preparação dos dados, enquanto a visualização de dados utiliza esses dados limpos para apresentá-los visualmente, como gráficos de barras, gráficos de pizza, etc. Essa representação visual dos dados ajuda as empresas a interpretar e utilizar efetivamente as informações para tomar decisões estratégicas.

O post Visualização de dados e análise de dados: existe diferença? apareceu primeiro em Pink and Brain.