Prueba A/B de JavaScript

Las pruebas A/B de JavaScript en WordPress permiten crear pequeños fragmentos de código JavaScript que se cargan de forma dinámica en tu web, ofreciendo así un mecanismo versátil y muy potente con el que cambiar la apariencia o el comportamiento de las páginas donde se incluyan.

Nelio A/B Testing permite realizar este tipo de pruebas en WordPress de manera muy sencilla, ofreciendo las herramientas necesarias para crear contenido alternativo, realizar la prueba y hacer un seguimiento de los visitantes y la consecución de objetivos (tales como aumentar los ingresos o las suscripciones). Instala, activa y configura Nelio y sácale el máximo partido a tu web.

Instrucciones para las pruebas de JavaScript

Veamos cómo crear este tipo de pruebas con un ejemplo concreto.

Crea una nueva prueba A/B de JavaScript

1. Bajo el menú Nelio A/B Testing, haz clic en Pruebas para ver y gestionar tus pruebas.
2. Haz clic en el botón Nueva prueba en la parte superior de la pantalla.
3. Verás una ventana con todos los tipos de prueba que puedes crear. Cada una de ellas tiene un nombre y un icono.
   • Haz clic en JavaScript.

Nombra y define tu prueba

Primero de todo, dale un Nombre descriptivo a la prueba que quieres crear para poder identificarla en el futuro. Además, en la barra lateral derecha, encontrarás tres pestañas adicionales:

• Estado y Gestión, donde ves el estado en el que está tu prueba actualmente (Borrador, Preparado, Programado o Pausado) y opciones sobre cuándo debe iniciarse y finalizar,
• Descripción de la prueba, donde puedes indicar qué estás probando y qué pretendes conseguir con ella,
• Ámbito de la prueba, donde especificas qué páginas de tu web se ven afectadas por esta prueba y que por defecto indica que las variantes serán visibles en todas las páginas de tu sitio web. Si deseas limitar su alcance a determinadas páginas, dispones de un formulario para definir las URLs en las que debe ejecutarse la prueba.

Cómo crear las variantes a probar

Una prueba A/B de JavaScript en WordPress consiste en probar distintas versiones en las que añades código JavaScript a tu web y medir cuál funciona mejor para alcanzar tus objetivos. Por ejemplo, si tu web está construida con un maquetador de páginas (como Elementor) que no utiliza los elementos estándar de WordPress, puedes modificar cualquier parte de la web (como un menú, un widget o lo que quieras) con unas pocas líneas de código.

Crea nuevas variantes

Crea una «Variante B» (o más de una variante, si así lo deseas) de la apariencia y estilo originales:

1. Nombra tu variante en el campo que encuentras al lado de la letra que indica la variante que estás creando (por ejemplo, «Cambio de estilo de botones» o «Cambio en el tipo de letra»).
2. Haz clic en el enlace Editar de cada variante para crear el núevo código de JavaScript.
3. Si quieres crear más de una variante, haz clic en el botón Nueva variante que hay al final de la sección.

Editando una variante

Supongamos, por ejemplo, que quieres modificar uno de los botones que hay en el menú. En general, deberías usar una prueba de menús para ello, pero si este menú ha sido creado con Elementor o está directamente definido en las plantillas de tu tema, probablemente no sea posible usar el tipo de prueba estándar. Es en estos casos complicados donde un test de JavaScript permite saltarte todo este tipo de restricciones.

Cuando edites una variante, WordPress abrirá una pequeña caja de texto junto a una vista previa de tu web. Allí podrás añadir el códio JavaScript que quieras:

el cual quedará encapsulado en una función como la siguiente:

function( done: () => void, utils: Utils ): void {
  /* tu código irá aquí dentro */
}
type Utils = {
  readonly domReady: ( fn: () => void ) => void;
}

por lo que no debes preocuparte por «ensuciar» el ámbito global de tu web o con que haya colisiones de nombres.

Fíjate que la función donde irá tu código da acceso a un par de variables: utils y done. La más importante de las dos es done: después de haber aplicado tus cambios vía JavaScript, no olvides llamarla para que nuestro plugin muestre el contenido alternativo y empiece a hacer el seguimiento de tus usuarios.

Por otro lado, en utils tienes una función llamada utils.domReady. Si quieres modificar elementos de tu página, tienes que esperar a que estos estén cargados para poder manipularlos (lo que comúnmente se llama «esperar a que el DOM esté listo»). Como ves en la definición, se trata de una función que recibe un callback como parámetro.

Finalmente, ten en cuenta que si quisieras definir alguna cosa en el ámbito global, deberías hacerlo de forma explícita. Es decir, si quieres definir una variable global x o una función global f, debes hacerlo usando window.x o window.f.

Teniendo en cuenta todo esto, imagina que queremos modificar uno de los elementos de nuestro menú, el cual fue creado con Elementor. Para ello deberíamos hacer lo siguiente:

1. Buscamos el identificador del elemento de menú que queremos modificar inspeccionando el elemento en tu navegador.

2. Una vez lo tenemos identificado (en nuestro caso, menu-item-7745), podemos usar la función document.querySelector para recuperar el nodo del DOM y meterlo en una variable b. Como sabemos que lo que queremos modificar es, en realidad, el elemento a que hay dentro de menu-item-7745, el selector que usamos es #menu-item-7745 a.
3. Luego aplicamos los cambios que queremos: podemos ponerle un nuevo texto, cambiar su color de letra y fondo, etc.
4. Finalmente, llamamos a done() para indicarle a Nelio A/B Testing que ya hemos realizado los cambios y que puede mostrar la variante al visitante.

Si, en cualquier momento, haces clic en el botón de Guardar y Previsualizar, podrás ver qué tal está funcionando el código que has escrito y si hace lo que quieres que haga.

Cuando hayas acabado, guarda los cambios y usa el botón Atrás para volver a tu prueba. Recuerda que las variantes creadas sólo se muestran como parte de una prueba A/B y de eso se encarga Nelio A/B Testing.

Cómo definir tus objetivos y acciones de conversión

Las pruebas A/B, por lo general, se realizan con algunos objetivos en mente, como «conseguir más suscriptores» o «mostrar interés en tus productos». Los objetivos se cumplen cuando el visitante realiza ciertas acciones. Por ejemplo, un visitante puede estar «mostrando interés en tus productos» cuando visita tu página de precios o cuando completa un determinado formulario en tu sitio web.

Define tus objetivos de conversión

Puedes añadir tantos objetivos como quieras haciendo clic en en el enlace + Nuevo. Si creas más de un objetivo, Nelio A/B Testing te mostrará información sobre cuán efectiva es cada variante para cada uno de los objetivos definidos.

Opcionalmente, puedes dar un nombre a tu objetivo que te ayude a recordar qué te interesaba mejorar en tu prueba. Por ejemplo, tus objetivos podrían ser «Aumentar suscripciones» o «Mostrar interés en mis productos».

Añade acciones de conversión a tus objetivos

Dispones de diferentes tipos de acciones de conversión para hacer un seguimiento de tus visitantes. Por ejemplo, puedes controlar cuando acceden a una cierta página, cuando pulsan un cierto elemento de tu web o cuando envían un formulario de contacto.

1. Haz clic en el Botón de Acción que te interese (por ejemplo, si quieres que hagan clic en una opción de menú, haz clic en Clic).
2. Cada tipo de acción de conversión tiene sus propios parámetros de configuración. En el caso de hacer Clic, por ejemplo, deberás especificar qué elemento HTML (mediante su ID o selector CSS) tiene que hacer clic el usuario (siguiendo con nuestro ejemplo, un «elemento que me identifica un ítem del menú» de los que tengo disponibles). Fíjate que en este caso deberás seleccionar los elementos HTML de la versión de control y de cada una de las variantes.
3. Repite el proceso para todas las acciones que quieras añadir.

Recuerda que puedes borrar cualquier acción haciendo clic en el enlace Eliminar que se encuentra debajo de la acción.

Como iniciar la prueba

Una vez hayas definido totalmente tu prueba, verás que el estado de la misma habrá pasado de Borrador a Preparado. En ese momento, podrás iniciarla para que los visitantes de tu web vean las diferentes variantes que has creado y Nelio A/B Testing empiece a hacer un seguimiento de sus acciones.

Inicia tu prueba

Para iniciar una prueba, comprueba que esté Preparada y, si lo está, haz clic en el botón Iniciar… que hay en la esquina superior derecha. Si no estuviera Preparada, puedes poner tu cursor encima del icono de información que aparece al lado del Estado para ver el motivo por el cual tu prueba sigue estando como Borrador.

Si no quieres iniciar la prueba directamente, sino que quieres dejarla programada para una fecha concreta, especifícala usando el campo Inicio de la sección Estado y gestión.

Una vez iniciada la prueba, el plugin te mostrará su página de resultados y verás que el estado cambia a En ejecución.

Importante: las pruebas no se pueden editar una vez están activas pero puedes pausarlas, modificarlas y volverlas a arrancar para que sigan ejecutándose. Eso sí, dependiendo de las modificaciones que realices, podría ser que tus resultados parciales no tengan validez después de volver a arrancar la prueba. En tal caso, lo mejor es empezar una prueba nuevoa, duplicando la anterior.

Cuándo quieres que finalice tu prueba

También puedes definir cuándo quieres que la ejecución acabe, indicando el Modo de Finalización de la prueba:

• Manual: la prueba se parará cuando hagas clic en el botón de Parar la prueba, en el listado de pruebas o en su página de resultados.
• Duración: la prueba se parará automáticamente tras el tiempo indicado.
• Páginas vistas: la prueba se parará automáticamente tras alcanzar el número total de visitas que hayas especificado.
• Confianza: la prueba se parará automáticamente cuando se encuentre un ganador en el primer objetivo de tu prueba con el nivel de confianza especificada.

Cómo ver el progreso de una prueba y sus resultados

En la opción de menú Pruebas puedes ver el listado de las pruebas creadas, el estado en que se encuentran y la fecha de su última actualización. En todo momento puedes ver los resultados de una prueba que está iniciada o que ya ha finalizado haciendo clic en el enlace Ver Resultados que se encuentra debajo de su nombre.

Resumen de los resultados

En la barra lateral derecha de la página de resultados encuentras el Resumen de tu prueba con las siguientes métricas:

• Icono de estado. Este icono te ayuda a identificar rápidamente el progreso de tus pruebas. Inicialmente está en amarillo, indicando que no hay suficientes visitas para determinar un ganador. Si el icono cambia mostrando un reloj con un corazón es que hay un posible ganador, pero la confianza estadística es baja, por lo que todavía pueden cambiar las cosas. Finalmente si se muestra un icono verde (con una medalla), tenemos a un claro ganador. Si el icono es rojo es que ninguna alternativa es mejor que la original.
• Algunos metadatos sobre tu prueba. En concreto, puedes ver el estado de la prueba, cuanto tiempo ha estado en marcha, cuando se inició y el modo de finalización.
• También se incluye la descripción y el ámbito de la prueba, si procede.

Progreso de la prueba

La página de los resultados muestra, a su vez, la siguiente información del progreso de una prueba:

1. Nombre de la prueba
2. Evolución con el ratio de conversiones de la versión de control y de todas las variantes, así como el número total de conversiones y visitas a página de la prueba.
3. Dos gráficos adicionales que muestran los ratios de conversión de cada alternativa y su grado de mejora respecto a la original, respectivamente.
4. Para cada una de las variantes de la prueba veremos una imagen en miniatura, si está disponible, de la versión que está bajo test, el número de visitas que ha recibido, su número de conversiones, el ratio de conversión resultante y, para todas las variantes que no sean la original, el grado de mejora (o empeoramiento) que tienen respecto a la versión de control.
5. Finalmente, se muestra un resumen de los objetivos y acciones de conversión de la prueba.

Mejora la conversión de tu web

En todo momento, se puede finalizar una prueba manualmente haciendo clic en el botón Finalizar que encontramos en la esquina superior derecha de la página de resultados. Recuerda que una prueba también puede finalizar automáticamente si se cumple la condición indicada en su modo de finalización.

Tras finalizar una prueba y para mejorar la conversión de tu web, asegúrate de que aplicas el fragmento JavaScript de la variante ganadora en tu web.