Javascript debug simples com Google Analytics

Javascript é a linguagem mais utilizada em sites e aplicações na Internet. Infelizmente, sempre foi difícil debugar códigos em Javascript. Isso porque o código precisa funcionar em todos os navegadores e sistemas operacionais e cada um tem seu próprio motor de execução de código Javascript. Diferenças entre estes motores podem causar efeitos imprevisíveis, uma vez que é impraticável testar bem seu código em cada um deles.

Atualmente, as opções mais interessantes são testes unitários usando ferramentas como o FireUnity. John Resig (um  dos maiores ninjas em Javascript) está trabalhando em um projeto interessante para testar Javascript que é o Test Swarm. Cada um tem suas vantagens, porém eu gostaria de propor uma nova abordagem.

Mesmo usando as metodologias citadas, não é possível prever o que vai acontecer quando seu código for para produção. As vezes, podem ocorrer alterações que vão para produção sem passar pelos testes e até você descobrir que o script que adiciona produtos no seu carrinho de compras não está funcionando, já perdeu muitos clientes em potencial.

Você pode utilizar o Google Analytics para fazer um log de erros Javascript que aconteçam com seus usuários. Uma vez que você identificou um erro, pode ir lá e corrigi-lo. A vantagem de usar o Google Analytics para fazer este monitoramento é que você já vai ter os dados de navegadores e sistemas operacionais nos quais ocorreram aquele erro, o que vai ajudar na hora de soluciona-los.

Clicando no erro você faz drilldown para exatamente qual foi a mensagem de erro.

Clicando novamente você faz drilldown para um relatório de páginas onde exatamente ocorreu aquele erro.

Você pode ir mais longe e medir o impacto que esses erros causam na interação e conversão dos seus usuários e planejar quais bugs você vai esmagar primeiro e qual o impacto que eles causaram no seu negócio. Com o tempo fica mais notável todas as vantages que se tem com um log de erros integrado a sua ferramenta de Web Analytics.

Para implementar é fácil. Adicione a função track_error_event() ao seu tracking script do Google Analytics, agora basta adicionar um bloco de try catch ao redor do seu código e dispare um evento no momento do erro. Por exemplo:

<!-- GA Code Início -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
	['_setAccount','UA-XXXXX-X'],
	['_trackPageview']
);
function track_error_event (exception) {
	_gaq.push(['_trackEvent',
		'Exception ' + (exception.name || 'Error'), //event category
		exception.message || exception, //event action
		document.location.href //event label
	]);
}
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- GA Code Fim -->

<script type="text/javascript">
try{
	//Código Javascript
	//Este código gera um erro de Divisão por zero
	var i = 1/0;
}
catch(e){
	track_error_event(e);
}
</script>

Pronto. Agora esse erro vai aparecer de forma clara no Google Analytics.

Boas Medições.

Posts relacionados

• Lançamento Google Analytics Content Experiments
• Cookies e o Google Analytics
• Como o Google Analytics sobrescreve as origens do tráfego
• Como vincular contas do AdWords no Google Analytics
• Google Analytics: O que muda com a nova política de buscas do Google?