En este artículo vamos a explicar cómo puedes hacer un test A/B en la plataforma de testing Convert Experiments. Damos por sentado, que has realizado ya tu análisis, has formulado tu hipótesis y tienes un diseño preparado para implementar.
Instalación de la herramienta de testing Convert Experiments
Todas las páginas del sitio web deberían incluir el código javascript de convertexperiments.com para que el visitante que visite nuestra página tenga Convert Experiments cargado de forma directa. Si usamos Google Tag Manager o similar podríamos estar mostrando la versión original durante el proceso de carga de las versiones alternativas.
La realidad, poner el código directo en el <head> puede ralentizar el sitio web, entre 0.1s o 3s dependiendo de la herramienta y el código usado.
Configuración del test en Convert Experiments
Ante todo, debemos tener en cuenta todos los tests que creamos para los distintos países y categorías de dispositivo. No es lo mismo testear para España que para Alemania o para una experiencia mobile o desktop.
Lo más importante cuando defines un test es:
- Configurar la audiencia con el país y la categoría de dispositivo.
- Seleccionar correctamente las páginas que debe activar el experimento.
- Crear y seleccionar aquellos objetivos primarios y secundarios que necesites (Ej: Tracking de revenue para testear Revenue Per Visitor, Páginas de confirmación, Custom events, etc)
Editor de la variación en Convert Experiments
La sección «Code editor» es una sección especial que contiene código JavaScript y que se carga lo más pronto posible, sin esperar a que la página esté lista.
La sección «Custom CSS» es la manera más rápida que tenemos para cargar cambios de aspecto (color, espacios, borders, tipografía, etc) en nuestra variación.
La sección de «Custom JavaScript» puedes realizar la ejecución segura de código JavaScript, tales como el envío de datos a Google Tag Manager. Por ejemplo, para poder analizar los datos en Google Analytics, para lanzar una encuesta distinta para la versión original o para la versión alternativa, tener mapas de calor segmentados, grabaciones etiquetadas, etc
Aquí ya deberias tener tu test A/B custom listo.
Uso jQuery para implementar el test en Convert Experiments
La librería jQuery es la librería JavaScript más usada, y por eso Convert Experiments y otras herramientas de testing ofrecen maneras de usarla en la implementación de tus tests.
Para añadir al final HTML dentro de los elementos con class .inner
$( ".inner" ).append( "<p>Test</p>" );Para añadir HTML a justo a continuación de los elementos con class .inner
$( ".inner" ).after( "<p>Test</p>" );Para añadir HTML al inicio del contenido de los elementos con class .inner
$( ".inner" ).prepend( "<p>Test</p>" );Para añadir HTML justo antes de los elementos con class .inner
$( ".inner" ).before( "<p>Test</p>" );Para mover el elemento .whatToMove justo antes del .whereToMove
$('.whatToMove').insertBefore('.whereToMove');Para mover el elemento whatToMove justo después del .whereToMove
$('.whatToMove').insertAfter('.whereToMove');Para mover el elemento .whatToMove al inicio del contenido del elemento .whereToMove
$('.whatToMove').prependTo('.whereToMove');Para mover el elemento .whatToMove justo al final del contenido del elemento .whereToMove
$('.whatToMove').appendTo('.whereToMove');
Evitar el efecto destello en lo tests con Convert Experiments
En la sección de «Code editor» puede que jQuery aún no haya cargado, por eso Convert Experiments proporciona a través de convert._$ una referencia a una librería jQuery algo modificada para no tener que esperar a que todo el documento esté listo (dom ready).
Esta es la manera en la que podemos evitar un efecto «destello». Un efecto en que, durante la carga de la variante alternativa, se muestra la variante original.
Cada 50ms se ejecuta el código JavaScript que pongas dentro de «Code Editor». Si encuentra una referencia no disponiblee durante su ejecución, volverá a ejecutarse. En otro caso habrá acabado de ejecutar todo el código y no se volverá a ejecutar.
Por ejemplo:
convert._$("a.login").text("Login here");
convert._$("a.loginFooter").text("Login");Una vez se carga Convert Experiments, se ejecuta el código de la variación dentro de «Code editor». Así que «a.login» esté disponible, el texto se cambiará. Si «a.loginFooter» no lo está, volverá a esperar 50ms las ocasiones que haga falta hasta que esté disponible para efectuar el cambio. En realidad, la línea anterior también se vuelve a ejecutar.
Debemos tener en cuenta que la reejecución del código, en algunos casos podría producir efectos indeseados y multiplicar los cambios. Para evitarlos, es recomendable ejecutar el código cuando los elementos a cambiar más profundos en el DOM estén ya disponibles.
Ejemplo:
if(convert._$("a.loginFooter").length > 0) { convert._$("a.loginFooter").after(" after");}A menudo es necesario disponer de una referencia no modificada a jQuery. Con esta finalidad disponemos de convert.$, aunque sería preferible usarla solo dentro de la sección de Custom JavaScript
Previsualización y preactivación de las variaciones de Convert Experiments
Para revisar que todo esté correcto, podemos previsualizar los experimentos sin activarlos. Esto nos ayuda a poder comprobar con distintos dispositivos y navegadores que las funcionalidades y no sólo el aspecto sea el esperado.
Ejemplos:
- En iPhone no funcionan los acordeones dinámicos.
- En Internet Explorer se rompe el CSS.
- En pantallas pequeñas se desajusta un texto.
- El teléfono se muestra distinto si tienen instalado Skype.
- Etc
Si quieres preativarlo de forma privada, antes de realizar el lanzamiento puedes podemos activarlo de forma controlada con un «utm_medium» específico. De esta manera nos aseguramos que la audiencia y las condiciones de activación sean las que tienen que ser. En este ejemplo, puedes ver una audiencia avanzada con una condición adicional.
Si la URL de previsualización de la variación 1 es https://www.dominio.com/?convert_action=convert_vpreview&convert_e=100118591&convert_v=1001166649
- Si quieres visualizar una «preactivación» y ver la asignación de forma aleatoria de todas las variaciones, usa https://www.dominio.com/?utm_medium=my_test
- Para forzar la visualización de la variación 1 «preactivada», deberías abrir una ventana en incógnito y visualizar https://www.dominio.com/?utm_medium=my_test&_conv_eforce=100118591.1001166649c
Para ver qué está pasando y detectar posibles problemas, puedes instalar y usar la extensión de Convert Experiences para Google Chrome. Cuando la activas (puesta en «ON»), tendrás los logs en la consola con los experimentos que activas y la evaluación de condiciones de activación.
Para que el test quede definitivamente activado para la audiencia deseada, sólo quedaría quitar la condición de utm_medium como condición de la audiencia avanzada.
Duración del test en Convert Experiments
Por último, sabiendo el efecto mínimo que quieres detectar, ajusta el mínimo de días de ejecución del test. Por defecto Convert Experiments define 7 días y esto podría ser insuficiente.
No vale con parar el test automáticamente al conseguir significancia estadística si lo que quieres estar seguro que hay un efecto mínimo a detectar. Debes planificar el test el número suficiente de días para tener una muestra suficientemente grande y representativa.
Únete al club de la lucha contra los tests inconcluyentes. Realiza un buen análisis y plantea una hipótesis pontente 🙂
Cualquier duda o sugerencia, deja tu comentario o contacta con nosotros. Y si te a gustado, comparte 😉
