Experimentos de Google Analytics con AngularJS

Recientemente, en Yobui, hemos integrado el sistema de Experimentos de Google Analytics con nuestra WebAPP desarrollada en AngularJS.

Yobui.com es una WebAPP de tipo Single-page, lo que significa que un solo HTML carga todos los assets, js y css que necesita la app. La navegación por las distintas páginas se basa en llamadas AJAX para obtener dinámicamente parciales html y datos JSON de una RestAPI.

El problema es que algunas tecnologías de buscadores y analítica aun no están adaptadas a esta nueva manera de programar webs. Y en este caso, nos encontramos con dificultades para implementar los Experimentos de Google Analytics que permiten ejecutar pruebas de tipo A/B Testing, cruciales para nuestro desarrollo de negocio.

La idea de los Experimentos de Google Analytics es muy simple. Se trata en crear una o más variantes de una página con diferentes diseños y/o prestaciones con el fin de validar una hipótesis. Analytics se encargará de distribuir tu audiencia entre las diferentes variantes incluyendo la original. Cuando haya recabado  suficiente información te indica la variante que ha tenido más éxito para tu propósito.

Para configurar Google Analytics nos pedirá la URL original y la o las URLs de las diferentes variantes. Por ejemplo, si nuestra página original es http://www.mystore.com/product.html, podemos tener una variante que sea http://www.mystore.com/product_b.html. Analytics nos dará un código de experimento que tendremos que añadir a la versión original. Este código se encargará de asignar una variante a cada sesión y redirigir al usuario a la variante que le ha tocado.

Para estructuras de web tradicionales, este sistema funciona perfectamente, pero para single-page apps, como Yobui, es más difícil porqué las páginas como tal no existen, son rutas o estados de la página “principal”.

En Yobui lo hemos solucionado siguiendo el siguiente tutorial de la documentación de Google Analytics: https://developers.google.com/analytics/solutions/experiments-client-side adaptándolo a AngularJS. Importante: Visitar el enlace para saber como configurar el Experimento.

La idea es igualmente sencilla. Se trata de utilizar la API de Google Analytics para obtener la variante, y en vez de redirigir, guardaremos la variante seleccionada en una variable global que utilizaremos en nuestros controladores y vistas para tomar decisiones. Veamos un ejemplo.

Tenemos una aplicación sencilla que muestra un catálogo de productos. Por tanto tenemos un controlador para listar el catálogo y un controlador para la página de detalle de un producto.

Este podría ser el index.html de nuestra app:

Lo importante de este código es cómo obtener y guardar la variante que se le debe asignar a esta sesión

var variant = cxApi.chooseVariation();

//Comprueba que ha sido posible obtener la variante
if(cxApi.getChosenVariation() !== cxApi.NO_CHOSEN_VARIATION) {
  window.variant = 'v'+variant;
}

Una vez que tenemos la variante en una variable global la podemos utilizar en nuestros controladores. Por ejemplo, este sería el controlador de la página de detalle de un producto de nuestra tienda:

Guardamos el valor de la variable global al scope del controlador para que la vista tenga acceso a él. De esta manera podemos tomar decisiones en el diseño de la vista según la variante.

En este caso, nuestro botón de añadir al carrito de compra era rojo, queremos evaluar si en color verde conseguimos más ventas.

Cuando tenemos los cambios publicados, lanzamos el experimento y esperamos a que Google Analytics obtenga suficiente información para determinar una variante ganadora.

Y esto es todo. Espero que esto os ayude a mejorar vuestras aplicaciones.

Aquí tenéis el resto del ejemplo:

index.html

app.js

listcontroller.js

productcontroller.js

list.html

product.html

Anuncis

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out / Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out / Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out / Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out / Canvia )

S'està connectant a %s