SlideShare una empresa de Scribd logo
Guideline técnico para implementar
un A/B Test
17 de abril de 2020
#Flat101DS @SomosFlat101 info@flat101.es
Silvia Guardingo
SENIOR DEV EN FLAT 101
Miguel Escobedo
SENIOR DEV EN FLAT 101
#Flat101DS @SomosFlat101 info@flat101.es
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
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
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
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
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
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
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
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
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
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
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
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
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
• 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
• 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
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
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
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
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
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
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
¡Gracias por la asistencia!
#Flat101DS @SomosFlat101 info@flat101.es

Más contenido relacionado

La actualidad más candente

Plan Director eCommerce. Estrategia, Puesta en Marcha, Medición y Optimización
Plan Director eCommerce. Estrategia, Puesta en Marcha, Medición y OptimizaciónPlan Director eCommerce. Estrategia, Puesta en Marcha, Medición y Optimización
Plan Director eCommerce. Estrategia, Puesta en Marcha, Medición y Optimización
Javier Puga
 
Trabajemos juntos
Trabajemos juntos Trabajemos juntos
Trabajemos juntos
ParqueSoft
 
Cro + ux
Cro + uxCro + ux
Cro + ux
Vlad Markovich
 
Cro optimize
Cro optimizeCro optimize
Cro optimize
Vlad Markovich
 
CURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOL
CURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOLCURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOL
CURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOL
Darwin Durand
 
Cro + ux (1)
Cro + ux (1)Cro + ux (1)
Cro + ux (1)
Vlad Markovich
 
Proyectos De Comercio Electrónico
Proyectos De Comercio ElectrónicoProyectos De Comercio Electrónico
Proyectos De Comercio Electrónico
cocoweb
 
Libro de comercio electrónico pdf
Libro de comercio electrónico pdfLibro de comercio electrónico pdf
Libro de comercio electrónico pdf
Carlos Alberto La Madrid Ibarra
 

La actualidad más candente (8)

Plan Director eCommerce. Estrategia, Puesta en Marcha, Medición y Optimización
Plan Director eCommerce. Estrategia, Puesta en Marcha, Medición y OptimizaciónPlan Director eCommerce. Estrategia, Puesta en Marcha, Medición y Optimización
Plan Director eCommerce. Estrategia, Puesta en Marcha, Medición y Optimización
 
Trabajemos juntos
Trabajemos juntos Trabajemos juntos
Trabajemos juntos
 
Cro + ux
Cro + uxCro + ux
Cro + ux
 
Cro optimize
Cro optimizeCro optimize
Cro optimize
 
CURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOL
CURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOLCURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOL
CURSO DE PROGRAMACION AVANZADA EN JAVA EN ESPAÑOL
 
Cro + ux (1)
Cro + ux (1)Cro + ux (1)
Cro + ux (1)
 
Proyectos De Comercio Electrónico
Proyectos De Comercio ElectrónicoProyectos De Comercio Electrónico
Proyectos De Comercio Electrónico
 
Libro de comercio electrónico pdf
Libro de comercio electrónico pdfLibro de comercio electrónico pdf
Libro de comercio electrónico pdf
 

Similar a Guideline técnico para implementar un A/B Test

15 Upm Solo Pruebas 2009
15 Upm Solo Pruebas 200915 Upm Solo Pruebas 2009
15 Upm Solo Pruebas 2009
Pepe
 
Transformando el Desarrollo de Producto
Transformando el Desarrollo de ProductoTransformando el Desarrollo de Producto
Transformando el Desarrollo de Producto
Amazon Web Services LATAM
 
AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...
AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...
AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...
Amazon Web Services LATAM
 
Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.
Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.
Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.
Carl W. Handlin
 
Servicio de QA - Harriague y Asociados
Servicio de QA - Harriague y AsociadosServicio de QA - Harriague y Asociados
Servicio de QA - Harriague y Asociados
Harriague y Asociados S.R.L.
 
Aplicación de Extreme Programming
Aplicación de Extreme ProgrammingAplicación de Extreme Programming
Aplicación de Extreme Programming
Patricio Bevaqua
 
Control de Calidad del Software
Control de Calidad del SoftwareControl de Calidad del Software
Control de Calidad del Software
Tonymx
 
Optimice su sitio web con analytics y A/B testing
Optimice su sitio web con analytics y A/B testingOptimice su sitio web con analytics y A/B testing
Optimice su sitio web con analytics y A/B testing
AT Internet
 
Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...
Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...
Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...
VWO
 
Webinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletas
Webinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletasWebinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletas
Webinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletas
atSistemas
 
WW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
WW+, SD+ y Audit+: Potencie GeneXus la Suite PlusWW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
WW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
GeneXus
 
Meetup TestingUy 2019 - May the automation be with you
Meetup TestingUy 2019 - May the automation be with youMeetup TestingUy 2019 - May the automation be with you
Meetup TestingUy 2019 - May the automation be with you
TestingUy
 
Presentación comercial S-SQUARE S.A.
Presentación comercial S-SQUARE S.A.Presentación comercial S-SQUARE S.A.
Presentación comercial S-SQUARE S.A.
Luis Trejos
 
TDD talk
TDD talkTDD talk
Strategic Sourcing At P&G Julio 2009
Strategic Sourcing At P&G   Julio 2009Strategic Sourcing At P&G   Julio 2009
Strategic Sourcing At P&G Julio 2009
pechever
 
DevOps Cap 5: Test
 DevOps Cap 5: Test DevOps Cap 5: Test
DevOps Cap 5: Test
Juan Giraldo
 
Cómo optimizar su sitio web con analítica web y tests A/B
Cómo optimizar su sitio web con analítica web y tests A/B �Cómo optimizar su sitio web con analítica web y tests A/B �
Cómo optimizar su sitio web con analítica web y tests A/B
Optimizely
 
Testing de Aplicaciones Móviles, Públicas, Masivas y Críticas
Testing de Aplicaciones Móviles, Públicas, Masivas y CríticasTesting de Aplicaciones Móviles, Públicas, Masivas y Críticas
Testing de Aplicaciones Móviles, Públicas, Masivas y Críticas
Belatrix Software
 
Calidad en Agile - EducacionIT
Calidad en Agile - EducacionITCalidad en Agile - EducacionIT
Calidad en Agile - EducacionIT
GlobalLogic Latinoamérica
 
Desafíos en las organizaciones que desarrollan software
Desafíos en las organizaciones que desarrollan softwareDesafíos en las organizaciones que desarrollan software
Desafíos en las organizaciones que desarrollan software
Alvaro Ruiz de Mendarozqueta
 

Similar a Guideline técnico para implementar un A/B Test (20)

15 Upm Solo Pruebas 2009
15 Upm Solo Pruebas 200915 Upm Solo Pruebas 2009
15 Upm Solo Pruebas 2009
 
Transformando el Desarrollo de Producto
Transformando el Desarrollo de ProductoTransformando el Desarrollo de Producto
Transformando el Desarrollo de Producto
 
AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...
AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...
AWS Cloud Experience CA: Metodologías Ágiles: innovación a la velocidad de lo...
 
Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.
Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.
Entrega Continua para Aprendizaje Automático utilizando AWS SageMaker.
 
Servicio de QA - Harriague y Asociados
Servicio de QA - Harriague y AsociadosServicio de QA - Harriague y Asociados
Servicio de QA - Harriague y Asociados
 
Aplicación de Extreme Programming
Aplicación de Extreme ProgrammingAplicación de Extreme Programming
Aplicación de Extreme Programming
 
Control de Calidad del Software
Control de Calidad del SoftwareControl de Calidad del Software
Control de Calidad del Software
 
Optimice su sitio web con analytics y A/B testing
Optimice su sitio web con analytics y A/B testingOptimice su sitio web con analytics y A/B testing
Optimice su sitio web con analytics y A/B testing
 
Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...
Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...
Utiliza el CRO para mejorar tus campañas creativas, Consejos, beneficios y t...
 
Webinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletas
Webinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletasWebinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletas
Webinar como modernizar aplicaciones legacy y abandonar tecnologías obsoletas
 
WW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
WW+, SD+ y Audit+: Potencie GeneXus la Suite PlusWW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
WW+, SD+ y Audit+: Potencie GeneXus la Suite Plus
 
Meetup TestingUy 2019 - May the automation be with you
Meetup TestingUy 2019 - May the automation be with youMeetup TestingUy 2019 - May the automation be with you
Meetup TestingUy 2019 - May the automation be with you
 
Presentación comercial S-SQUARE S.A.
Presentación comercial S-SQUARE S.A.Presentación comercial S-SQUARE S.A.
Presentación comercial S-SQUARE S.A.
 
TDD talk
TDD talkTDD talk
TDD talk
 
Strategic Sourcing At P&G Julio 2009
Strategic Sourcing At P&G   Julio 2009Strategic Sourcing At P&G   Julio 2009
Strategic Sourcing At P&G Julio 2009
 
DevOps Cap 5: Test
 DevOps Cap 5: Test DevOps Cap 5: Test
DevOps Cap 5: Test
 
Cómo optimizar su sitio web con analítica web y tests A/B
Cómo optimizar su sitio web con analítica web y tests A/B �Cómo optimizar su sitio web con analítica web y tests A/B �
Cómo optimizar su sitio web con analítica web y tests A/B
 
Testing de Aplicaciones Móviles, Públicas, Masivas y Críticas
Testing de Aplicaciones Móviles, Públicas, Masivas y CríticasTesting de Aplicaciones Móviles, Públicas, Masivas y Críticas
Testing de Aplicaciones Móviles, Públicas, Masivas y Críticas
 
Calidad en Agile - EducacionIT
Calidad en Agile - EducacionITCalidad en Agile - EducacionIT
Calidad en Agile - EducacionIT
 
Desafíos en las organizaciones que desarrollan software
Desafíos en las organizaciones que desarrollan softwareDesafíos en las organizaciones que desarrollan software
Desafíos en las organizaciones que desarrollan software
 

Más de Flat 101

SEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centricSEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centric
Flat 101
 
Personalización En E-commerce Con Adobe Target
Personalización En E-commerce Con Adobe TargetPersonalización En E-commerce Con Adobe Target
Personalización En E-commerce Con Adobe Target
Flat 101
 
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Flat 101
 
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe AnalyticsDiferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Flat 101
 
DATASTUDIO Vitaminado
DATASTUDIO VitaminadoDATASTUDIO Vitaminado
DATASTUDIO Vitaminado
Flat 101
 
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Flat 101
 
Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?
Flat 101
 
Sketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividadSketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividad
Flat 101
 
UX para mayores de 60 años
UX para mayores de 60 añosUX para mayores de 60 años
UX para mayores de 60 años
Flat 101
 
SEO Manager: guía de Supervivencia
SEO Manager: guía de SupervivenciaSEO Manager: guía de Supervivencia
SEO Manager: guía de Supervivencia
Flat 101
 
DAT-ART: Diseño de dashboards visualmente atractivos
DAT-ART: Diseño de dashboards visualmente atractivosDAT-ART: Diseño de dashboards visualmente atractivos
DAT-ART: Diseño de dashboards visualmente atractivos
Flat 101
 
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Flat 101
 

Más de Flat 101 (12)

SEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centricSEO en e-commerce 2020: estrategia user-centric
SEO en e-commerce 2020: estrategia user-centric
 
Personalización En E-commerce Con Adobe Target
Personalización En E-commerce Con Adobe TargetPersonalización En E-commerce Con Adobe Target
Personalización En E-commerce Con Adobe Target
 
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
Machine Learning Para Definir Clusters De Usuarios Y Acciones Concretas. Medi...
 
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe AnalyticsDiferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
Diferencias Y Similitudes Entre Google Analytics Y Adobe Analytics
 
DATASTUDIO Vitaminado
DATASTUDIO VitaminadoDATASTUDIO Vitaminado
DATASTUDIO Vitaminado
 
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
Prototipar en papel: Mi mejor herramienta para diseñar interfaces complejas e...
 
Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?Publicidad personalizada, ¿eres consciente?
Publicidad personalizada, ¿eres consciente?
 
Sketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividadSketch Tips & Tricks que optimizan la creatividad
Sketch Tips & Tricks que optimizan la creatividad
 
UX para mayores de 60 años
UX para mayores de 60 añosUX para mayores de 60 años
UX para mayores de 60 años
 
SEO Manager: guía de Supervivencia
SEO Manager: guía de SupervivenciaSEO Manager: guía de Supervivencia
SEO Manager: guía de Supervivencia
 
DAT-ART: Diseño de dashboards visualmente atractivos
DAT-ART: Diseño de dashboards visualmente atractivosDAT-ART: Diseño de dashboards visualmente atractivos
DAT-ART: Diseño de dashboards visualmente atractivos
 
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
Diversidad funcional, accesibilidad e inclusión en el diseño de productos dig...
 

Último

Sesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artificalSesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artifical
Angeles del Rosario Escobar Mendoza
 
APLICACIONES EN INTERNET-GOOGLE4 XD.docx
APLICACIONES EN INTERNET-GOOGLE4 XD.docxAPLICACIONES EN INTERNET-GOOGLE4 XD.docx
APLICACIONES EN INTERNET-GOOGLE4 XD.docx
jordanovillacorta09
 
Herramientas de la web 2.0.pptx
Herramientas    de     la    web    2.0.pptxHerramientas    de     la    web    2.0.pptx
Herramientas de la web 2.0.pptx
anittaeunice
 
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docxCOMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
Jean Apellidos
 
Encuentra ese factor X que te haga mejorar como SEO #SOB24
Encuentra ese factor X que te haga mejorar como SEO  #SOB24Encuentra ese factor X que te haga mejorar como SEO  #SOB24
Encuentra ese factor X que te haga mejorar como SEO #SOB24
MJ Cachón Yáñez
 
TRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdf
TRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdfTRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdf
TRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdf
anacruztone06
 
- El Cerebro Femenino como se desarrolla
- El Cerebro Femenino como se desarrolla- El Cerebro Femenino como se desarrolla
- El Cerebro Femenino como se desarrolla
BERTILAARTEAGATOLENT1
 
Copia de LaHoja_20240527_200357_0000.pptx
Copia de LaHoja_20240527_200357_0000.pptxCopia de LaHoja_20240527_200357_0000.pptx
Copia de LaHoja_20240527_200357_0000.pptx
jcoloniapu
 
USOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdf
USOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdfUSOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdf
USOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdf
politamazznaa
 
importancia de la organizacion moderna jjj
importancia de la organizacion moderna jjjimportancia de la organizacion moderna jjj
importancia de la organizacion moderna jjj
gallegoscarneronelso
 
Encuentra ese factor X que te haga mejorar como SEO #SOB24
Encuentra ese factor X que te haga mejorar como SEO  #SOB24Encuentra ese factor X que te haga mejorar como SEO  #SOB24
Encuentra ese factor X que te haga mejorar como SEO #SOB24
ssuser82c1d6
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
al050121024
 
aplicaciones de internet Google.20240pdf
aplicaciones de internet Google.20240pdfaplicaciones de internet Google.20240pdf
aplicaciones de internet Google.20240pdf
jordanovillacorta09
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
El uso de las tics en la vida cotidiana y en otros hábitos
El uso de las tics en la vida cotidiana y en otros  hábitosEl uso de las tics en la vida cotidiana y en otros  hábitos
El uso de las tics en la vida cotidiana y en otros hábitos
241560435
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
Oruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico magoOruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico mago
ChichipeSevillaJhost
 
LA NUBE YULIANA GABRIELA CORI NINARAQUE.pdf
LA NUBE YULIANA GABRIELA CORI NINARAQUE.pdfLA NUBE YULIANA GABRIELA CORI NINARAQUE.pdf
LA NUBE YULIANA GABRIELA CORI NINARAQUE.pdf
YulianaCori
 
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdfMONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
darilpisco021
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 

Último (20)

Sesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artificalSesión N°10 / Monografía sobre la inteligencia artifical
Sesión N°10 / Monografía sobre la inteligencia artifical
 
APLICACIONES EN INTERNET-GOOGLE4 XD.docx
APLICACIONES EN INTERNET-GOOGLE4 XD.docxAPLICACIONES EN INTERNET-GOOGLE4 XD.docx
APLICACIONES EN INTERNET-GOOGLE4 XD.docx
 
Herramientas de la web 2.0.pptx
Herramientas    de     la    web    2.0.pptxHerramientas    de     la    web    2.0.pptx
Herramientas de la web 2.0.pptx
 
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docxCOMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
COMO EVOLUCIONO LAS WEB EN PLENO 2024.docx
 
Encuentra ese factor X que te haga mejorar como SEO #SOB24
Encuentra ese factor X que te haga mejorar como SEO  #SOB24Encuentra ese factor X que te haga mejorar como SEO  #SOB24
Encuentra ese factor X que te haga mejorar como SEO #SOB24
 
TRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdf
TRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdfTRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdf
TRABAJO APLICACIONES EN INTERNET - Ana cruz tone.pdf
 
- El Cerebro Femenino como se desarrolla
- El Cerebro Femenino como se desarrolla- El Cerebro Femenino como se desarrolla
- El Cerebro Femenino como se desarrolla
 
Copia de LaHoja_20240527_200357_0000.pptx
Copia de LaHoja_20240527_200357_0000.pptxCopia de LaHoja_20240527_200357_0000.pptx
Copia de LaHoja_20240527_200357_0000.pptx
 
USOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdf
USOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdfUSOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdf
USOS_Y_TIPOS_DE_APLICACIONES_MOVILES_removed.pdf
 
importancia de la organizacion moderna jjj
importancia de la organizacion moderna jjjimportancia de la organizacion moderna jjj
importancia de la organizacion moderna jjj
 
Encuentra ese factor X que te haga mejorar como SEO #SOB24
Encuentra ese factor X que te haga mejorar como SEO  #SOB24Encuentra ese factor X que te haga mejorar como SEO  #SOB24
Encuentra ese factor X que te haga mejorar como SEO #SOB24
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
 
aplicaciones de internet Google.20240pdf
aplicaciones de internet Google.20240pdfaplicaciones de internet Google.20240pdf
aplicaciones de internet Google.20240pdf
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
El uso de las tics en la vida cotidiana y en otros hábitos
El uso de las tics en la vida cotidiana y en otros  hábitosEl uso de las tics en la vida cotidiana y en otros  hábitos
El uso de las tics en la vida cotidiana y en otros hábitos
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
Oruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico magoOruam, el pequeño y el gran carismatico mago
Oruam, el pequeño y el gran carismatico mago
 
LA NUBE YULIANA GABRIELA CORI NINARAQUE.pdf
LA NUBE YULIANA GABRIELA CORI NINARAQUE.pdfLA NUBE YULIANA GABRIELA CORI NINARAQUE.pdf
LA NUBE YULIANA GABRIELA CORI NINARAQUE.pdf
 
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdfMONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
MONOGRAFRIA GOOGLE (grupo 1ro de google).pdf
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 

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