Analítica web
Reflexiones sobre madurez digital, datos y tecnología

SOLO APTO PARA GEEKS: Ponte a la última con Angular y Segment.io

Se lee en 5 minutos

¡ATENCIÓN! ESTE POST TIENE UN ALTO CONTENIDO TÉCNICO SOLO APTO PARA GEEKS DE LA ANALÍTICA DIGITAL.

No vamos a negar una obviedad y es que lo admitamos o no a todos nos gusta estar a la última, ya sea en moda, en música o en gadgets. En el dAngularJSesarrollo Web también existen tendencias y si algo está “pegando” ahora es Angular. Para los que no os suene Angular, es un Framework MVC (Modelo Vista Controlador) que nos permite aportarle lógica a HTML.

Y ahora os estaréis preguntando ¿Pero no nos habían dicho que teníamos que separar la lógica de la estructura de la página?, efectivamente desde el punto de vista clásico teníamos por un lado nuestro archivo HTML y por otro una serie de Scripts que le aportaban lógica. El problema es que las páginas se han vuelto tan complejas que es imposible entender casi nada mirando únicamente el archivo HTML. En cambio con un Framework MVC podemos tener un archivo en el que cada etiqueta indica lo que contiene o como funciona. Un buen punto de inicio es este curso de CodeSchool.

Uno de las dificultades con las que nos podemos encontrar al realizar una Web con Angular es la de introducir la medición de analítica. Si seguimos la técnica habitual de extracción de datos, es decir con una librería JavaScript de manipulación del DOM (podéis encontrar más información en este post) veremos que haberle introducido lógica al HTML nos va a dificultar el trabajo. Pero no hay que preocuparse, ya que disponemos de Angulartics. Angulartics es una librería que destaca por dos puntos: por un lado nos permite seguir con la filosofía de introducir lógica en el HTML y por otro lado nos facilita el trabajo enormemente.

Para introducir Angulartics en nuestro aplicación Angular, lo haremos como una dependencia más:

angular.module('myApp', ['angulartics', 'angulartics.google.analytics'])

Como se puede ver tenemos que inyectar por un lado la librería básica de Agulartics y por otro los plugins de analítica que vayamos a usar, en el ejemplo hemos escogido el Plugin corresponde a Google Analytics. Aquí podéis encontrar todos los plugins compatibles.

Una vez hecho esto ya tendremos el seguimiento de todas la páginas virtuales de nuestra Web. Si no nos gusta esta funcionalidad y preferimos hacerlo nosotros manualmente, la podemos desactivar en la configuración de nuestro módulo Angular:

module.config(function ($analyticsProvider) {
     // desactivación del tracking automático
     $analyticsProvider.virtualPageviews(false);
     ...

Aquí es donde se pone interesante la cosa. Para realizar el seguimiento de eventos sobre los elementos, lo único que tendremos que hacer es introducirles el atributo analytics-on (recibe como valor cualquier evento del DOM ‘click’, ‘mouseover’…) y darle un nombre al evento con el atributo analytics-event:

<button analytics-on=”click” analytics-event="Play">Play<button>

En algunos casos, como en los eventos de Google Analytics, es posible introducir más parámetros al evento:

<button analytics-on=”click” analytics-event="Play" 
analytics-category="Videos" analytics-label="Ponte al dia con Divisadero">
Play
<button>

Si con estas funcionalidades no es suficiente, siempre podemos inyectar el objeto $analytics dentro de nuestros controladores. Este objeto dispone de dos métodos pageTrack() y eventTrack() :

module.controller('SampleCtrl', function ($analytics) {
     $analytics.pageTrack('/mi/pagina’);
     $analytics.eventTrack('eventName', { category: 'category', label: 'label' });
     ...

Cada plugin tiene sus propias especificaciones, por eso os recomiendo mirar la documentación oficial de Angulartics.

logo Segment.io

Al comienzo de este artículo hemos hablado de ir a la moda y si algo está de moda en analítica es el dinamismo. Es muy probable que a lo largo de la vida de nuestra Web cambiemos de herramientas de analítica múltiples veces. Quizás realizar una implementación de Angulartics con una herramienta específica de analítica, como Google Analytics, sea quedarnos un paso atrás. Por eso quiero introduciros una herramienta de la que todavía no habíamos hablado en este Blog y no es otra que Segment.io. Veréis que se encuentra entre los plugins soportados por Angulartics y si realizáis una simple busqueda en Google podréis apreciar que está en auge entre los desarrolladores, por el simple motivo que es Open Source y todo su código se encuentra alojado en GitHub.

¿Pero que es Segment.io? Es un Data Hub que nos permite con un simple clic de botón integrar más de 80 herramientas de analítica distinta. Es decir que nosotros enviaremos los datos a Segment.io y el se encargará de reenviar dicha información a las herramientas que nosotros le hayamos indicado.

Para que os hagáis una idea de lo sencillo que es activar una herramienta, el panel de configuración es algo así:

Segment.io

 

La librería de Analytics.js, que es la que utiliza Segment.io, consta de cuatro métodos básicos, a los cuales tendremos acceso dentro de Angulartics gracias al objeto $analytics.

Método Track

Es la forma que tenemos de recoger las acciones realizadas por los usuarios. Cada acción tiene asociado un nombre que la identifica (se les pueden asociar características a esas acciones) .

track('Compra Camiseta', {
    name: 'Divisadero',
    revenue: 14.99
});

En ejemplo anterior podemos que ver la acción es Compra Camiseta y name y revenue son los parámetros que hemos asociado a esa acción. Podríamos colocar como parámetros todo lo que deseemos. 

Método Identify

Para identificar a los usuarios haremos una llamada al método identify. No solo mediante un userID, si no también: email, nombre, tlfn, edad, genero… De esta manera conseguimos ligar los eventos lanzados con el método track a usuarios específicos. 

identify('507f191e810c19729de860ea', {
     name: 'Pepito Grillo',
     email: 'pepito@grillo.com'
});

El primer argumento que le introducimos es el userID (en nuestro ejemplo ‘507f191e810c19729de860ea’) , este identificador tiene que ser único. Si queremos enviar información extra del usuario usamos lo que denominan traits.  Estos conforman el segundo argumento del método (en nuestro ejemplo: ‘name’ y ‘email’). Existen traits reservados, los podéis encontrar aquí listados y con su funcionalidad.

Método Group

Este método nos permite asociar a los usuarios con grupos concretos. Al igual que pasaba con identify podremos pasar parámetros específicos para cada grupo,los que hemos denominado traits. La llamada al método es muy similar a la de identify:

group('GroupID', {
     name: 'Divisadero',
     industry: ‘Analytics’', employees: 53
});

El GroupID es el equivalente a UserID y por tanto tiene que ser único. Los traits, tienen el mismo significado que en el método identify, incluso los traits especiales son los mismos.

Método Page

Este método nos permite grabar cuando un usuario visita una página. Se le asocia un nombre, una categoría o las propiedades que se consideren oportuna.  La forma de invocar al método page es muy sencillo.

analytics.page(‘Inicio’, {
     channel: ‘Divisadero Comercial’,
     idioma: ‘ES’
});

En este caso ‘Inicio’ sería el nombre asociado a la página y las ‘channel’ y ‘idioma’ propiedades correspondientes.

Si queréis ampliar la información visitar https://segment.com/docs/.

En los próximas entradas del Blog os seguiremos trayendo las últimas novedades. Pero ahora nos gustaría saber.

¿Eres un auténtico  geek de la analítica digital?¿Te planteas una estrategia de etiquetado para una Web con Angular? ¿Conocías Segment.io? Comparte con nosotros tus experiencias y hagamos crecer la comunidad.

Escribe tu comentario

15 − 10 =

Navegar