Pode até parecer, mas essa não é uma série “Utilidades para Navegação via JavaScript” (eu já havia escrito “Histórico para Navegação via JavaScript”, a quem interessar possa). É apenas coincidência…

Quando fazemos a navegação via JavaScript (leia-se também Ajax), geralmente não temos controle sobre quem navega em nossa página. Tudo que temos é o log do servidor. Isso nem chega perto das ferramentas de estatísca que temos por aí, e muitas são de graça. Tudo acontece porque essas ferramentas funcionam, geralmente, através de JavaScript, que envia os dados para processamento e armazenamento. Como a navegação via JavaScript não nos dá o luxo de um reload, esse código não é executado, fazendo com que somente as visitas à pagina raiz sejam contadas.

Uma das ferramentas que permite a análise das estatísticas para navegação via JavaScript é o Google Analytics. Poderíamos utilizar o Site Overlay, que mostra as estatísticas de clique em determinadas áreas do site, mas ele não permite que cruzemos as informações. A idéia então é passar as informações para o Top Content, através da função urchinTracker, com um truque simples. Observe o código abaixo:

<a href="http://juliogreff.net/" onclick="urchinTracker('track/home')">JulioGreff</a>

O evento onclick do link acima dispara a função urchinTracker, que irá interpretar o parâmetro passado como um pageview. Aquele parâmetro será equivalente a uma URL, e você poderá filtrar os dados e cruza-los no Analytics.

O esquema é basicamente esse. Podemos adicionar a função urchinTracker não somente em links, e não somente em onclicks, mas em qualquer coisa relevante você queira monitorar e analisar mais tarde. Até aqui não há nada que quem leu documentação do Analytics não saiba. A parte legal começa agora.

Primeiramente, não devemos misturar marcação com script, conteúdo com comportamento. Ou seja, sem onclicks. Isso só nos deixa uma opção: a função mágica, addEvent:

var addEvent = function(obj, evType, fn, arg){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, true)}
  if (obj.attachEvent){
    obj.attachEvent("on"+evType, fn)}
}

Essa é a “versão básica”. Se você tem algo mais completo, melhor. Ela não é o foco do post. Para não ter que escrever muito código, eu optei pela seguinte técnica: adicionar o tracker para todos os elementos que tiverem uma determinada classe CSS, e ela seria usada como label também. Novamente, mais uma função utilitária:

var getElementsByClassName = function(className) {
  var elements = document.getElementsByTagName("*"), array = [];
  for(var i = 0; i < elements.length; i++) {
    if(elements[i].className.search(className) > -1) array.push(elements[i]);
  }
  return array;
}

Essa é a “versão pré-básica alfa”. É altamente recomendável que você use uma função decente em um ambiente real, já que getElementsByClassName("track") retornaria tanto a classe “track” quanto “tracker”, quanto “—track—”, enfim.

A função que fará o serviço sujo é Track, em versão de testes, embora utilizável. Ela pega todos os elementos com a classe “track”, e passa as próximas classes como parâmetro para o Analytics, no evento onclick. A função é a seguinte:

var Track = function() {
  // Pega todos elementos com classe "track"
  var elements = getElementsByClassName("track");
  for(var i = 0; i < elements.length; i++) {
    // Pra cada um deles adiciona o "onclick"
    addEvent(elements[i], "click", function() {
	  // Aqui uso o nome da classe como label pro Analytics
	  urchinTracker(elements[i].className.split(" ")[1].replace(/-/g, "/");
	});
  }
}
// Quando a janela carregar, "trackeio" os elementos
addEvent(window, "load", Track);

A menos que você queira algo mais específico, não é necessário modificar o código. Você só terá que modificar os elementos que você deseja monitorar, adicionando a classe “track $”, onde $ é o label que você deseja que o elemento tenha. Os traços “-” serão convertidos para barras.

Veja um exemplo, retirado do novo tema do blog, no formulário de busca:

<input type="submit" class="track geral-busca" value="Buscar" />

Você pode me perguntar: “E minhas classes declaradas no CSS?”. No meu CSS, apenas adicionei uma regra para “geral-busca”, como se fosse um ID, mas modifiquei o código para enviar ao Analytics apenas a segunda classe (“geral-busca”, no meu caso), sendo que as seguintes são completamente ignoradas, e a primeira serve apenas para “seleção” pelo script.

Agora vá para o Analytics. No seu Dashboard, clique em Content > Top Content. Ali você terá todas as URLs de seu site monitoradas pelo Analytics (as que tiveram visitas).

Assim como “/url/qualquer”, seus labels “artificiais” também estarão ali (dentro de 48 horas, às vezes menos). Nessa tela, você pode adicionar um filtro para mostrar apenas os labels que você criou, e então analisar os dados. Para isso, use o campo “Find URL”.

Agora só temos que cruzar os dados. Para isso, apenas clique no label, e na página que abrirá, escolha os dados que você deseja cruzar no campo “Segment”.

Como não sou nenhum mestre do marketing, essa parte ficará com você. Pra complementar o texto, eu recomendo que você leia os seguintes textos, escritos pelo Henrique, do Revolução Etc:

• Estratégia de métricas parte 1: Métricas para ProBloggers
• Estratégia de métricas parte 2: Google Analytics e a Função urchinTracker

Escrevi esse post me baseando na parte 2, atualizando para a nova interface do Analytics, e adicionando o script. Considero um erro encher o site de onclicks, principalmente vindo do Henrique, que preza tanto pela separação Conteúdo-Estilo-Comportamento. Fui!