Guideline técnico para implementar un A/B Test

Information about Guideline técnico para implementar un A/B Test

Published on June 22, 2020

Author: FlatIOIDigitalBusine

Source: slideshare.net

Content

1. Guideline técnico para implementar un A/B Test 17 de abril de 2020 #Flat101DS @SomosFlat101 [email protected]

2. Silvia Guardingo SENIOR DEV EN FLAT 101 Miguel Escobedo SENIOR DEV EN FLAT 101 #Flat101DS @SomosFlat101 [email protected]

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 [email protected]

#flat101ds presentations

Related presentations


Other presentations created by FlatIOIDigitalBusine