Google Analytics Asynchronous Tracking
Autor: Giresse Contini
O Google Analytics lançou no dia 01 de dezembro seu novo código de monitoramento de Web Sites. Trata-se do Asynchronous Tracking Code. Dentre os seus benefícios, os três abaixo destacam-se:
1) Deixa o carregamento das páginas do web site mais rápido
2) Torna a coleta dos dados mais ágil e precisa
3) Elimina erros de monitoramento quando a página não foi totalmente carregada
Esse novo código de monitoramente reflete claramente a importância que o Google está dando para o tempo de carregamento das páginas e vai exatamente de encontro com uma notícia que recebi essa semana via colega Pedro Belleza, que afirma que esse tempo passará a ser critério para indexação nos resultados da busca do Google. Porém esse link é de um post no Webmaster Central Blog que confirma exatamente essa visão.
Isso quer dizer que apesar do Asynchronous Tracking Code ser tratado como beta e facultativo (ainda!), possivelmente ele será obrigatório e extremamente relevante em um futuro próximo.
Bem, vamos falar um pouco mais do novo código então:
Como instalar???
Ao contrário do código atual do Google Analytics (conhecido como ga.js) o novo código deve ser instalado no trecho superior do código fonte (dentro do <head>) das páginas do web site.
Para quem já tem o código ga.js e gostaria de passar a utilizar o código assíncrono, o Google recomenda que o usuário substitua o código atual pelo novo.
Como funciona???
Ele especifica a página web da propriedade ID e chama _trackPageview para enviar os dados de monitoramento de volta para os servidores do Google Analytics.
O trecho a seguir representa a configuração mínima necessária para acompanhar uma página de forma assíncrona.
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement(’script’);
ga.src = (’https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
ga.setAttribute(’async’, ‘true’);
document.documentElement.firstChild.appendChild(ga);
})();
</script>
Para usar o código acima basta inseri-lo no código fonte das páginas de seu web site apenas trocando o ID (’UA-XXXXX-X’) pela sua propriedade de identificação. Para implementar um código com mais funcionalidades de monitoramento, basta consultar os métodos disponíveis na API do Google e ver o guia de uso.
Função das partes que compõe o novo código:
Primeira parte
A primeira parte do trecho de código de acompanhamento assíncrono atribui a variável _gaq para uma matriz JavaScript. Depois disso, duas chamadas API de monitoramento (codificado como matrizes) são empurrados para _gaq. Quando o código de controle é inicializado, ele transforma o objeto _gaq de uma matriz padrão em um novo objeto e executa todas as chamadas API de monitoramento inicialmente recolhidas na matriz. Com este recurso, você pode imediatamente monitorar e armazenar todas as chamadas, mesmo antes do código de monitoramento do Google Analytics ser baixado. Não precisa mais se preocupar com as condições de carregamento ou problemas de dependência do código de monitoramento ga.js.
Segunda parte
A segunda metade do trecho fornece a lógica que carrega o código de monitoramento em paralelo com outros scripts na página. Ele executa uma função anônima que cria dinamicamente um elemento <script> e define a origem com o protocolo apropriado. Como resultado, a maioria dos navegadores irá carregar o código de monitoramento em paralelo com outros scripts na página, reduzindo assim o tempo de carregamento da página web. Nota-se aqui o uso futuro do HTML5 novo “async” atributo nesta parte do trecho. Quando ele cria o mesmo efeito que acrescentar um elemento <script> para o DOM, que oficialmente diz navegadores que este script pode ser carregado de forma assíncrona. Firefox 3.6 é o primeiro navegador a oferecer oficialmente suporte para este novo recurso. Se você está curioso, aqui estão mais detalhes sobre a especificação oficial HTML5 async.
Apesar de ser um código ainda na versão Beta o Insighter.org já está fazendo os testes com o Asynchronous Tracking Code, pois acreditamos que tudo que vier para melhorar a experiência do usuário ao acessar conteúdos online deve ser utilizado. Além disso não podemos esquecer que uma grande parte da população brasileira ainda utiliza conexão discada para navegar na internet, o que torna o carregamento das páginas ainda mais lento.
Observação: Agora que o semestre acabou os posts voltarão a ser freqüentes no Insighter.org. Nos últimos meses, eu e os outros editores acabamos acumulando novos projetos profissionais, bem como final de semestre na faculdade, o que acabou reduzindo bastante o ritmo dos posts. Isso irá mudar… pelo menos até março! ;)
Tags: Asynchronous Code, Google, Google Analytics, Novidades, PageRank
[...] This post was mentioned on Twitter by giressecontini, keik@. keik@ said: RT: @giressecontini: Google Analytics Asynchronous Tracking.O que é? Como instalar?Como funciona?Veja no Insighter.org http://migre.me/dw0m [...]
Bem legal! Mas o código deve ser inserido no topo e não no rodapé.
E o código: document.documentElement.firstChild.appendChild(ga);
E talvez o firefox não identifique como o campo de head, pode existir um campo de texto, nesse caso é melhor utilizar:
document.getElementsByTagName(’head’)[0].appendChild(ga);
Abraço!
Valeu Giresse !
Eu vi você conversando com o Leo sobre essa novidade mas não conhecia.. Valeu por explicar!
Que bom que voce tá de férias.. hihi
gosto muito dos seus posts =P
é isso aí..
beijo
keika
grande Giresse! Também comecei alguns testes com o novo código e realmente o tempo de carregamento baixou de algo próximo a 0.340 para 0.290.. Uma boa alteração!
Mas na verdade nas ultimas alterações, a que mais me agradou foi a nova “ferramenta” de criação de TAGs dentro da ferramenta. Acho que para quem não está acostumado a mexer com código foi uma alteração de usabilidade fantástica!
Abraços!
Eduardo, você tem razão. A tag assíncrona deve ser implementada dentro do , mais especificamente como último script desta seção. Eu acabei escrevendo o post corretamente e, na hora de aplicar a tag no código do Insighter.org, apenas troquei a tag antiga pela atual, deixando a nova tag no . Vou alterar. Obrigado.