Diapositivas de la charla impartida por Silvia Guardingo y Miguel Escobedo el día 17/04/2020 en las Flat 101 Digital Sessions dedicadas a CRO.

1. Guideline técnico para implementar
un A/B Test
17 de abril de 2020
#Flat101DS @SomosFlat101 info@flat101.es

2. Silvia Guardingo
SENIOR DEV EN FLAT 101
Miguel Escobedo
SENIOR DEV EN FLAT 101
#Flat101DS @SomosFlat101 info@flat101.es

3. Indice:
01
Qué es un test A/B
02
Cómo funciona una
herramienta de Test
A/B
03
Metodología de
desarrollo
04
Casos reales: Hands
into code
Guideline técnico para implementar un A/B Test

4. Guideline técnico para implementar un A/B Test
Qué es un test A/B
“Es una técnica dentro del campo de CRO (Conversion Rate Optimization) para demostrar
que una nueva versión de una interfaz es objetivamente y estadísticamente mejor que la
versión original empleada” Ricardo Tayar

5. Qué es un test A/B
Herramientas
Cada herramienta es diferente y presenta una interfaz
distinta, pero los conceptos manejados en un test A/B
son similares entre sí, con lo que si estamos
familiarizados el cambio de una herramienta a otra
debería ser menos dramático.
Conceptos
• Variantes
• Audiencias
• Objetivos
• Segmentación
• Página de resultados
• Integraciones
Guideline técnico para implementar un A/B Test

6. Cómo funciona una herramienta de Test A/B
Insertar el script de la herramienta Test A/B seleccionada dentro de la página web para que la magia fluya
Guideline técnico para implementar un A/B Test

7. Metodología de desarrollo
Conceptualización
Estudio del modelo actual
y planteamiento de una
hipótesis a partir de la cual
se diseña una propuesta
visual alternativa
Seguimiento y análisis
Recopilación de datos de test,
análisis y presentación de
resultados
Desarrollo y fase de QA
Implementación del experimento a través de la
herramienta de Test A/B escogida.
Comprobación del experimento:
• Test local multidispositivo
• Test equipo QA: previsualizaciones
Guideline técnico para implementar un A/B Test

8. Un cliente de banca tiene un proceso de contratación de producto en el que además ofrece la
posibilidad de contratar un servicio extra con diferentes modalidades. Queremos aumentar el
porcentaje de contratación de este servicio.
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

9. Hipótesis: si destacamos una opción más adecuada en función del perfil del usuario, aumentaremos la
conversión.
Original: misma ordenación y prioridad para
todos los usuarios
Enfoque propuesto: misma ordenación y prioridad para
todos los usuarios
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

10. Problema principal: ¿cómo sabemos a qué tipo pertenece nuestro usuario?
Usuario tipo 1 Usuario tipo 2
Apoyándonos en GTM podemos guardar los datos que nos interesan en el localStorage del navegador
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

11. Creación de la variante: utilizamos la funcionalidad de Google Optimize que nos permite inyectar código javascript. En
función de los datos almacenados en el localStorage realizaremos unos cambios u otros.
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

12. Segmentación del test por audiencia
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

13. Objetivos del test: El objetivo principal es aumentar el número de contrataciones de producto, este evento se envía a
GA en el momento en el que clicamos en continuar.
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

14. Activación del Test
Nos apoyamos en GTM para poder activar el test. En el momento en el que se muestra la ventana
modal activamos el test.
A/B Testing a través de segmentación basada en perfil de usuario con Google Optimize y GTM
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

15. Evolución del caso anterior, el cliente implanta un DMP por lo que podemos acceder a una
segmentación de usuario más avanzada y más fácil de manejar desde Google Optimize.
id audiencia 1, id audiencia 3
Queremos impactar a los usuarios que pertenezcan a las audiencias con id 123456, 123457 y 123458.
A/B Testing a través de segmentación basada en DMP con Google Optimize
Casos reales: Hands into code
Guideline técnico para implementar un A/B Test

16. • Son las siglas de Single Page Application.
• Su ciclo de vida es diferente a una aplicación clásica
(petición - respuesta)
• Más óptima, ya que a través de peticiones AJAX se van
solicitando los datos para actualizar la interfaz
¿Qué es una SPA?
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

17. • El problema que hay que solventar es el tratamiento de la
carga asíncrona de los componentes.
Las diferentes herramientas del mercado se han ido adaptando
con mayor o menor éxito con las SPAs de manera que:
• se pueda interactuar con los elementos de la aplicación
• evitar desarrollos a medida por cada nuevo experimento
• recogida fiable de datos
¿Qué es una SPA?
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

18. Hipótesis: la empresa A del sector de la moda necesita demostrar que aumentará la conversión con el
uso de un servicio CDN al disminuir el tiempo de carga de imágenes en la PLP
Variante A: cargar PLP utilizando el servicio CDN con una calidad media
Variante B: cargar PLP utilizando el servicio CDN con una calidad alta
Original: cargar PLP sin utilizar el servicio CDN
Punto de partida: se trata de una página web que se ha implementado gracias a un framework SPA y
además utiliza la herramienta de Test A/B XXXXXXX. Utiliza un servicio CDN YYYYYYYY para cargar las
imágenes de los productos con el que debemos comunicarnos
Ejemplo 1
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

19. Solución: configurar los momentos de carga del experimento de manera que tengamos acceso al código
del framework SPA y sobrescribir el comportamiento por defecto. Requiere de una comunicación ágil y
fluida con el departamento técnico del cliente.
Añadir el siguiente código JS en cada variante del experimento
Ejemplo 1
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

20. Hipótesis: la empresa B del sector de la moda necesita demostrar que el uso de un servicio que se
encarga de la ordenación de productos que aparecen en la componente cross-selling de la PDP no
repercute en la conversión final
Variante A: cargar productos en base a criterios fijos en la componente cross-selling de la PDP
Original: cargar productos en la componente cross-selling de la PDP gracias al servicio contratado
Punto de partida: se trata de una página web que se ha implementado gracias a un framework SPA y
además utiliza la herramienta de Test A/B XXXXXXX. Utiliza un servicio YYYYYYYY para la ordenación de
productos con el que debemos comunicarnos
Ejemplo 2
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

21. Solución: configurar los momentos de carga del experimento de manera que tengamos acceso al código
del framework SPA y sobrescribir el comportamiento por defecto. Requiere de una comunicación ágil y
fluida con el departamento técnico del cliente.
Añadir el siguiente código JS en la variante del experimento
Ejemplo 2
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

22. Hipótesis: la empresa C del sector de la moda cree que modificando la ficha visual de producto (selector
de colores si hay muchas opciones) en la PLP, el usuario accederá más la ficha aumentando así la
conversión de venta.
Variante A: cargar la PLP modificando la ficha visual en concreto
Original: cargar la PLP sin modificaciones en la componente visual
Punto de partida: se trata de una página web que se ha implementado gracias a un framework SPA y
además utiliza la herramienta de Test A/B XXXXXXX. Debemos acceder a una componente de la
interfaz de la PLP para poder modificar su visualización
Ejemplo 3
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

23. Solución: utilizar la librería de la herramienta de Test A/B para interactuar con la componente visual que
queremos modificar
Añadir el siguiente código JS en la variante del experimento
Ejemplo 3
Casos reales SPA: Hands into code
Guideline técnico para implementar un A/B Test

24. ¡Gracias por la asistencia!
#Flat101DS @SomosFlat101 info@flat101.es