Test A/B de CSS en WordPress

Los tests A/B de CSS en WordPress permiten crear reglas CSS alternativas que se cargan de forma dinámica en tu web, modificando su apariencia y permitiéndote crear experiencias de usuario diferentes para descubrir cuál funciona mejor. Nelio A/B Testing permite realizar este tipo de tests en WordPress de manera muy sencilla, ofreciendo las herramientas necesarias para crear contenido alternativo, realizar el test 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 saca el máximo partido a tu web.

Instrucciones para los tests de CSS

Una vez hayas instalado, activado y configurado Nelio A/B Testing, sigue estas instrucciones para crear tests A/B.

Crear un nuevo test A/B de CSS

  1. Bajo el menú Nelio AB Testing, haz clic en Experimentos para ver y gestionar tus experimentos. Ten en cuenta que la primera vez que accedas a esta página no habrá ningún experimento todavía.
  2. Hay tres formas de empezar:
    • Si no has creado ningún experimento todavía, haz clic en ¡Crear uno ahora!.
    • Haz clic en el botón Añadir nuevo que hay al lado del título Experimentos, en la esquina superior izquierda de la pantalla.
    • Bajo el menú Nelio AB Testing, haz clic en Añadir experimento.
  3. Verás una lista con todos los tipos de experimento que puedes crear. Cada uno de ellos tiene un nombre, un icono y una descripción.
    • Haz clic en Nuevo Test A/B de CSS.

Definir la información básica

Rellena la Información básica de un experimento. En este caso en concreto, la información básica incluye:

  • Nombre: un nombre claro y descriptivo del experimento que te ayude a identificarlo en el futuro.
  • Descripción: cualquier información adicional sobre el experimento que te ayude a identificarlo mejor.

Crear fragmentos CSS alternativos

Bajo la pestaña Alternativas, haz clic en Nuevo CSS alternativo para crear un nuevo estilo alternativo.

  1. Nombra el estilo alternativo en el campo Nombre (por ejemplo, "Nuevo color de fondo").
  2. Haz clic en el botón Crear que hay debajo del nombre.
  3. Crea tantas alternativas como quieras y edítalas usando el enlace Guardar Experimento y Editar CSS que aparece bajo sus nombres.

Configuración de objetivos

Para definir y configurar las acciones que deberían contribuir a una conversión, ve a la pestaña de Objetivos. Las acciones se organizan en Objectivos*. Puedes definir tantos objectivos como quieras haciendo clic en el botón Añadir otro objetivo. La primera vez que accedas a este apartado, verás el objetivo principal. Puedes añadir acciones a tus objetivos así:

  1. Haz clic en la Nueva Acción que quieres crear (por ejemplo, si quieres que tus visitantes visiten la página con el plan básico o con el plan profesional, añade una nueva acción de visita a Página y selecciónala).
  2. Configura la acción correctamente (en nuestro caso, deberías seleccionar la página con el Plan Básico o con el Plan Profesional, así como añadir cualquier información extra que fuera necesaria*).
  3. Repite el procesopara todas las acciones que quieras.

* Para más información sobre cómo funcionan los objetivos y las acciones de conversión, echa un vistazo a nuestra documentación.

Iniciar un experimento

Una vez hayas definido totalmente tu experimento (es decir, cuando haya la información básica y haya una o más alternativas creadas), podrás iniciarlo. Para ello, ve a Experimentos, ponte encima del experimento en cuestión y haz clic en el botón Iniciar.

* Los experimentos no se pueden editar una vez están activos. Si bien puedes modificar el contenido de las alternativas, esto no es recomendable; hacerlo podría impactar en los resultados del experimento e invalidarlos.

El progreso de un experimento y los resultados

Resultados de tu experimento

Los experimentos activos aparecen en el escritorio como pequeñas tarjetas con toda la información relevante. Para este tipo en concreto, la información disponible es:

  • Visitas a página: cuántas veces tus visitantes han visto una cierta página en tu web con el CSS por defecto o alguna de las versiones alternativas.
  • Alternativas: número de alternativas que definiste en el experimento (incluyendo la versión original).
  • Ratio de conversión de la versión original: el ratio de conversión de la versión original.
  • Ratio de conversión de la mejor alternativa: de entre todas las alternativas (sin contar la original), muestra el mayor ratio de conversión.

Si quieres ver más información sobre el Progreso de un experimento, haz clic en la tarjeta que hay en el Escritorio de Nelio o ve a la página de Experimentos, pon el raton encima del experimento que te interese y haz clic en Ver.

Información general

La página con el Progreso de un experimento se organiza en tres pestañas diferentes. Cada una de ellas se centra en un aspecto concreto del test y da información relevante.

En la pestaña General encontrarás:

  1. Un resumen donde aparecen las métricas más relevantes de tu experimento:
    • Icono grande. Este icono te ayuda a identificar rápidamente el progreso de tus experimentos. Si está en rojo, o bien no hay datos suficientes o ninguna alternativa es mejor que las demás. Si está en amarillo y tiene un reloj encima, hay un posible ganador, pero no podemos estar muy seguros de ello; si está en azul (con una medalla), tenemos a un claro ganador.
    • Ratio de conversión de la versión original. Qué tan bien está funcionando la versión original del elemento bajo test. Esto te da una idea del ratio de conversión actual.
    • Ratio de conversión de la mejor alternativa. El porcentaje de veces en que los visitantes han visitado la página objetivo después de haber visto la mejor alternativa* (sin contar la versión original).
  2. Una cronología con el ratio de conversiones de la versión original y todas las alternativas, así como el número total de conversiones y visitas a página del experimento.
  3. Algunos metadatos sobre tu experimento. En concreto, puedes ver el nombre y la descripción del experimento, cuánto tiempo ha estado en marcha y el modo de finalización (si hubiera alguno).
  4. Finalmente, tienes dos gráficos adicionales que muestran los ratios de conversión de cada alternativa y su mejora respecto a la original.

* La mejor alternativa es aquella que tiene un mayor ratio de conversión.

Detalles de las alternativas de un experimento

La segunda pestaña contiene información sobre las Alternativas de tu experimento. Aquí encontrarás la versión original de tu test y todas las variaciones que hayas creado. Para cada una de ellas tienes:

  1. Una captura de la alternativa (si está disponible), para que sepas qué pinta tiene.
  2. Información (tanto visual como textual) sobre las conversiones, visitas a página y ratios de conversión de cada alternativa.
  3. Un conjunto de botones de acción:
    • Ver contenido. Abre una previsualización de la alternativa seleccionada.
    • Ver heatmap. Te permite ver el heatmap y el clickmap de la página bajo test.
    • Editar. Se muestra cuando el experimento está activo, permitiéndote modificar la alternativa.
    • Aplicar. Sustituye al enlace de Editar cuando el experimento ya ha acabado. Te permite sobrescribir la página original con los contenidos de la ganadora.

Objetivos y acciones de conversión

La última pestaña contiene información sobre las Acciones de conversión del objetivo seleccionado en este momento. Puedes cambiar dicho objetivo usando el icono de una diana de la esquina superior derecha, junto al lado del botón Detener.

Para cada objetivo puedes ver qué el conjunto de acciones que contribuyen a alcanzarlo, organizadas según su tipo.

Echa un vistazo a nuestra página de analíticas para tener más información sobre las acciones y los objetivos de conversión.

¿Sigues sin ser un suscriptor?

¡Echa un vistazo a nuestros planes!

El mejor plugin de test A/B para WordPress