Colocação Ideal do Código do Google Analytics no WordPress
Resposta Rápida
Para alcançar máxima eficiência e melhorar a performance, o código do Google Analytics (GA) deve ser inserido antes da tag de fechamento </head>, utilizando o atributo async. Aqui, "SEU_GA_ID" deve ser substituído pelo seu identificador pessoal:
<head>
<!-- ... -->
<script async src="https://www.googletagmanager.com/gtag/js?id=SEU_GA_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'SEU_GA_ID');
</script>
<!-- ... -->
</head>Princípios do Carregamento Assíncrono
Ao usar o atributo async, a análise da página continua sem atrasar o processo de carregamento, mesmo durante o carregamento assíncrono do script do Google Analytics.
Por Que Escolhemos a Seção Head em vez do Rodapé
A localização mais preferida para colocar os scripts analytics.js ou gtag.js é dentro do <head>. Isso permite que o script rastreie eventos que ocorrem mesmo durante o carregamento parcial da página.
Carregamento e Execução: Definindo Prioridades
O atributo async permite que o script seja carregado de forma assíncrona. Isso garante que os usuários possam interagir ativamente com a página sem atrasos e assegura um rastreamento de dados confiável.
Visualização
Se visualizarmos seu site como um teatro, ele se pareceria com isto:
Palco do Teatro (🎭): Seu Site
Cortina (🔻): Seção Head
Público (👥): Parte Final da Seção BodySeção Head — O Começo:
🔻🎭: Reações e conquista de objetivos ocorrem antes do início da ação principal.Parte Final da Seção Body — Eventos Principais:
👥🎭: A interação total ocorre quando todos os elementos estão em seus lugares e a atenção do público está totalmente focada na apresentação.Vantagem do Cache
O analytics.js é frequentemente carregado do cache, o que ajuda a reduzir os tempos de carregamento e melhorar a experiência do usuário.
Encontrando um Equilíbrio entre Precisão e Velocidade
Ao escolher um local para o código do Google Analytics no HTML, procure encontrar um equilíbrio entre a precisão do rastreamento de dados e a velocidade de carregamento da página.
Usando Carregamento Diferido via getScript
Para uma otimização de carregamento ainda mais eficiente, você pode usar o carregamento diferido com o getScript do jQuery. No entanto, certifique-se de que isso não afete o rastreamento correto dos dados:
$(document).ready(function() {
$.getScript("https://www.googletagmanager.com/gtag/js?id=SEU_GA_ID", function() {
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'SEU_GA_ID');
});
});Não esqueça de substituir SEU_GA_ID pelo seu identificador de rastreamento real.
Recursos Úteis
- Guia oficial para configurar o Google Analytics.
- Recomendações para implementar o analytics.js em seus sites.
- Instruções para migrar do analytics.js para o gtag.js pelo Google.
- Guia para instalar e configurar o Google Tag Manager.
- Google Tag Assistant — uma ferramenta eficaz para resolver problemas com tags do Google.
- Estatísticas sobre o tempo de carregamento da página — um dos componentes chave da experiência do usuário.
- Tutorial do Google Analytics para aproveitar ao máximo o Google Tag Manager.
- As discussões mais recentes no Stack Overflow sobre o Google Analytics.