Haz seguimientos de eventos en tu aplicación con Google Analytics

Aunque el artículo de hoy se sale un poco de la línea en la que suelo escribir, no quería desperdiciar la oportunidad de escribir este artículo.

Si me habéis estado leyendo recientemente, sabréis que estoy trabajando en una nueva versión de BuSeViCi. Hablando con un amigotef, me trasladó que él no veía útil que el mapa fuera lo primero que se veía en la aplicación. Tras intercambiar un par de impresiones y opiniones llegamos a la conclusión de que teníamos que ver qué hacían los usuarios reales de la aplicación.

Aunque se podrían hacer tests de usabilidad y demás, un usuario de cualquier aplicación siempre intentará acomodarse a esta y si alguna pantalla no le gusta, o no le parece útil, cambiará a la que necesite.

Mi intención fue la de registrar las veces que un usuario dejaba el mapa para ir hacia la pantalla de estaciones y paradas.

En este artículo, vamos a ver cómo puedes registrar eventos personalizados en Google Analytics para recoger métricas sobre cualquier tipo de evento que un usuario pueda hacer en la web.

Requisito

El único requisito, y puede ser un poco de perogrullo, es recoger estadísticas actualmente en Google Analytics. El sistema de eventos se vale de la ID de nuestra página en ese servicio para almacenar las estadísticas por lo que, si tu web no usa Google Analytics y quieres usar los eventos, vas  a tener que registrarte. El proceso es bastante simple y no vamos a entrar en esto. Si no lo tienes, te recomiendo que empieces por aquí.

Planificación

Antes de tocar una sola línea de código, os recomiendo que penséis detenidamente lo que queréis registrar. Al menos tenemos que saber una categoría y una acción, aunque de manera opcional puedes registrar etiquetas y valores.

Vamos a ver, brevemente, cada uno.

Categoría

La categoría es una forma de agrupar eventos. Imagina que tienes una tienda en la que vendes servicios de hosting y algunas aplicaciones que te has currado y quieres registrar las ventas de Hosting y las de Aplicaciones. En cualquier caso, lo que quieres registrar son ventas y esa sería nuestra categoría.

Acción

La acción se usa para asignar un nombre al propio evento que estamos registrando. En el ejemplo anterior, sería compra si quisiéramos registrar estos eventos pero, imagina que además, tienes en la página de compra, un enlace a una demo de la aplicación que estás vendiendo y quieres comparar las descargas de la demo contra las compras realizadas. En ese caso podrías usar compra y Decarga demo.

No obstante, acción no siempre significa Acción y si no quieres complicarte (y siguiendo nuestro ejemplo inicial) podrías usar como acción las palabras Hosting y Aplicación.

Etiqueta

La etiqueta es opcional pero nos permiten dar más información a los eventos. Puedes usarla para registrar el nombre de la aplicación (si tienes varias) o el plan de hosting que van a comprar.

Valor

Por último tenemos el valor, que también es opcional. Este valor ha de ser un entero. No se me ocurre ningún buen ejemplo sobre el que usarlo ahora mismo pero, si a ti se te ocurre, estaré encantado de leerlo.

Para registrar eventos, solo tenemos que hacer uso de la función _trackEvent de la siguiente forma:

 _gaq.push(['_trackEvent', categoria, accion, etiqueta, valor]);

En las que:

  • categoría:
    • Obligatorio
    • Debe ser una cadena
  • acción:
    • Obligatorio
    • Debe ser una cadena
  • etiqueta:
    • Opcional
    • Debe ser una cadena
  • valor:
    • Opcional
    • Debe ser un entero

En mi caso usé la categoría “Estadística Mapa” y la acción era “Abandona” para cuando dejaban el mapa para ir a Estaciones y Paradas y “Vuelve” cuando la acción era la inversa.

Para ello, cambié la barra de navegación en la página del mapa y en la de estaciones y paradas por lo siguiente:

index.php

<div data-role="footer" data-id="myfooter">  
  <div data-role="navbar" class="nav-glyphish">
    <ul>
      <li><a href="index.php" class="ui-btn-active ui-state-persist" rel="external" id="mapIcon" data-icon="custom">Mapa</a>
      </li>
      <li><a href="estpar.php" rel="external" id="postIcon" data-icon="custom" onClick="_gaq.push(['_trackEvent', 'Estadistica Mapa', 'Abandona']);">Paradas</a>
      </li>
      <li><a href="favs.php" rel="external" id="favIcon" data-icon="custom">Favoritos</a>
      </li>
    </ul>
  </div>
</div>  

estpar.php

<div data-role="footer" data-position="fixed" data-id="myfooter">  
  <div data-role="navbar" class="nav-glyphish">
    <ul>
      <li><a href="index.php" rel="external" id="mapIcon" data-icon="custom" onClick="_gaq.push(['_trackEvent', 'Estadistica Mapa', 'Vuelve']);">Mapa</a>
      </li>
      <li><a href="estpar.php" rel="external" id="postIcon" data-icon="custom" class="ui-btn-active ui-state-persist">Paradas</a>
      </li>
      <li><a href="favs.php" rel="external" id="favIcon" data-icon="custom">Favoritos</a>
      </li>
    </ul>
  </div>
</div>  

Como veis es bastante sencillo y Google Analytics comenzará a registrar los eventos. Los podremos ver en Contenido -> Eventos -> Eventos principales. La interfaz de Google Analytics permite que profundicemos más viendo las acciones, etiquetas y valores de una forma muy cómoda.

Por si sois curiosos, os diré que finalmente los resultados no fueron significativos como para avalar el hecho de que el mapa en la página principal fuera una mala idea ya que tan solo un 4% de los usuarios abandonaban la página.

Si quieres saber mucho más sobre el tema de los eventos te recomiendo que visites la guía de Google al respecto.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.