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

AMI web amb EC2, S3 i SimpleDB

Introducció

Avui vull parlar de com dissenyar un frontend per una plataforma web amb els serveis EC2, S3 i SimpleDB de Amazon Web Services.
El que farem serà crear una AMI que podrem utilitzar per aixecar instàncies EC2 web amb qualsevol aplicació web. Per això crearem un script d’arrancada que consultarà a SimpleDB les aplicacions que ha de configurar i el bucket de S3 d’on descarregar els codis font.
El disseny que explicaré és experimental i només ha estat provat en un entorn de proves. La idea és que la AMI resultant d’aquest tutorial es pugui fer servir com a plantilla per a que CloudWatch+AutoScaler aixequin automàticament instàncies darrera un ELB.
Continua llegint

S3 Curl Error: "AWS authentication requires a valid Date"

Hoy he tenido problemas con el script PEARL para la API de S3 que se puede bajar en http://aws.amazon.com/code/128 . Este script permite operar con CURL con la API de S3.

En mi caso necesitaba que una instancia en EC2 obtuviera unos contenidos de S3 justo al arrancarse. Pero esos contenidos són privados por lo que necesitaba una línea de comando que me permitiera enviar las credenciales de la cuenta. Para ello Amazon tiene colgado en su documentación el script s3curl.py.

Continua llegint

Backups automáticos con EC2 API Tools y SimpleDB

Hace unos días escribía sobre cómo instalar worpress en ec2(en catalán). En el post advertía de las dificultades de administración que tiene gestionar tu própio host y en especial con Amazon Web Services, ya que es un sistema Cloud Computing y puede resultar muy abstracto y dificil de entender. Y esto lo puede vivir en el primer proyecto profesional que tuve que realizar en Amazon.

Me pidierion montar un CRM open source (SugarCRM) en una instancia en AWS. SugarCRM es casi más fácil de instalar que wordpress ya que tienen perparado un bundle que unifica la instalación de todos los servicios necesarios junto con el própio software. El reto estaba en que un CRM trabaja con datos muy importantes para una empresa (contactos, comapañías, actividades comerciales, campañas de marketing, etc.) por tanto, esos datos no se pueden perder. Antes de ponerme a ello ya sudaba. Continua llegint

Cookies, iFrames e Internet Explorer

Estos días en Vancast hemos estado luchando (por enésima vez) con Internet Explorer y su manía de funcionar totalmente diferente al resto de navegadores.
Esta vez el problema nos lo hemos encontrado cuando intentávamos incluir dentro de un iframe la ejecución de una aplicación externa.

Continua llegint