Crea tests A/B con el editor de bloques de WordPress – La guía completa

Publicada en Marketing Online.

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

Si has creado una web con el editor de bloques de WordPress, es el momento de sacarle el máximo partido y optimizar su conversión. La mejor herramienta que te ayudará en esta tarea es crear tests A/B. En esta entrada veremos muy brevemente qué son y por qué son necesarios los tests A/B y cómo, gracias al plugin Nelio A/B Testing, puedes crearlos fácilmente en cualquier web de WordPress.

Qué es la conversión web y por qué crear test A/B

En el marketing online, los dos temas que se tratan con más profundidad son la optimización del SEO y la optimización del ratio de conversión web.

La conversión web hace referencia a cualquier acción que se espera que haga un usuario al llegar a un sitio 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, etc. Y 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 dos visitas acaban comprando algún producto, el ratio de conversión en tu web es de un 2%.

Con Google Analytics puedes medir en todo momento cual es tu ratio de conversión, pero la mejor herramienta que te ayudará a mejorar dicho ratio de conversión son los tests A/B.

De forma resumida, un test A/B consiste en, a partir de una hipótesis de mejora, plantear un cambio en tu web (por ejemplo, una redistribución de la Landing Page para visualizar mejor cierta información relevante, una reordenación del menú para que hagan más clics en mi página de productos o un cambio radical del tema para que resulte más atractivo) y, a continuación, ver si ese cambio funciona mejor que lo que tenías antes.

Técnicamente, un test A/B no es más que un experimento que consiste en mostrar dos variantes de la misma página web a diferentes segmentos de visitantes del sitio web al mismo tiempo y comparar qué variante genera más conversiones.

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

Los tests A/B no son experimentos que realizas de forma aleatoria sin ningún sentido, deben formar parte de un proceso más ambicioso y que se conoce como el proceso de Optimización del Ratio de Conversión o CRO.

Pasos previos a la creación de un test A/B

Para poder mejorar tu conversión lo primero que necesitas saber es dónde estás y adónde quieres ir: define cuáles son tus objetivos de negocio, los objetivos de conversión del sitio web, tus KPIs y las métricas de dichos objetivos.

Para definir los objetivos de tu sitio web debes entender el embudo de conversión, es decir, qué hacen tus visitantes desde el momento en que aterrizan en tu web hasta que se convierten en clientes. De esta manera puedes optimizar cada etapa diferente en el embudo.

Por ejemplo, en el caso de nuestra web, Nelio Software, nuestro objetivo es aumentar los suscriptores de los planes premium de nuestros plugins. Un visitante puede conocer primero Nelio A/B Testing cuando haya buscado en Google información sobre tests A/B. Una vez aterriza en nuestro sitio web lee algunos artículos en la documentación de nuestro producto para aprender más sobre el mismo. Luego, si el visitante encuentra información interesante, pedirá información más detallada o descargará el plugin del directorio de WordPress para probar la versión gratuita del mismo. Finalmente, el visitante se suscribe a uno de nuestros planes premium.

Definición del embudo de ventas de una web
Definición del embudo de ventas de nuestra web.

Para cada una de las etapas, debes definir las distintas metas y objetivos de conversión que quieres conseguir. Por ejemplo, un objetivo de conversión puede ser un número mínimo de visitas a la documentación del producto.

Analiza e intenta entender con las herramientas que tengas disponible (Google Analytics, heatmaps, scrollmaps, clicmaps) qué está ocurriendo y dónde pierdes visitantes.

Heatmap en Nelio A/B Testing
Con los heatmaps de Nelio A/B Testings puedes entender mejor el comportamiento de los visitantes en tus páginas.

Intenta responder a:

  • ¿Cumple la página las expectativas del usuario en cuanto a contenido y diseño?,
  • ¿Cómo podemos mejorarla?
  • ¿El contenido y las ofertas de la página son lo más claros posibles?
  • ¿Podemos hacerlo más claro o sencillo?
  • ¿Qué es lo que provoca dudas en esta página o dificulta el proceso?
  • ¿Podemos simplificarlo?
  • ¿Qué hay en la página que no ayuda al usuario a actuar?
  • ¿Podemos aumentar la motivación del usuario?

Y a partir de aquí, genera tus hipótesis de cambio. Por ejemplo, en nuestra página de aterrizaje de Nelio A/B Testing vimos que muchos visitantes sólo ven el primer bloque y no se desplazan hacia abajo en la página. Después de debatir varias alternativas, decidimos que podíamos replantear el texto. Nuestra hipótesis fue la siguiente: si en la primera sección de nuestra web cambiamos el mensaje para despertar la curiosidad en lugar de la urgencia, la conversión debería mejorar.

A partir de tu hipótesis de cambio, ya tienes una nueva idea de test A/B que puedes realizar.

Versión original del primer corte de la página principal de Nelio A/B Testing.
Variante del primer corte de la página principal de Nelio A/B Testing.
Diferencias entre la versión original y la variante del primer corte de la página principal de Nelio A/B Testing.

Crear test A/B en el editor de bloques

Si quieres crear un test A/B en una web de WordPress manualmente, podrías utilizar Google Analytics para el análisis de la conversión. Sin embargo, nuestra recomendación es que uses una de las herramientas que tienes disponibles en el mercado. Y en particular, te recomendamos el uso de Nelio A/B Testing (versión gratis y premium a partir de 29€/mes), porque es la única herramienta que está totalmente creada como un plugin nativo de WordPress de forma que es compatible al 100% con el editor de bloques y no necesitas aprender ni usar ninguna otra herramienta externa para su funcionamiento. Con Nelio A/B Testing, la creación de alternativas de cualquier test A/B es exactamente igual que como creas cualquier página, entrada, menú, widget etc. en WordPress, pero además, te ahorra el trabajo de tener que segmentar el tráfico a tu web y directamente te proporciona las métricas y resultados que estás buscando.

Veamos a continuación los distintos pasos que debes seguir para crear un test A/B con Nelio A/B Testing con el editor de bloques de WordPress:

Selección del tipo de test que quieres crear

No es lo mismo crear un test A/B de una página que de un menú de navegación. 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.

Define las variantes de un test

Para el tipo de test que hayas seleccionado, deberas elegir el elemento que quieres probar y definir sus variantes. Veamos algún ejemplo…

Test A/B de página

Recientemente, con el objetivo de incrementar las ventas de nuestro producto de Nelio Content, decidimos crear un test A/B de la página de precios en la que mostramos los distintos planes. Quisimos analizar qué combinación de colores de los distintos planes, nos podría generar más ingresos.

Captura de pantalla de los planes de Nelio Content mostrados en variaciones de color azul
Versión original de nuestro test A/B: los planes de Nelio Content mostrados en variaciones de color azul.

Decidimos crear, adicionalmente a la versión original, otras dos variantes con estas combinaciones de colores:

Captura de pantalla de los planes de Nelio Content mostrados en la primera variante de un test A/B
Captura de pantalla de los planes de Nelio Content mostrados en la primera variante del test A/B.

En la primera variante, decidimos mostrar los planes con una selección de colores pastel que este año están muy de moda.

Captura de pantalla de los planes de Nelio Content de la segunda variante de un test A/B
Captura de pantalla de los planes de Nelio Content mostrados en la segunda variante del test A/B.

Y en la segunda variante, como puedes ver en la imagen anterior, sólo quisimos destacar con color fucsia el plan Standard, y los otros dos planes mostrarlos con el azul de fondo más oscuro y los botones de color verde.

¿Cómo creamos este test con Nelio A/B Testing? Tras seleccionar que quieres realizar un test de página, lo primero es ponerle un nombre al tipo de test y seleccionar la página que quieres que participe en el test.

Captura de pantalla de la creación de un nuevo test de página con Nelio A/B Testing
Captura de pantalla de la creación de un nuevo test de página con Nelio A/B Testing.

La página que participa en el test la puedes escoger de la lista de opciones que aparece por defecto, o bien la buscas escribiendo su título, su URL o su identificador. A esta página le llamamos página o versión de control.

A continuación creas una nueva variante, poniéndole un nombre 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 poder hacer todos los cambios que quieras.

Captura de pantalla de la edición de una variante de un test A/B con Nelio A/B Testing
Edición de una variante de un test A/B con Nelio A/B Testing.

Añade, modifica y borra los bloques y patrones que quieras en las páginas de las variantes como quieras. Las limitaciones que encontrarás editando una variante son las mismas que encuentras cuando editas una página y la única diferencia es que en la barra lateral derecha de la edición de las variantes verás en las propiedades de página que la página que estás editando forma parte de un test A/B.

Captura de pantalla de las funcionalidades de edición de una variante de un test A/B
Propiedades disponibles en la edición de una variante de un test A/B.

Tras hacer los cambios necesarios en la primera variante, creas la segunda y haces exactamente lo mismo. Ya has visto lo fácil que es crear las variantes que quieras.

Test A/B de una entrada

La creación de un test A/B de una entrada es muy parecida a la de una página. Tras seleccionar que quieres crear un test de entrada, el desplegable que se muestra para seleccionar la entrada original que quieres probar mostrará el listado de entradas que tengas publicadas. También puedes buscar la entrada escribiendo su título, URL o su identificador.

Seleccionar la entrada a testear en un test A/B con Nelio A/B testing.
Seleccionar la entrada a testear en un test A/B con Nelio A/B testing.

El resto del proceso es exactamente igual que el anterior.

Test A/B de un tipo de contenido personalizado

Si lo que quieres es crear un tipo de test A/B de un tipo de contenido personalizado diferente de páginas y entradas, como pueden ser cursos que tengas creados en tu web, FAQs, etc., también lo puedes hacer con Nelio A/B Testing. Sólo debes seleccionar que quieres realizar este tipo de test, y ahora el selector te permitirá seleccionar el tipo de contenido que quieres y qué contenido concreto quieres probar.

Seleccionar el contenido personalizado a probar en un test A/B con Nelio A/B testing.
Seleccionar el contenido personalizado a probar en un test A/B con Nelio A/B testing.

Test A/B de titulares

Si quieres crear titulares más atractivos, con Nelio A/B Testing es muy fácil. Puedes probar diferentes versiones del título, extracto e imagen destacada de una entrada y descubrir qué combinación consigue despertar el interés de un mayor número de lectores.

Para realizar un test de titulares con Nelio A/B Testing, no necesitas ir al editor de bloques. El propio plugin te permite hacerlo directamente en la edición de un test. Tras seleccionar que quieres crear un nuevo test de titulares, Nelio A/B Testing te muestra los titulares de las entradas que tienes en tu blog.

Definiendo un test A/B de titulares con Nelio A/B Testing.
Definiendo un test A/B de titulares con Nelio A/B Testing.

Selecciona la entrada cuyo test quieres modificar y crea las variantes que quieras del mismo, sin tan siquiera tener que ir a editar la entrada.

Definición de alternativas de titulares con Nelio A/B Testing.
Definición de alternativas de titulares con Nelio A/B Testing.

Test A/B de temas

Si tras el análisis de tu web tu hipótesis es que tu web necesita un cambio más radical, quizá cambiar de tema puede ser una alternativa. Crear un test de temas es muy fácil con Nelio A/B Testing. Sólo debes tener instalados en tu WordPress los temas que quieres probar y seleccionarlos en el test A/B de temas.

Definición de test A/B de temas con Nelio A/B Testing.
Definición de test A/B de temas con Nelio A/B Testing.

Ten en cuenta que si las páginas que tienes creadas las has personalizado completamente una a una, el efecto que un cambio de tema puede tener será mínimo.

Test A/B de Plantillas

En vez de cambiar el tema de una web, puedes probar a crear plantillas distintas para algunas de las páginas de tu web. Diséñalas previamente con el editor de bloques y luego realiza un test A/B con las mismas.

Selección de variación de plantilla de un test A/B con Nelio A/B Testing.
Selección de variación de plantilla de un test A/B con Nelio A/B Testing.

Como siempre, es tan fácil como seleccionar las distintas variantes de plantillas que quieres utilizar como variante de plantilla en todas las páginas que utilicen una plantilla determinada.

Test A/B de Menús

Crear un test A/B de menús es tan sencillo como seleccionar uno de los menús que tengas actualmente y crear las variantes que quieras.

Definición de un nuevo test A/B de menús con Nelio A/B Testing.
Definición de un nuevo test A/B de menús con Nelio A/B Testing.

Para modificar la variantes, sólo tienes que hacer clic en el enlace de editar y modificar el menú de la misma forma en la que editas cualquier menú tradicional. Una vez creado, ya lo tienes disponible como variante de este test.

Editar una variante de un test A/B de menús con Nelio A/B Testing
Editar una variante de un test A/B de menús con Nelio A/B Testing.

Modifica la estructura del menú cambiando los elementos como quieras y, cuando ya lo tengas listo, vuelve al test.

Test A/B de Widgets

Si necesitas crear un test de widgets en WordPress, tras seleccionar que quieres crear un test de widgets, sólo debes indicar el nombre de la nueva variante de widgets y hacer clic en el enlace de editar.

Creación de una variante de widget en un test A/B con Nelio A/B Testing.
Creación de una variante de widget en un test A/B con Nelio A/B Testing.

Al editar una variante, Nelio usa el editor de widgets del propio WordPress con algunos controles adicionales. Añade, elimina y ordena los widgets de la variante como quieras y luego vuelve al test.

Edición de una variante de widgets en un test A/B.
Edición de una variante de widgets en un test A/B.

Test A/B de CSS

Si quieres probar distintas versiones de reglas de estilo CSS y medir cuál funciona mejor para alcanzar tus objetivos, puedes seleccionar crear un test de CSS. Igual que en el caso de los widgets, sólo debes indicar el nombre de la nueva variante y hacer clic en el enlace de editar. En este caso se te va a abrir el editor para que añadas los estilos de CSS que quieras mientras puedes ver la previsualización de estos.

Editando una variación de un test A/B de CSS con Nelio A/B Testing.
Editando una variación de un test A/B de CSS con Nelio A/B Testing.

Una vez ya tengas las nuevas reglas definidas, haces clic en publicar y ya tienes la variante de CSS de tu test creada.

Test A/B de resúmenes de productos de WooCommerce

Finalmente, los tests A/B de resumen de producto de WooCommerce son un tipo de test específico de WooCommerce en el que se prueban diferentes combinaciones de nombre, descripción corta e imagen de producto, con la intención de descubrir cuál de ellas consigue más compras de dicho producto. La manera de crear un test de este tipo es muy parecido al de los titulares que hemos visto anteriormente.

Si has seleccionado crear un test de este tipo, Nelio A/B Testing, te mostrará en un desplegable los productos que tienes disponibles y sólo debes realizar las modificaciones de las variantes que quieras crear directamente en el editor de un test. No hace falta que vayas a editar el producto.

Definición de un test A/B de resumen de producto de WooCommerce con Nelio A/B Testing.
Definición de un test A/B de resumen de producto de WooCommerce con Nelio A/B Testing.

Define tus objetivos y acciones de conversión

Tras definir las variantes a tu test, el siguiente paso es definir el objetivo de conversión del test. ¿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.

¿Cómo definimos los objetivos y las acciones de conversión en 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.

En el ejemplo del test de la página de precios de Nelio Content, definimos 4 objetivos a medir dentro del test:

  • Clics en los botones de cualquier plan.
  • Clics en los botones del plan Basic.
  • Clics en los botones del plan Standard.
  • Clics en los botones del plan Plus.
Captura de pantalla de la definición de un test A/B de los planes de Nelio Content
Captura de pantalla de la definición de un test A/B de los planes de Nelio Content.

Segmenta tu tráfico

Una de las funcionalidades interesantes de cualquier herramienta de test A/B es que puedes segmentar tu tráfico. Es decir, puedes 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.

Por ejemplo, al cabo de un mes y nueve días de funcionamiento del test de la página de precios de Nelio Content, ya conseguimos resultados estadísticamente significativos con una confianza de casi un 100%. Y, del primer objetivo que consistía en medir los clics que se hacían en cualquiera de los botones de los planes de las tablas de precios, tuvimos los siguientes resultados:

Captura de pantalla del análisis de los resultados del primer objetivo del test A/B realizado
Análisis de los resultados del primer objetivo del test A/B realizado.

En este caso, como ves en la imagen de los resultados, muestran que la segunda variante, alternativa C, es la que consigue casi un 130% (un 129,6%, para ser exactos) más de clics que la versión original. En cambio, la variante mostrando los planes en colores pastel es un 25,5% peor. Si sólo hubiéramos tenido este objetivo del test, la alternativa C vemos que ha conseguido unos resultados arrolladores.

De forma similar, analizamos cada uno de los objetivos que nos habíamos propuesto y, vistos los resultados que obtuvimos del test A/B, llegamos a la conclusión que la versión en la que se destaca el plan Standard con un color fucsia funcionaba mucho mejor que la versión original y la versión de los colores pasteles.

Aplica la alternativa ganadora

Finalmente, como es el caso del ejemplo comentado, si consigues una variante ganadora de un test, Nelio A/B Testing te permite aplicar esa variante como versión definitiva en tu web. Esta es otra de las grandes ventajas de que Nelio A/B Testing sea un plugin nativo de WordPress, aplicar la alternativa ganadora solo implica hacer clic a un botón, «Aplicar», sin necesidad de hacer nada.

Captura de pantalla de aplicar la variante ganadora de un test A/B
Captura de pantalla de aplicar la variante ganadora de un test A/B como definitiva.

Y voilà, ahora ya tienes un nuevo diseño de tu web con datos probados, mejor que el anterior.

¿A qué esperas para crear tus tests A/B con el editor de bloques de WordPress?

Con esta guía completa sobre cómo crear tests A/B en el editor de bloques, ya has visto que con Nelio A/B Testing es tan fácil como crear cualquier otro elemento en WordPress. Además, gracias a utilizar una herramienta como ésta, no debes preocuparte de dividir el tráfico de tu web, ni de ir analizando el comportamiento de tus visitantes. Nelio A/B Testing lo hace todo por ti de forma muy cómoda. Nuestra experiencia y la de nuestros clientes nos demuestran que los tests A/B te ayudan a entender mucho mejor qué es lo que tus visitantes esperan encontrar en ella y cómo aumentar los ingresos de tu negocio sin necesidad de publicidad adicional.

Si te ha resultado útil esta guía te agradeceremos que la compartas en tus redes sociales y si tienes cualquier duda, comentario, o necesitas información adicional, no dudes en dejar tu comentario al final de este artículo.

Imagen destacada de Maarten Deckers 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.