Guideline técnico para implementar un A/B Test
0 recomendaciones1,911 vistas
El documento ofrece una guía técnica para implementar pruebas A/B, destacando su función en la optimización de tasa de conversión mediante la comparación de versiones de una interfaz. Se abordan conceptos clave, el funcionamiento de herramientas de pruebas, metodología de desarrollo y ejemplos prácticos relacionados con segmentación de usuarios y configuraciones específicas. Además, se discute la adaptación de estas pruebas en aplicaciones de una sola página (SPA) y ofrece soluciones técnicas para mejorar resultados.
Guideline técnico para implementar un A/B Test
- 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