Crea tests A/B rápidamente con patrones de bloques de WordPress

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparación de dos variantes de la misma página mediante test A/B

Comparte este artículo

Como ya hemos comentado anteriormente, con la versión de WordPress 5.8 y la publicación del Directorio de patrones hemos observado que los patrones de bloques de WordPress están cogiendo un gran impulso. Lo que más nos gusta de los patrones de bloques es que, desde el punto de vista de diseño de cualquier página o entrada, tienen sentido como una única unidad para añadir distintas secciones en cualquier página o entrada.

Por ejemplo, para aumentar tu credibilidad y ganarte la confianza de los visitantes de tu web, te puede interesar incluir una sección en la que destacas las principales características de tus productos, otra que incluya los logos de tus clientes, otra que incluya uno o más testimonios o revisiones de tu servicio, etc. Y que para el diseño de cada sección dispongas de un variado repertorio de patrones entre los que elegir es perfecto.

Secciones de nuestra página de inicio
Distintas secciones de nuestra página de inicio.

Los patrones, entendidos como unidades del diseño de página, son también candidatos ideales con los que realizar tests A/B. Veamos a continuación cómo te pueden ayudar a crear tus tests A/B y así mejorar la conversión en tu web.

Mejora la conversión web con tests A/B

La conversión web hace referencia a cualquier acción que se espera que haga cualquier persona que aterriza en tu web. Que visite los detalles de un producto o la página de precios, que se suscriba a la newsletter, que contacte con nosotros, que lea un artículo, que compre mis productos, etc. En este contexto, el ratio de conversión es el número de conversiones conseguidas respecto al número de visitas. Es decir, si en tu sitio web tienes un total de 100 visitas diarias de las cuales 2 visitas acaban comprando algún producto, el ratio de conversión en tu web es de un 2%.

La herramienta que te ayuda a mejorar el ratio de conversión son los tests A/B. Un test A/B consiste en, a partir de una hipótesis de mejora, plantear un cambio en la web y ver si funciona mejor. Por ejemplo, cambiar el primer bloque de la página de aterrizaje con un mensaje que genere más curiosidad, cambiar el orden en que se muestran los distintos productos en tu página de precios, añadir una promoción de tus productos al final de tus entradas, etc.

Desde el punto de vista técnico, el test A/B consiste en mostrar dos o mas versiones o variantes de la misma página web (también puede ser el menú o tema, etc.) a diferentes conjuntos de visitantes de la web y comparar qué variante genera más conversiones.

Funcionamiento del Test A/B
Funcionamiento del Test A/B.

Como ya habrás observado en los ejemplos comentados anteriormente, en muchas ocasiones, las variantes que creas consisten en añadir, modificar o eliminar una sección respecto a la versión original que tenías en tu web. Por este motivo, el concepto de patrones de bloques nos parece particularmente útil en el proceso de creación de tests A/B.

Crear un test A/B con patrones

Aunque podrías crear un test A/B en una web de WordPress manualmente, nuestra recomendación es que uses una de las herramientas disponibles en el mercado y, en particular, si quieres sacarle el máximo provecho a los patrones de bloques, la mejor herramienta para crear tests A/B es utilizar Nelio A/B Testing (versión gratis, y premium a partir de 29€/mes) ya que es un plugin nativo de WordPress y, por lo tanto, está totalmente integrado con el editor de bloques de WordPress.

Para crear un test A/B con Nelio A/B Testing con el editor de bloques de WordPress, los pasos a seguir son los siguientes:

  • Selecciona el tipo de test a crear,
  • Define las variantes del test,
  • Define los objetivos y acciones de conversión,
  • Alternativamente, define si quieres aplicar segmentación,
  • Ejecuta el test y analiza su progreso,
  • Aplica la alternativa ganadora como definitiva.

En esta guía, te explicamos todos los detalles de cada uno de los pasos anteriores para crear tests A/B con Nelio A/B Testing en el editor de bloques.

Veamos con algunos ejemplos cómo los patrones de bloques nos pueden ayudar a ser mucho más eficientes en la creación de tests A/B; en particular, en la definición de las variantes del test.

Ejemplos

Supongamos tres ejemplos de test distintos que queremos realizar en nuestra web.

Ejemplo 1: por un lado, quiero probar un diseño alternativo en nuestra página de Nelio cambiando la sección en la que se muestran los beneficios de nuestros servicios.

Sección de página mostrando los beneficios de nuestros productos
Sección de página mostrando los beneficios de nuestros productos.

Ejemplo 2: de forma parecida también quiero probar un diseño alternativo de la sección de testimonios de la misma página y ver cuál resulta más atractivo.

Sección de testimonios de la página principal de Nelio
Sección de testimonios de la página principal de Nelio.

Ejemplo 3: me gustaría probar si añadiendo una sección o banner de llamada a la acción al final de todas las entradas consigo más suscriptores a nuestra Newsletter. Tal y como puedes ver al final de esta entrada, actualmente en nuestro blog, al final sólo encuentras la sección para añadir comentarios.

¿Cómo creamos estos test A/B? Con una herramienta como Nelio es prácticamente tan fácil como cambiar el diseño de dicha página con algún paso adicional. Veamos cuales…

Selección del tipo de test que quieres crear

No es lo mismo crear un test A/B de una página que de una plantilla. La creación de las variantes va a ser distinta pero la gran ventaja de utilizar una herramienta como Nelio A/B Testing, totalmente nativa de WordPress, es que con seleccionar inicialmente el tipo de test que vas a crear, los pasos a continuación van a ser totalmente intuitivos dentro del contexto de WordPress.

Con Nelio A/B Testing, lo primero que debes hacer es seleccionar el tipo de test A/B que quieres crear y te ofrece una gran variedad de elementos entre los que seleccionar:

Selector de nuevo test en Nelio A/B Testing
Selector de nuevo test en Nelio A/B Testing.

Una vez seleccionado el tipo de test, ya verás que crear las variantes del test es exactamente igual que cuando creas cualquier elemento de WordPress.

En los ejemplos 1 y 2 que hemos comentado, como lo que queremos es cambiar una sección de una página, seleccionaríamos el crear un test de página. En el ejemplo 3, como lo que queremos es la opción de añadir una sección al final de las entradas, lo que tiene más sentido es crear un test de plantilla.

Definición de las variantes del test

Ejemplo 1: Tras seleccionar que queremos realizar un test de página, debes ponerle un nombre al tipo de test y seleccionar la página, también llamada página de control, en la que quieres realizar el test. Esta la puedes escoger de la lista de páginas que tienes publicadas en tu web. En nuestro caso, es la página principal de nuestra web.

Creación de variante de un test A/B de página
Creación de variante de un test A/B de página con Nelio A/B Testing.

A continuación ya puedes crear una nueva variante en la que indicas el nombre de la misma y por defecto se habrá creado una copia exacta de la página de control que habías seleccionado anteriormente. Haz clic en el enlace Editar de la variante y verás que tendrás el editor de bloques de WordPress que ya conoces para realizar todos los cambios que quieras junto con algunas propiedades adicionales de la creación de un test.

Edición de la variante de un test de páginas
Edición de la variante de un test de páginas con Nelio A/B Testing.

Puedes añadir, modificar y borrar los bloques que quieras para cambiar el diseño de la variante como quieras. Pero, ¿cuál es la gran ventaja que nos aportan los patrones de bloques? Ahora, cambiar por ejemplo el diseño de la sección mostrada en la imagen es mucho más fácil que crear y editar cada uno de los bloques uno por uno. Simplemente, haciendo clic en el botón de añadir patrones puedo seleccionar el diseño que más me guste.

Añadiendo un nuevo patrón
Añadiendo un nuevo patrón.

De esta forma, una vez ya tengo el diseño montado en un sólo clic, sólo debo reemplazar las imágenes con las que ya tenía en la biblioteca de medios y copiar y pegar el texto del original para cambiar el aspecto de esta sección.

Sección rediseñada mediante el uso de un patrón
Sección rediseñada mediante el uso de un patrón.

Ejemplo 2: En este caso, el proceso de selección del tipo de test sería exactamente el mismo que en el ejemplo anterior. Tras seleccionar que queremos crear un test de páginas, le añadiríamos un nombre al test, seleccionaríamos la página principal y crearíamos una nueva variante.

Nuevo test A/B de la sección de testimonios de la página principal
Nuevo test A/B de la sección de testimonios de la página principal.

Al editar la misma, igual que antes, encontramos que tenemos un gran abanico de diseños de secciones de testimonios entre los que podemos escoger.

Selección de un patrón de testimonios
Selección de un patrón de testimonios.

Y al igual que antes, ahora con reemplazar imágenes y un simple copiar y pegar de texto, hemos cambiado rápidamente el diseño de esta sección.

Sección de testimonios mostradas con tarjetas
Sección de testimonios mostradas con tarjetas.

Ejemplo 3. En el último caso, lo que queremos es que todas las entradas incluyan una sección al final de las mismas en la que se invite al lector a subscribirse a nuestra newsletter. Para ello, lo más fácil es crear un test de plantillas en el que la nueva variante de la plantilla incluya dicha sección. En el caso del test de plantillas, antes de crear el test deben haberse creado las diferentes plantillas.

Recuerda que tal y como te comente al explicarte las nuevas funcionalidades de Full Site Editing de WordPress 5.8, ahora puedes desde una entrada o página, crear una nueva plantilla o editar la existente en el editor de plantillas. Por lo tanto, puedes crear una nueva plantilla y directamente desde el editor de plantillas, puedes seleccionar y añadir un patrón de forma parecida a lo que hemos hecho anteriormente.

Añadir un patrón en el editor de plantillas
Añadir un patrón en el editor de plantillas.

Los cambios al patrón insertado vuelven a ser mucho más rápidos que si hubiéramos creado esta nueva sección desde cero.

Diseño de la nueva plantilla
Diseño de la nueva plantilla.

Ahora ya podemos crear el nuevo test de plantillas. Primero, seleccionamos que queremos crear un test de plantillas y a continuación seleccionamos para las variantes A y B qué plantillas queremos que se muestren.

Selección de las plantillas que forman el test A/B
Selección de las plantillas que forman el test A/B.

Y ya está, ya tenemos creadas para cada uno de los ejemplos, las versiones de control y sus variantes. A partir de aquí, los siguientes pasos son iguales para los distintos tipos de test.

Define tus objetivos y acciones de conversión

Tras definir las variantes de tu test, el siguiente paso es definir el objetivo de conversión. ¿Con qué propósito estás creando este test? ¿Conseguir más ventas, más subscriptores o más visitas a la página de precios? Estos objetivos se cumplen cuando el visitante realiza ciertas acciones. Por ejemplo, puedes conseguir más suscriptores cuando un usuario completa un determinado formulario en tu sitio web o más visitas a la página de precios cuando un usuario hace clic en un botón, etc.

Con Nelio A/B Testing, en el apartado de «Objetivos y acciones de conversión», puedes añadir tantos objetivos como quieras haciendo clic en el enlace +Nuevo y opcionalmente puedes añadirles un nombre. Nelio A/B Testing te mostrará información sobre cuán efectiva es cada variante para cada uno de los objetivos que hayas definido.

Definición de los objetivos de conversión en un test A/B de contenidos personalizados con Nelio A/B testing.
Definición de los objetivos de conversión en un test A/B con Nelio A/B testing.

Para cada uno de los objetivos que hayas definido, 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. Haz clic en el botón de acción que te interesa y para cada tipo de acción podrás definir sus propios parámetros de configuración. Por ejemplo, puedes hacer clic en visita a página y seleccionar la página de precios o seleccionar el envío de un formulario para ver cuántos subscriptores se suscriben, etc.

Segmenta tu tráfico

Una de las funcionalidades interesantes de cualquier herramienta de test A/B es que te permita segmentar tu tráfico. Es decir, que puedas establecer que sólo algunos visitantes participen en un test. Por ejemplo, por país, hora, idioma, navegador, dispositivo, etc. Si quieres más detalles sobre cómo implementar la segmentación de tráfico con Nelio A/B Testing, en este artículo Antonio te lo explica con detalle.

Ejecuta el test creado y analiza el progreso

Y ya está, ahora sólo debes apretar el botón para iniciar un test y analizar el progreso del mismo. Nelio A/B Testing se encargará de separar el tráfico que llega a tu web para que vean únicamente alguna de las variantes creadas y analizar su comportamiento. Al utilizar Nelio A/B Testing, no debes preocuparte ni de cuánto tiempo necesitas ejecutar un test ni de controlar la confianza estadística de los datos. Podrás ver el numero total de conversiones y visitas a las páginas de cada variante. También podrás ver el porcentaje de mejora (o empeoramiento) de cada variante respecto la versión original.

Gráficos con los ratios de conversión de cada variante en un test A/B
Ratios de conversión de cada variante en un test A/B.

Aplica la alternativa ganadora

Finalmente, si consigues una variante ganadora de un test, Nelio A/B Testing te permite aplicar esa variante como versión definitiva en tu web con un sólo clic.

Aplicar alternativa ganadora en un test A/B
Aplicar alternativa ganadora en un test A/B.

Es decir, para los dos primeros ejemplos de test de páginas, si la variante que habíamos probado es la ganadora, al hacer clic en aplicar como ganadora, la página que habíamos diseñado como ganadora sustituirá a la versión original quedando como definitiva. En el caso de un test de plantillas, sencillamente al finalizar el test, debes asegurarte de que has seleccionado la plantilla ganadora en las páginas o entradas que te interese.

Conclusión

Los tests A/B son la mejor herramienta para optimizar la conversión en una web. WordPress está evolucionando de forma muy rápida y con las novedades y funcionalidades que nos han llegado en WordPress 5.8, crear test A/B todavía es más fácil si utilizas una herramienta nativa de WordPress totalmente integrada con el editor de bloques, como es el caso de Nelio A/B Testing.

Recuerda que los patrones, pensados para crear y diseñar distintas secciones, facilitan no sólo que puedas añadir y cambiar secciones de páginas y entradas, sino también de plantillas tal y cómo has podido ver en esta entrada. ¡Con ganas ya de ver las próximas novedades de WordPress!

Imagen destacada de Raimond Klavins en Unsplash

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.