Cree pruebas A/B rápidamente con patrones de bloques de WordPress

Publicado: 2021-09-02

Como hemos discutido en publicaciones anteriores, con WordPress 5.8 y el próximo Directorio de patrones, los patrones de bloques de WordPress están cobrando impulso. Lo que más nos gusta de los patrones de bloques es que, desde el punto de vista del diseño, tienen sentido como una sola unidad para agregar diferentes secciones en cualquier página o publicación.

Por ejemplo, para aumentar su credibilidad y ganarse la confianza de los visitantes de su sitio web, puede incluir una sección en la que destaque las características principales de sus productos, otra que incluya los logotipos de sus clientes, otra que incluya uno o más testimonios o reseñas de su servicio, etc. Y tener un repertorio variado de estampados a elegir para el diseño de cada apartado es perfecto.

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

Los patrones, entendidos como unidades de diseño de página, también son candidatos ideales para las pruebas A/B. Veamos a continuación cómo pueden ayudarte a crear tus tests A/B y así mejorar las conversiones en tu web.

Mejore la conversión web con pruebas A/B

La conversión web se refiere a cualquier acción que se espera que realice cualquier persona que llegue a su sitio web: puede visitar una página de precios o detalles del producto, suscribirse al boletín, contactarnos, leer un artículo, comprar mis productos, etc. En este contexto, la tasa de conversión es el número de conversiones logradas en relación al número de visitas. Es decir, si tu web tiene un total de 100 visitas diarias, 2 de las cuales acaban comprando un producto, la tasa de conversión en tu web es del 2% .

La herramienta que te ayuda a mejorar la tasa de conversión son las pruebas A/B. Un test A/B consiste en, a partir de una hipótesis de mejora, proponer un cambio en la web y comprobar si funciona mejor. Por ejemplo, cambia el primer bloque de la landing page con un mensaje que genere más curiosidad, cambia el orden en el que se muestran los diferentes productos en tu página de precios, añade una promoción de tus productos al final de tus posts, etc.

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

Una imagen que muestra cómo funcionan las pruebas A/B: el tráfico se divide y cada segmento ve una variante, y luego verificamos qué variante obtuvo más conversiones — En su forma más simple, las pruebas A/B proponen dividir aleatoriamente el tráfico del sitio en dos grupos para que el 50 % de los visitantes vean el diseño A mientras que el otro 50 % vea el diseño B. Al monitorear cómo reaccionan los usuarios de cada grupo, podemos calcular la tasa de conversión de cada grupo y, en caso de que haya una diferencia estadísticamente significativa entre los dos, declarar un diseño ganador.

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 de tu página testeada. Por esta razón, encontramos el concepto de patrones de bloque particularmente útil en el proceso de creación Pruebas A/B.

Crear un Prueba A/B con patrones

Aunque podrías crear un Test A/B en una web de WordPress de forma manual, nuestra recomendación es que utilices alguna de las herramientas disponibles en el mercado y, en especial, si quieres sacarle el máximo partido a los patrones de bloques, la mejor herramienta para crear Pruebas A/B es usar Nelio Pruebas A/B (gratis y premium (29€/mes) disponibles) ya que es un plugin nativo de WordPress y, por 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:

Seleccione el tipo de prueba a crear,
Definir las variantes de prueba,
Definir objetivos y acciones de conversión,
Alternativamente, defina si desea aplicar la segmentación,
Ejecute la prueba y analice su progreso,
Aplicar la alternativa ganadora como definitiva.

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

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

Ejemplos

Supongamos tres ejemplos de prueba diferentes que queremos realizar en nuestro sitio 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 mostramos las ventajas de nuestros servicios.

Sección de la página que muestra los beneficios de nuestros productos.

Ejemplo 2 : Del mismo modo, también quiero probar un diseño alternativo de la sección de testimonios en la misma página y ver cuál es más atractivo.

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

Ejemplo 3 : Me gustaría probar si agregar una sección de llamado a la acción o un banner al final de todas las publicaciones generará más suscriptores a nuestro boletín. Como puedes ver al final de este post, actualmente en nuestro blog, al final solo encuentras la sección para añadir comentarios.

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

Selección del tipo de prueba que desea crear

No es lo mismo crear un Test A/B de una página que de una plantilla. La creación de las variantes será diferente pero la gran ventaja de usar una herramienta como Nelio El A/B Testing, totalmente nativo de WordPress, es que al seleccionar inicialmente el tipo de test que vas a crear, los siguientes pasos te resultarán totalmente intuitivos dentro del contexto de WordPress.

Con Nelio A/B Testing, lo primero que tienes que hacer es seleccionar el tipo de Test A/B que quieres crear:

Selector de pruebas en Nelio A/B Testing — Selector de test en Nelio A/B Testing.

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

En los ejemplos 1 y 2 anteriores, dado que lo que queremos es cambiar una sección de una página, seleccionaríamos crear una página de prueba. En el ejemplo 3, dado que lo que queremos es la opción de agregar una sección al final de las publicaciones, lo que tiene más sentido es crear una plantilla de prueba.

Definición de variantes de prueba

Ejemplo 1 : Después de seleccionar que queremos realizar una prueba de página, debe darle un nombre al tipo de prueba y seleccionar la página, también llamada página de control, donde desea realizar la prueba. Puede elegir esto de la lista de páginas que tiene publicadas en su sitio web. En nuestro caso, es la página principal de nuestro sitio web.

Creación de variantes de una página de prueba A/B — Creación de una variante de una página. Test A/B con Nelio Pruebas A/B.

A continuación, puede crear una nueva variante. Por defecto, será una copia exacta de su página de control. Pulsa sobre 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 propias de la creación de una prueba.

Edición de la variante de una prueba de página — Edición de la variante de una página de prueba con Nelio Pruebas A/B.

Puede agregar, modificar y eliminar los bloques que desee para cambiar el diseño de la variante como desee. Pero, ¿cuál es la gran ventaja de los patrones de bloques? Ahora bien, cambiar por ejemplo el diseño de la sección que se muestra en la imagen es mucho más sencillo que crear y editar uno a uno cada uno de los bloques. Simplemente, haciendo clic en el botón de agregar patrones, puedo seleccionar el diseño que más me gusta.

Agregar un nuevo patrón — Agregando un nuevo patrón.

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

Sección rediseñada usando 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 prueba sería exactamente igual que en el ejemplo anterior. Después de seleccionar que queremos crear una página de prueba, agregaríamos un nombre a la prueba, seleccionaríamos la página principal y crearíamos una nueva variante.

Nueva prueba A/B de la sección de testimonios de la página principal — Nuevo Prueba A/B de la sección de testimonios de la página principal.

Al editarlo, como antes, nos encontramos con que tenemos un amplio abanico de diseños de secciones testimoniales entre los que podemos elegir.

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

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

Sección de testimonios mostrada con tarjetas.

Ejemplo 3. En nuestro último ejemplo, queremos que todas las publicaciones incluyan una sección al final en la que se invita al lector a suscribirse a nuestro boletín. Para hacer esto, lo más fácil fue crear una plantilla de prueba y usar una nueva variante de plantilla que incluya la sección que queremos. En el caso de la prueba de plantilla, antes de crear la prueba, se deben haber creado las diferentes plantillas.

Recuerda que, como te comenté al explicarte las novedades de la Edición Completa del Sitio en WordPress 5.8, ahora puedes crear una nueva plantilla o editar la existente en el editor de plantillas desde un post o página. Entonces, puede crear una nueva plantilla y directamente desde el editor de plantillas, puede seleccionar y agregar un patrón similar al que hemos hecho anteriormente.

Agregar un patrón en el editor de plantillas — Agregue un patrón en el editor de plantillas.

Los cambios en el patrón insertado son nuevamente mucho más rápidos que si hubiéramos creado esta nueva sección desde cero.

Ahora podemos crear la nueva plantilla de prueba. Primero, seleccionamos que queremos crear una prueba de plantilla y luego seleccionamos para las variantes A y B qué plantillas queremos mostrar.

Selección de las plantillas que componen el test A/B — Selección de las plantillas que componen el Prueba A/B.

Y listo, ya hemos creado las versiones de control y sus variantes para cada uno de los ejemplos. A partir de aquí, los siguientes pasos son los mismos para los diferentes tipos de pruebas.

Defina sus objetivos y acciones de conversión

Después de definir las variantes de tu prueba, el siguiente paso es definir el objetivo de conversión. ¿Con qué propósito estás creando esta prueba? ¿Para obtener más ventas, más suscriptores o más visitas a la página de precios? Estos objetivos se cumplen cuando el visitante realiza determinadas acciones.

Con Nelio Pruebas A/B, en la sección “Objetivos y acciones de conversión”, puede agregar tantos objetivos como desee haciendo clic en el enlace + Nuevo y, opcionalmente, puede agregarles un nombre. Nelio Las pruebas A/B te mostrarán información sobre qué tan efectiva es cada variante para cada uno de los objetivos que has definido.

Definición de objetivos de conversión en un test A/B de contenido personalizado con Nelio A/B testing. — Definición de objetivos de conversión en un Test A/B con Nelio Pruebas A/B.

Para cada uno de los objetivos que ha definido, tiene diferentes tipos de acciones de conversión para rastrear a sus visitantes. Por ejemplo, puede monitorear cuándo acceden a una página determinada, cuando hacen clic en un elemento determinado de su sitio web o cuando envían un formulario de contacto. Haga clic en el botón de acción que le interese y para cada tipo de acción puede definir su propia configuración.

Segmente su tráfico

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

Ejecute la prueba creada y analice su progreso

Y eso es todo, ahora solo tienes que pulsar el botón para iniciar una prueba y analizar su progreso. Nelio El A/B Testing se encargará de dividir tu tráfico en dos grupos para que cada uno de ellos vea una variante u otra. Al usar Nelio Pruebas A/B, no tiene que preocuparse por cuánto tiempo necesita para ejecutar una prueba o para controlar la confianza estadística de los datos. Podrá ver el número total de conversiones y páginas vistas para cada variante. También podrás ver el porcentaje de mejora de cada variante respecto a la versión original.

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

Aplicar la alternativa ganadora

Finalmente, si obtiene una variante ganadora de una prueba, Nelio Las pruebas A/B te permiten aplicar esa variante como versión final en tu sitio web con un solo clic.

Aplicar alternativa ganadora en un test A/B — Aplicar una alternativa ganadora en un Prueba A/B.

Es decir, para los dos primeros ejemplos de pruebas de página, si la variante que habíamos probado es la ganadora, reemplazando el contenido original por el de la ganadora. En el caso de una prueba de plantilla, simplemente al final de la prueba, debe cambiar la plantilla en las páginas/publicaciones que desee.

Conclusión

Las pruebas A/B son la mejor herramienta para optimizar la conversión en un sitio web. WordPress está evolucionando muy rápido y con las nuevas características y funcionalidades que ha llegado con WordPress 5.8, crear tests A/B es aún 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. Pruebas.

Recuerda que los patrones, pensados para crear y diseñar distintas secciones, facilitan no solo que puedas añadir y cambiar secciones de páginas y posts, sino también plantillas, como has visto en este post. ¡Espero ver las próximas características nuevas de WordPress!

Imagen destacada de Raimond Klavins en Unsplash