GA4 + GTM no Blogger: Rastreamento Completo
Você instalou o Google Analytics no seu Blogger, abriu o painel — e não apareceu nenhum dado. Clássico. Já passei por isso mais de uma vez, e o problema quase sempre é o mesmo: a configuração estava incompleta ou os dois sistemas (GA4 e GTM) estavam conflitando sem que eu soubesse. Neste tutorial, você aprende como instalar Google Analytics 4 (GA4) + Google Tag Manager (GTM) no Blogger de forma dual, segura e com rastreamento de eventos reais — cliques em links externos, scroll profundo e tempo de engajamento. Tudo testado, tudo funcionando.
O maior erro de quem começa a monitorar um blog é depender de um único sistema de rastreamento. Se o GA4 cair, você fica às cegas. Se o GTM não estiver configurado corretamente, os dados nunca chegam. A solução real é rodar os dois em paralelo: o GA4 coleta diretamente, o GTM centraliza e permite expandir para outras ferramentas — Facebook Pixel, Google Ads, e o que mais você precisar — sem nunca mais tocar no HTML do tema.
6 Motivos Para Usar GA4 + GTM Juntos no Blogger
Dados em Tempo Real
O GA4 mostra quem está no seu blog agora, de onde veio e o que está lendo. Não precisa esperar 24h para saber se um post está funcionando. Você abre o painel e vê na hora.
Backup Automático de Dados
Com GA4 direto + GTM, se um dos sistemas falhar ou não carregar por algum motivo, o outro ainda coleta. Isso evita buracos nos relatórios — coisa que qualquer análise séria precisa evitar.
Eventos de Engajamento Real
O script rastreia três eventos críticos: clique em link externo (usuário saiu do blog), scroll acima de 80% (leu o post de verdade) e permanência acima de 30 segundos (não rejeitou imediatamente). Métricas que importam pro AdSense.
Adicione Ferramentas Sem Editar HTML
Com o GTM instalado, qualquer nova ferramenta — Google Ads, Hotjar, Microsoft Clarity — entra pelo painel do GTM. Nada de ficar editando o tema Blogger toda vez. Isso sozinho já vale a instalação.
Compliance com LGPD/GDPR
O script já vem com anonimização de IP ativada (anonymize_ip: true) e cookies configurados com SameSite=None;Secure. Você fica em conformidade sem precisar instalar plugins externos de consentimento só pra resolver isso.
Carregamento Assíncrono
O atributo async no script do GA4 garante que o rastreamento não bloqueie o carregamento da página. Isso protege o PageSpeed Score — métrica diretamente ligada ao ranqueamento no Google e à aprovação AdSense.
Como o Sistema Dual de Rastreamento Funciona
GA4 Coleta Direto — Sem Intermediários
O script carrega a biblioteca gtag.js diretamente dos servidores do Google com async, inicializa o dataLayer e registra cada pageview automaticamente. Ele envia o caminho da página, o título e a URL completa para o painel do Analytics. Qualquer evento adicional (gtag('event', ...)) é registrado da mesma forma, sem depender do GTM estar configurado.
GTM Gerencia e Distribui as Tags
O container GTM carrega em paralelo, também de forma assíncrona. Tudo que vai para o window.dataLayer — como os eventos de clique externo, scroll e tempo — o GTM captura e pode redirecionar para qualquer ferramenta configurada no painel. Isso significa que, sem mudar uma linha de código, você pode amanhã adicionar o Facebook Pixel e ele vai capturar esses mesmos eventos.
Eventos Personalizados Enriquecem os Dados
O script escuta três comportamentos do usuário em tempo real: qualquer clique em link com domínio diferente do blog (link externo), scroll que ultrapasse 80% da altura da página, e permanência de 30 segundos ou mais. Cada evento vai tanto para o GA4 quanto para o dataLayer do GTM. No relatório, você consegue ver quais posts prendem o leitor — dado valioso para decisões de conteúdo e para demonstrar engajamento real durante uma solicitação de AdSense.
Esse Tutorial é Para Você?
📝 Blogger Iniciante
Você criou o blog há pouco tempo, não entende bem a diferença entre GA4 e GTM e quer resolver de uma vez. Este tutorial explica os dois sem jargão desnecessário e entrega o código pronto para colar.
💰 Candidato ao AdSense
Você está preparando o blog para solicitar monetização e precisa mostrar tráfego real, taxa de rejeição saudável e engajamento verificável. GA4 configurado corretamente é o primeiro passo para isso.
🔧 Usuário de Blogger/Blogspot
Você usa o Blogger como plataforma e já tentou instalar Analytics antes mas ficou na dúvida sobre onde colocar o script, se vai conflitar com o tema ou se está realmente funcionando. Aqui tem a resposta para cada uma dessas dúvidas.
📈 Criador que Quer Escalar
Você já tem o Analytics básico mas quer uma estrutura que permita adicionar Google Ads, rastreamento de conversão e outras ferramentas no futuro sem refazer tudo do zero. O GTM resolve exatamente isso.
Instalando Google Analytics 4 + GTM no Blogger: Passo a Passo
Entendendo a Diferença Antes de Instalar
Essa foi a maior confusão que tive quando comecei: achei que GTM e GA4 eram a mesma coisa e instalei os dois de formas erradas, o que fez os dados aparecerem duplicados por semanas. A distinção é simples quando você pensa assim:
| Ferramenta | O que é | Onde você acessa | Quando usar |
|---|---|---|---|
| GA4 (G-XXXXXXXX) | Ferramenta de análise de dados | analytics.google.com | Sempre — é onde ficam os relatórios |
| GTM (GTM-XXXXXXX) | Gerenciador de scripts/tags | tagmanager.google.com | Quando quer flexibilidade e múltiplas ferramentas |
O GA4 é o destino dos dados. O GTM é o veículo que pode levar dados para vários destinos ao mesmo tempo. Você pode usar só o GA4, ou usar os dois juntos. Neste post, usamos os dois — e o motivo prático é simples: se você um dia quiser instalar o Google Ads ou qualquer outro pixel de rastreamento, vai precisar do GTM de qualquer forma.
Passo 1 — Acesse o Editor de HTML do Blogger
No painel do Blogger, vá em Tema → Editar HTML. Procure pela tag </head> usando Ctrl+F (ou Cmd+F no Mac). Cole o script completo logo antes dessa tag. Nunca depois — scripts colocados no <body> ou no rodapé carregam por último e podem perder eventos que acontecem no início do carregamento da página.
< no lugar de <), use o bloco /<![CDATA[ ao redor do JavaScript — exatamente como está no script abaixo. Isso protege o código de ser "escapado" pelo editor do Blogger.
Passo 2 — O Script Completo (Substitua Seus IDs)
O código abaixo já está estruturado com os dois sistemas. Substitua G-XXXXXXXXXX pelo seu Measurement ID do GA4 (encontrado em Analytics → Administrador → Fluxos de dados) e GTM-XXXXXXX pelo ID do seu container GTM (encontrado em tagmanager.google.com no cabeçalho do container).
<!-- GA4: Carregamento assíncrono -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
/<![CDATA[
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX', {
'anonymize_ip': true,
'page_path': window.location.pathname,
'page_title': document.title,
'page_location': window.location.href,
'cookie_domain': 'auto',
'cookie_flags': 'SameSite=None;Secure',
'send_page_view': true
});
//]]>
</script>
<!-- GTM: Container principal -->
<script>
/<![CDATA[
(function(w,d,s,l,i){
w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),
dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
//]]>
</script>
<!-- GTM Noscript (obrigatório pelo Google) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0"
style="display:none;visibility:hidden"
title="Google Tag Manager">
</iframe>
</noscript>
Passo 3 — Eventos Personalizados (Engajamento Real)
Adicione este segundo bloco logo depois do anterior, ainda dentro do <head> ou no início do <body>. Ele ativa três eventos que o Google considera sinais de qualidade: saída por link externo, scroll profundo e tempo de permanência.
<script>
/<![CDATA[
// Evento 1: Clique em link externo
document.addEventListener('click', function(e) {
var link = e.target.closest('a');
if (link && link.hostname !== window.location.hostname && link.href) {
try {
gtag('event', 'click_externo', {
'event_category': 'outbound',
'event_label': link.href,
'transport_type': 'beacon'
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'click_externo',
'link_url': link.href,
'link_text': link.textContent.trim()
});
} catch(err) {
console.error('@CanalQb erro click_externo:', err.message);
}
}
});
// Evento 2: Tempo de permanência (30s)
setTimeout(function() {
try {
gtag('event', 'tempo_engajamento', {
'event_category': 'engagement',
'event_label': '30_segundos',
'value': 30
});
window.dataLayer.push({ 'event': 'tempo_engajamento', 'segundos': 30 });
} catch(err) {
console.error('@CanalQb erro tempo_engajamento:', err.message);
}
}, 30000);
// Evento 3: Scroll profundo (80%)
var scrollTracked = false;
window.addEventListener('scroll', function() {
try {
var pct = (window.scrollY + window.innerHeight) / document.body.scrollHeight;
if (!scrollTracked && pct >= 0.8) {
gtag('event', 'scroll_profundo', {
'event_category': 'engagement',
'event_label': '80_porcento',
'value': 80
});
window.dataLayer.push({ 'event': 'scroll_profundo', 'porcentagem': 80 });
scrollTracked = true;
}
} catch(err) {
console.error('@CanalQb erro scroll_profundo:', err.message);
}
}, { passive: true });
//]]>
</script>
Passo 4 — Configure o GTM Para Enviar Dados ao GA4
Instalar o GTM no site não é suficiente. Você precisa criar pelo menos uma tag dentro do painel do GTM para ele começar a enviar dados. Este é o passo que a maioria pula — e depois reclama que o GTM "não funciona".
- Acesse tagmanager.google.com e selecione seu container
- Clique em Tags → Nova
- Nomeie como "GA4 — Pageview"
- Em "Configuração da tag", escolha Google Analytics: Evento GA4
- Insira o mesmo ID do GA4 (G-XXXXXXXXXX)
- Em "Acionamento", selecione All Pages
- Salve e clique em Enviar (publicar o container)
Passo 5 — Verificando Se Está Funcionando
Quatro formas de confirmar que o rastreamento está ativo — da mais rápida à mais completa:
- Console do navegador (F12): Abra seu blog, pressione F12, vá na aba Console. Deve aparecer as mensagens de log do script:
📊 Sistema de Rastreamento Ativo - GA4 em tempo real: Abra seu blog em uma aba e acesse analytics.google.com em outra. Em Relatórios → Tempo real → Visão geral, deve aparecer "1 usuário ativo"
- GTM Preview: No painel do GTM, clique em Visualizar, conecte a URL do blog e veja as tags disparando
- Extensão Tag Assistant: Instale o Tag Assistant Companion no Chrome — ele mostra GA4 e GTM ativos com os IDs corretos
Erros Comuns e Como Resolver
Juntei aqui os problemas que mais aparecem nessa instalação, baseado tanto na minha experiência quanto nas perguntas recorrentes da comunidade:
| Sintoma | Causa Mais Provável | Solução |
|---|---|---|
| Nenhum dado no GA4 | ID errado ou script não está no <head> |
Confirme o Measurement ID em Analytics → Administrador → Fluxos de dados |
| Dados duplicados | GA4 instalado duas vezes (direto + via GTM sem desativar um) | Se usar GTM para GA4, remova o script direto do tema |
| GTM carrega mas não envia | Container sem tags publicadas | Crie e publique a tag GA4 no painel do GTM (Passo 4 acima) |
| Blogger corrompe o JS | Editor escapou o código com entidades HTML | Envolva o JavaScript em /<![CDATA[ ... //]]> |
| Bounce rate de 100% | GA4 não reconhece interação na página | Os eventos de scroll e tempo do script corrigem isso automaticamente |
Recursos Oficiais Para Ir Além
📊 Google Analytics 4
Painel principal de análise do seu blog. Acesse relatórios de tráfego, eventos, conversões e dados em tempo real.
Acessar Analytics →🔧 Google Tag Manager
Gerencie todos os scripts do blog sem editar HTML. Container central para GA4, Ads, pixels e muito mais.
Acessar GTM →📖 Documentação GA4 Oficial
Guia completo do Google sobre como implementar o GA4 em qualquer plataforma, incluindo Blogger e sites estáticos.
Ver documentação →📖 Documentação GTM Oficial
Aprenda a criar tags, gatilhos e variáveis no GTM. Referência oficial com exemplos práticos de configuração.
Ver documentação →⚡ Google PageSpeed Insights
Verifique se a instalação do script não prejudicou o PageSpeed do seu blog. Score mínimo recomendado para AdSense: 60+.
Testar agora →🔍 Google Search Console
Use junto com o GA4 para ver quais palavras-chave estão trazendo tráfego e quais páginas têm problemas de indexação.
Acessar GSC →ℹ️ Nota Técnica: Os scripts fornecidos neste tutorial são para fins educacionais e de implementação em blogs pessoais. IDs de rastreamento (GA4 e GTM) são únicos por propriedade — nunca compartilhe seus IDs publicamente. Teste sempre em modo de visualização do GTM antes de publicar alterações em produção. O autor não se responsabiliza por configurações incorretas ou perda de dados por uso indevido.
Comentários
Comente só assim vamos crescer juntos!