Event Tracking no Magento

Escrito por Mario SAM

Monitorar páginas na internet é um procedimento comum que ajuda no desenvolvimento / usabilidade / portabilidade / navegação / interação / acessibilidade, etc, etc, etc.

Ou seja, tudo que você faz enquanto visita um site pode ser observado e registrado. E o google analytics permite que desenvolvedores preparem o código para monitorar até mesmo ações on-page – que não submetem url.

E o nome disso é Event Tracking (ver site oficial). Para que você possa usar este recurso no Magento, primeiro você deve habilitar o módulo do google analytics no seu sistema como mostrado no post: Estatísticas com Google Analytics.

A importância

Nos relatórios de monitoramento do google, existe uma palavra chamada “taxa de rejeição“. Uma “rejeição” é quando a pessoa entra no seu site e na sequência deixa o site sem navegar por ele, desconsiderando quaisquer ações que o usuário tenha realizado no site.

E como sabemos, existem muitas ações de conversão que podem ser realizadas em uma única página, e que são ignoradas pelo analytics padrão, aumentando assim a taxa de rejeição do seu site. Alguns exemplos de ações que poderiam ser monitoradas:

- Assistir um vídeo
- Entrar em contato (formulários que utilizam ajax)
- Chat online
- Download de arquivos
- Curtir um página ou "tuitar"
- Jogar (arquivos em flash)

Então existe muita coisa acontecendo na sua loja, e que você não está monitorando, e se não sabe o que está acontecendo, como pode tomar decisões estratégicas que definem o rumo da sua empresa!?

A estrutura

Primeiro é fundamental que você tenha o google analytics instalado na sua loja conforme mencionado no início do post. Isso irá carregar um arquivo chamado ga.js nas suas páginas.

Feito isso você pode usar o método:

_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

E para usar este método você deve fazer um push no código do analytics informando o tipo de rastreamento que deseja gravar. Exemplo:

_gaq.push(['_trackEvent', 'Videos', 'Play', 'Apresentando o blog']);

Normalmente este código é disparado através de algum evento no html, como um link, por exemplo:

Assistir

E ao usar o push e informar o evento “_tranckEvent“, então você tem os parâmetros para preencher:

category (obrigatório) – Palavra que descreve o evento principal, algo como “Cálculo de Frete”, “Carrinho de Compras”, “Comparar Produtos”, “Contato”.

action (obrigatório) – Descrevem ações que os usuários tomam em determinado evento. Seguindo os exemplos acima poderia ser algo como “Selecionou Sedex”, “Retirou Produto do Carrinho”, “Limpou o formulário de contato sem enviar”.

opt_label (opcional) – Seriam informações adicionais sobre a ação tomada. Por exemplo, se você oferece cálculo de frete em diversas páginas, como na página do produto e no checkout, o label poderia ser “página do produto” ou “tela de checkout”. Mesma coisa quando ele adicionar um produto ao carrinho (ação), ele adicionou (label) usando a “página de catálogo”, a “página do próprio produto”, ou usando a “lista de favoritos”.

opt_value (opcional) – Este campo serve como informação extra ao campo opt_label. Caso você queira armazenar algum tipo de informação numérica (inteiro). Então infelizmente não podemos usar este campo para armazenar o cep calculado, ou o valor do produto que foi retirado do carrinho. No momento não vejo como utilizar este campo de forma útil.

opt_noninteraction (opcional) – Um campo do tipo (true/false), que serve para um controle de taxa de rejeição diferenciado. Seria como monitorar um evento sem importância no processo de interação com a página.

Vamos ao Magento

Para exemplificar o funcionamento de toda essa teoria no Magento vamos adicionar um Event Tracking ao botão comprar. Então abra o arquivo:

app > design > frontend > default > default > template > catalog > product > list.phtml

E o arquivo:

app > design > frontend > default > default > template > catalog > product > view > addtocart.phtml

Se não encontrar, faça uma cópia dos arquivos em base/default para default/default, ou para seu template/tema.

Ambos arquivos possuem o botão comprar, sendo que o list.phtml possui dois botões – um para o modo lista e outro para o modo grade.

No arquivo addtocart.phtml altere o código do button para:

E no arquivo list.phtml altere os dois códigos button’s para:

e

Veja que nos 3 (três) exemplos foi mantido a mesma category (“Adicionar Produto“), pois trata-se de um evento em comum. Mas em action existe uma pequena diferença (“Tela de Detalhes do Produto“, “Tela de Categorias – Modo Lista“, “Tela de Categorias – Modo Grade“) que indica o local onde ocorreu a ação.

Fiz dessa forma para poder aproveitar o campo opt_label e informar o nome do produto que foi adicionado ao carrinho, usando então código php dentro do javascript “$_product->getName()“.

Continua…

Esse assunto não termina aqui. Isso foi apenas uma pequena demonstração do que pode ser feito em termos de monitoramento de páginas.

A forma como você utiliza os campos do _trackEvent são totalmente livres à sua imaginação e necessidades administrativas.

A maneira como você implementa isso no código também pode ter uma variedade incrível de soluções e informações dinâmicas.

Cabe a você criar as regras, implementar, e depois ver os resultados no seu painel de controle do google analytics, no menu “Conteúdo -> Eventos“.

Lembrando que a informação não vale nada se você não sabe o que fazer com ela. Por isso estude sempre, ou então procure a ajuda de profissionais na área. Eu posso indicar os profissionais em gerenciamento de métricas da Bull Marketing – e você pode falar que foi o Mario SAM quem indicou. 😉

Sucesso!

O Autor

Mario SAM

Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.