Imagen de dos pares de zapatos de niños

Cuando diseñas una web, lo haces con algún propósito: vender productos, promocionar servicios, o provocar cualquier tipo de respuesta o acción de tus lectores. Si además has elegido el plugin de Elementor como maquetador visual para crear tu web en WordPress es porque eres consciente de que el diseño importa y buscas que resulte atractiva y moderna. Hoy vamos a ver cómo crear tests A/B en Elementor.

Porque aunque uses Elementor en el diseño de tus páginas, ¿cómo sabes si tu gusto exquisito es efectivamente el que te va a traer los mejores resultados? Tú no eres tu propio cliente y sus opiniones y gustos pueden ser muy distintos a los tuyos. Dejarte llevar por tu instinto puede ser muy romántico pero si lo que buscas es mejorar la experiencia de tus usuarios y aumentar las conversiones, es decir, que tus lectores hagan cualquier acción alineada con tus objetivos (comprar, rellenar un formulario, contactar contigo etc.), la mejor alternativa es realizar tests A/B en tu web.

¿Qué son los test A/B?

El número de visitantes a tu web equivale al número de oportunidades para que un visitante realice alguna acción deseada, también llamada conversión. Esto es una subscripción, una venta, rellenar un formulario, etc.

El ratio o tasa de conversión es el número de conversiones conseguidas respecto al número de visitas. Por lo tanto, si en tu sitio web tienes un total de 100 visitas diarias de las cuales dos visitas acaban comprando algún producto, la tasa o ratio de conversión en tu web es de un 2%.

De la misma forma que puedes medir el éxito de tus campañas de email analizando qué porcentaje de los que reciben los correos acaban comprando, con nuestra web disponemos de una muy buena herramienta para mejorar el éxito o ratio de conversión de nuestra web: los tests A/B.

Los tests A/B son la mejor herramienta para optimizar la conversión en tu web. 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

Una de las cuestiones que rápidamente surge con el test A/B es qué tipo de test debería probar. Los tests A/B no son pruebas que defines aleatoriamente 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.

Optimización del Ratio de Conversión

La Optimización del Ratio de Conversión o CRO, como bien indica su nombre, es el proceso de aumentar el porcentaje de visitantes del sitio web que realizan las acciones que quieres. Este proceso, de forma resumida, consiste en los siguientes pasos:

Paso 1: Define tus metas

El primer paso en cualquier proceso de CRO es definir cuáles son los objetivos de tu negocio y los distintos objetivos de conversión de tu sitio web en las distintas fases de tu embudo de ventas. Por ejemplo, el objetivo de negocio de Nelio es aumentar los suscriptores de nuestros planes premium. Pero, ¿qué camino siguen los visitantes desde que visitan tu sitio web hasta que se convierten en clientes? Este es nuestro embudo de ventas:

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

Si nuestro objetivo de negocio es aumentar los suscriptores de nuestros planes premium, un prospecto o lead puede conocer por primera vez Nelio A/B Testing cuando ha buscado soluciones de A/B testing en Google o en el directorio de plugins de WordPress. Ese visitante a nuestra web, seguramente leerá algunos artículos en nuestra documentación para conocer un poco más nuestro producto. Si le gusta el contenido de esas páginas, visitará nuestra página de precios. En este punto, un objetivo de conversión de nuestra web será una visita a la página de precios y nuestra métrica objetivo podría ser conseguir 2.000 visitas mensuales a dicha página.

Luego, si el cliente potencial encuentra información interesante, pedirá más información detallada o descargará el plugin desde el directorio de WordPress para probar la versión gratuita del plugin. Un segundo objetivo de conversión será: un visitante rellena nuestro formulario de contacto. La métrica será el número de formularios de contacto recibidos y podemos definir nuestro objetivo mensual con un cierto valor. O bien otro objetivo de conversión será una descarga de nuestro plugin. Y así sucesivamente.

Finalmente, el prospecto se suscribe a uno de nuestros planes premium. Nuestro objetivo de conversión será, en este caso, que se produzca un evento de compra. Y como el propósito de nuestro negocio es crecer, entonces, podemos desglosar este objetivo entre los diferentes planes que tenemos.

Como has visto, este primer paso consiste en analizar el embudo de ventas para ir definiendo nuestro objetivo de conversión estableciendo unas métricas.

Paso 2: Analiza tu web

Tras este paso preliminar imprescindible, debes empezar a buscar datos de la situación actual de tu web y sobre los que puedas actuar. Identifica los problemas que actualmente tienes en tu web. Esto te va a ayudar a generar las ideas sobre los tests A/B que debes realizar.

¿Cómo recogemos datos? Inicialmente, de forma heurística evalúa cada una de las páginas que has identificado en el paso anterior. Pregúntate si cumplen o no con el conjunto de criterios que te habías establecido y mira si podrías mejorar esos resultados:

  • ¿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 posible?
  • ¿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?

Obtendrás una lista de áreas de interés que potencialmente puedes mejorar. Esta información la puedes completar con Google Analytics, por ejemplo, detectando el % de visitantes que hacen clic en los botones de tus productos y comparando esa cifra con tus objetivos. O también analizando heatmaps y scrollmaps que te ayuden a comprender el comportamiento que están realizando los usuarios de tu web.

A continuación, ordena la lista de problemas priorizando aquellos que, en caso de solucionarlos o mejorarlos, crees que tendrán más impacto (bien porque tienen más visitas o porque se trata de un problema importante).

Por ejemplo, en nuestro análisis vimos que debíamos mejorar la página de nuestro producto Nelio A/B Testing. Queríamos aumentar el número de usuarios que visitaban nuestra página de precios. Y este era un problema importante.

Paso 3: Crea tus hipótesis

El siguiente paso, antes de crear un test A/B, es de traducir la lista de problemas identificados previamente en un conjunto de hipótesis.

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. Esto lo pudimos ver tras analizar el heatmap y el scrollmap de la web. Además, sólo el 45% de los visitantes iban a la página de precios.

Versión original del primer corte de la página principal de Nelio A/B Testing.
Versión original del primer corte de la página principal de Nelio A/B Testing.

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. Este mismo ejercicio, lo puedes ir haciendo para cada uno de los problemas de tu lista ordenada.

Paso 4: Genera una idea de test

Por ejemplo, nosotros tuvimos la idea de cambiar el titular de Nelio A/B Testing a: ¿Rojo o Azul?, ¿Cuadrado o Redondo? ¿Arriba o abajo? Pon tu WordPress a prueba.

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.

También decidimos cambiar el texto debajo del titular tal y como mostramos en la imagen. La idea de test que teníamos iba con el objetivo de comprobar si es verdad que la gente prefiere que se hable de ellos en lugar de nuestros productos.

Paso 5: Crea y ejecuta tests A/B

Y como ya debes estar pensado, el siguiente paso es el de la creación del test en tu web. Como ya hemos comentado al inicio, un test A/B no es más que un experimento en el que creamos dos versiones o variantes de una página (pero también podría ser de una entrada, un menú, un widget, un formulario o cualquier otro elemento de nuestra web de WordPress) en la que segmentamos a nuestros visitantes de forma que la mitad aproximadamente ven siempre una variante y la otra mitad, la otra.

Al definir un test A/B, no sólo hemos de definir las variantes (A/B o múltiples en case de un test multivariante) del mismo, si no que también debemos definir nuestros objetivos de conversión. Tal y como hemos visto en el ejemplo anterior, nuestro objetivo de conversión era contabilizar las visitas a la página de precios de nuestros planes premium. Además, en un test A/B también podemos segmentar los participantes en un test, es decir indicar qué visitantes queremos que participen el test.

Tras ejecutar el test verás si una de las variantes ha sido la ganadora y ya podrás aplicarla con certeza como definitiva en tu web asegurándote de que tendrá una mejora en la conversión.

Y cómo ya debes imaginarte, el proceso de optimización de la conversión de una web es continuado y cíclico. No dejes nunca de hacer tests A/B para ir mejorando tu web.

Crear tests A/B en Elementor

Puedes crear un test A/B en una web de WordPress con Elementor manualmente, por ejemplo, utilizando 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, com por ejemplo, Nelio A/B Testing (versión gratis y premium a partir de 29€/mes), Convertize (versión premium a partir de $49/mes) VWO (versión premium a partir de $199/mes), Convert Experiences (versión premium a partir de $699/mes) o Optimizely(precios personalizados pero a partir aprox. $800/mes) que te ahorre el trabajo de tener que segmentar el tráfico a tu web y directamente te proporcione las métricas y resultados que estás buscando.

Veamos qué tipos de tests A/B puedes crear con Elementor utilizando Nelio A/B Testing cuya gran ventaja es que es un plugin nativo de WordPress. De hecho, sólo debes instalar el plugin Nelio A/B Testing en tu web como cualquier otro plugin y, una vez instalado, ya puedes empezar a usarlo sin necesidad de aprender a utilizar ninguna herramienta más.

Los pasos a seguir son los siguientes:

Selección del tipo de test que quieres crear

Para la creación de cualquier tipo de test, lo primero que debes seleccionar es el tipo de test que quieres crear de la lista que se te muestra.

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

Una vez seleccionado el tipo de test A/B que quieres crear, debes definir las características principales del test que quieres ejecutar en tu web.

Define las variantes de un test

Una vez seleccionado el tipo de test que quieres crear, para cada uno de ellos deberas elegir el elemento que quieres probar y definir sus variantes.

Test A/B de página

Veamos un ejemplo muy sencillo. Supongamos que tras realizar los pasos explicados anteriormente a una página (para el ejemplo, he seleccionado directamente la página de Elementor), queremos realizar un test a dicha página en el que queremos analizar si modificar la imagen de una de los bloques tiene un impacto en que la gente haga clic en el botón de querer conocer más información.

Variante 1 de un test A/B
Variante 2 de un test A/B

Tras seleccionar que queremos crear un test de página, tal y como hemos explicado en el punto anterior, en el editor de WordPress te aparece la página en la que debes editar tu test.

Definición de un nuevo test A/B de páginas con Nelio A/B testing.
Definición de un nuevo test A/B de páginas con Nelio A/B testing.

Sencillamente, le has de poner un nombre al test, en este caso «Testing Different Images» y seleccionas la página que quieres probar (en nuestro caso, la Home).

Seleccionar la página a testear en un test A/B con Nelio A/B testing.
Seleccionar la página a testear en un test A/B con Nelio A/B testing.

A continuación, creas la variante, «Variant B» de tu página original con sólo ponerle un nombre. Y si quieres, puedes crear tantas variantes como puedes haciendo clic en el botón de Nueva Variante . Por defecto, cada variante creada será una copia exacta de la página original que seleccionaste antes. Haz clic en el enlace Editar de una variante para modificarla.

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

La ventaja que tienes al usar un plugin nativo de WordPress es que puedes directamente modificar la variante de un test A/B usando el mismo maquetador visual que estés usando para la creación de tus páginas. En este caso, Elementor. Para ello, con hacer clic en el enlace de Editar que se muestra bajo el nombre de la variante recién creada, podrás acceder al editor de Elementor para hacer los cambios a la página.

Modifica una variante de un test A/B con Elementor
Modifica una variante de un test A/B con Elementor

En este caso, sólo deberías cambiar la imagen y tras hacer los cambios pertinentes, ya puedes publicar como borrador la página y volver al test que estabas creando.

Publica como draft tu variante de página
Publica como draft tu variante de página

Ya ves qué fácil ha sido crear una variante de página.

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 al analizar tu web identificas que te cuesta que los lectores vayan a leer los contenidos de tu web, quizá es que los titulares son poco atractivos. Un test que puede resultar muy interesante es el de titulares. Es decir, 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 este tipo de test, con Nelio A/B Testing no necesitas editar esta información con Elementor. 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.

Seleccionas la entrada cuyo test quieres modificar y creas 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 resúmenes de productos de WooCommerce

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.

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. Pero antes de tirarte a la piscina, recuerda, crea un test A/B con el que puedas comprobar con datos qué tema es mejor.

Crear un test de temas es 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 con Elementor 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 maquetador visual Elementor 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

Con Elementor puedes haber creado la estructura del menú de navegación directamente en WordPress o si usas la versión Pro de Elementor también puedes crear menús mediante el uso del widget Nav Menu. En caso de que lo hayas creado de la forma tradicional, crear un test A/B 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 que editas cualquier menú tradicional. Una vez creado, ya lo tienes disponible como variante de este test.

En el caso de que hayas creado tus menús con el widget Nav Menu de la versión Pro de Elementor, la creación del test la realizas igual que si crearas un test A/B de widgets tal y como explico a continuación.

Test A/B de Widgets

Si necesitas crear un test de widgets en WordPress (incluido el Nav Menu comentado antes), 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 un 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.

Define tus objetivos y acciones de conversión

Tras definir las variantes a tu test, vayamos al siguiente paso: el test A/B que hayas creado lo has hecho con la idea de comprobar algún objetivo de conversión, como el de conseguir más ventas, más subscriptores o más visitas a la página de precios, etc. Esos 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 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 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 de 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. Al utilizar una herramienta como las comentadas anteriormente, no debes preocuparte ni de cuánto tiempo necesitas ejecutarlo ni de controlar la confianza estadística de los datos.

Evolución de un test A/B con una alternativa con Nelio A/B Testing.
Evolución de un test A/B con dos alternativas con Nelio A/B Testing.

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.

Aplica la alternativa ganadora

Finalmente, sabrás cuando has conseguido una alternativa ganadora.

Mostrando el estado de los resultados de un test A/B.
Mostrando el estado de los resultados de un test A/B.

Ahora, ya sólo te quedar aplicar esa alternativa ganadora como definitiva en tu web. Con Nelio A/B Testing, al tratarse de un plugin nativo de WordPress, aplicar la alternativa ganadora solo implica hacer clic a un botón, «Aplicar». Sin necesidad de hacer nada más ya tendrás esa versión como la definitiva.

Resultados de tests A/B en Elementor Nelio A/B Testing.
Resultados de un test A/B de resumen de producto de WooCommerce con Nelio A/B Testing.

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

Empieza ya a realizar tests A/B en Elementor

Con esta guía completa sobre cómo crear tests A/B en Elementor y así estar totalmente equipado para empezar a planificar tu propio proyecto de optimización de la conversión de tu web. Los tests A/B tienen un valor incalculable cuando se trata de mejorar los ratios de conversión de tu sitio web. Además, utilizando una herramienta como Nelio A/B Testing reduces muchos de los riesgos que conlleva emprender un programa de optimización sin un criterio claro y sólo basándote en tu propia intuición.

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 Syd Wachs en Unsplash.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

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

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.