Cómo añadir widgets y hacer tests A/B de ellos en WordPress 5.8

Publicada en Comunidad.

En WordPress, los widgets son contenidos que puedes añadir a las barras laterales, pies de página y otras áreas de tu sitio para añadir ciertas características o funcionalidades al sitio. Están diseñados para contener una variedad de complementos como puede ser un menú, un calendario, un formulario, la visualización de las últimas entradas, etc.

Una gran mayoría de temas de WordPress vienen con un conjunto de widgets preinstalados y listos para usar.

Widgets disponibles en el tema Tech Mag
Widgets disponibles en el tema TechMag de WordPress.

Objetivos del nuevo editor de widgets

Tras la llegada de WordPress 5.8, adicionalmente a las nuevas capacidades de edición de bloques que ya os comenté y las funcionalidades de Full Site Editing, ahora disponemos de un nuevo editor de widgets basado en bloques.

¿Qué se busca con este nuevo editor de widgets? Tal y como comentó Anne McCarthy en febrero del 2021 en WordPress.org los beneficios que se quieren conseguir con el editor de widgets son:

  • permitir a los usuarios crear diseños de barras laterales, cabeceras y pies de página con los bloques que ya conocemos,
  • poder enriquecer el diseño de los widgets de forma visual sin necesidad de ir a editores HTML,
  • tener una experiencia unificada de edición de plantillas y contenidos, sin necesidad de mantener ideas abstractas de cómo se van a visualizar los contenidos,
  • muchos de los widgets que teníamos hasta ahora que se veían como un shortcode, se verán como bloques (como por ejemplo, el caso de formularios), siendo su edición mucho más fluida e intuitiva.
  • la transición de widgets a bloques será suave para que los desarrolladores puedan sustituir los widgets por bloques, y
  • para evitar problemas de compatibilidad con versiones anteriores, los widgets se podrán editar desde la opción del menú de Apariencia » Widgets como hasta ahora.

Así, por ejemplo, con el nuevo editor de widgets puedo crear con el editor de bloques un pie de página que contenga un conjunto de bloques que antes sólo podíamos añadir en el contenido de una página o entrada.

Pie de página creado con el editor de bloques
Pie de página creado con el editor de bloques

Nuevo editor de widgets

Una vez actualizada tu web con la versión de WordPress 5.8, al acceder a la opción de menú Apariencia » Widgets primero nos aparece la pantalla de bienvenida al editor de de bloques de widgets.

Bienvenido al editor de bloques de widgets
Bienvenido al editor de bloques de widgets.

Tras pasar la guía ilustrativa del editor de widgets, nos encontramos con un nuevo editor de widgets mucho más parecido al editor de bloques que ya conocemos. ¡Adiós a la gestión de widgets que conocíamos hasta ahora!

Con este nuevo editor, cada área de widgets se ve como un desplegable (antes también era parecido) donde puedes añadir bloques de contenido.

Nuevo editor de widgets de WordPress
Nuevo editor de widgets de WordPress.

Para no perder la compatibilidad con los temas y las versiones anteriores de WordPress, los widgets que venían predefinidos con el tema pasan a ser un nuevo tipo de bloque llamado «widget heredado». De esta forma, cuando busques bloques de contenido, te aparecerán como nuevos bloques que también podrás añadir en cada área de widgets y podrás modificar sus propiedades de forma parecida a como hacías hasta ahora (pero no en las propiedades del bloque de la barra lateral, en el que sólo verás que te indica que es un «widget heredado» y su descripción).

Adicionalmente a los widgets heredados, ahora en cada una de las áreas de widgets puedes también insertar y modificar cualquier otro tipo de bloque de los que ya conocíamos:

Añadiendo bloques en una área de widgets
Añadiendo bloques en una área de widgets.

Y no sólo eso. También puedes añadir en las áreas de widgets, los nuevos bloques de temas que han llegado con esta versión de WordPress y ya te comenté en esta entrada, añadiendo así una gran versatilidad a las áreas de widgets de WordPress.

Añadiendo un bloque de tema en una área de widgets
Añadiendo un bloque de tema en una área de widgets.

Finalmente, el editor de widgets también permite que muevas bloques entre áreas de widgets distintas.

Opción de cambiar un bloque entre áreas de widgets distintas
Opción de cambiar un bloque entre áreas de widgets distintas.

Y como siempre, tras hacer los cambios pertinentes en el editor de widgets, sólo tienes que actualizar los cambios para que se reflejen en tus páginas y entradas.

Tests A/B de áreas de widgets

Las áreas de widgets, como ya he comentado al principio de esta entrada, son áreas que tienen como objetivo añadir funcionalidades a nuestra web que generalmente comportan la realización de alguna acción por parte del usuario. Si queremos conseguir incrementar el número de visitantes a nuestra web que realizan alguna acción, la mejor herramienta que tenemos a nuestro alcance para mejorar este ratio de conversión son los tests A/B.

De forma resumida y en el contexto de widgets, un test A/B de widgets consiste en, a partir de una hipótesis de mejora (por ejemplo una reordenación de los bloques de widgets dentro de una área para visualizar mejor cierta información relevante, o mostrar los bloques de widgets en distintas áreas, o cambiar radicalmente qué bloques se muestran o no en las áreas de widgets) 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

Con el nuevo editor de widgets, que nos abre un gran abanico de posibilidades en el diseño de páginas y entradas, la diversidad de tests A/B que puedes crear crece exponencialmente y, por este motivo, adquieren mucha más relevancia en la optimización de la conversión de webs.

Crear Test A/B de widgets

Podrías crear un test A/B de widgets de forma manual y conjuntamente utilizar Google Analytics para el análisis de la conversión. Pero te será mucho más fácil y barato crear test A/B de widgets con una herramienta como Nelio A/B Testing (versión premium a partir de 29€ al mes), un plugin de WordPress totalmente integrado a los distintos editores de bloques de WordPress, incluido el editor de widgets.

Una vez instalado y activado el plugin de Nelio A/B Testing, te aparecerá en el escritorio de WorPress el icono de Nelio A/B Testing con las distintas opciones con las que puedes crear y analizar tests A/B sin necesidad de utilizar ninguna herramienta externa.

Veamos, por ejemplo, cómo creamos un test de widgets para analizar el hecho de tener o no un selector de categorías en una web, y así ver si incrementa las visitas a las entradas del blog de la misma.

Los distintos pasos que debes seguir para crear el test A/B de widgets con Nelio A/B Testing son:

Selección del tipo de test que quieres crear

Nelio A/B Testing es una herramienta que te permite crear tests A/B de cualquier tipo de elemento de WordPress. Por ello, de la gran variedad de elementos entre los que seleccionar, lo primero que debes hacer es seleccionar que quieres crear un test A/B de widgets.

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

Define las variantes del test

A continuación, en la ventana de edición de un test de widgets, debemos añadirle un nombre al test para que te ayude a identificarlo en el futuro y crear las variantes a probar respecto a la versión original o de control (el diseño de áreas de widget que tienes actualmente en tu web).

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

Para crear una nueva variante, debes darle un nombre en el campo que encuentras al lado de la letra de la variante que estás creando y hacer clic en el enlace «Editar» que aparece bajo la misma. Verás que te lleva al nuevo editor de widgets que acabamos de ver.

Por defecto, la variante que creas es una copia exacta del conjunto de widgets que tienes actualmente en la web. Ahora es tan sencillo como cambiar la variante utilizando el editor tal y como he explicado anteriormente. Añade, modifica, mueve y borra los bloques que quieras en las distintas áreas de widgets y, cuando ya tengas la variante lista, haz guardar.

Editando una variante de un test de widgets
Editando una variante de un test de widgets.

Define los objetivos y acciones de conversión

Tras definir las variantes en tu test, el siguiente paso es definir el objetivo de conversión del test. ¿Con qué propósito estás creando este test? En nuestro ejemplo el propósito es conseguir más visitas a las entradas del blog. ¿Cómo lo definimos?

Vuelve a la edición del test y en el apartado de «Objetivos y acciones de conversión», puedes añadir tantos objetivos como quieras haciendo clic en el enlace +Nuevo.

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 widgets que estamos explicando definiríamos como acción de conversión visitas a la página de nuestro blog.

Definición de los objetivos y acciones de conversión de un test A/B
Definición de los objetivos y acciones de conversión de un test A/B.

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 el 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 cada variante. También podrás ver el porcentaje de mejora (o empeoramiento) de cada variante respecto a la versión original.

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. Es decir, que las áreas de widgets que hayas diseñado en tu variante ganadora se conviertan en la versión definitiva de tu web.

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

Y ya está, ahora ya tienes una nueva versión del diseño de tu web que sabes, con datos corroborados, que convierte mejor que la versión original que tenías.

Conclusión

La versión de WordPress 5.8 nos ha llegado con un gran conjunto de nuevas funcionalidades. El nuevo editor de widgets nos proporciona la opción de añadir un montón de funcionalidades a áreas de nuestra web que hasta el momento estaban limitadas a los widgets predefinidos que venían con el tema (por supuesto, también podías añadir widgets con plugins).

Este nuevo abanico de posibilidades, permite probar diseños de páginas mucho más variados que los que teníamos hasta ahora. Disponer de una herramienta como Nelio A/B Testing para crear test A/B de widgets de forma integrada en WordPress te asegura que puedas optimizar la conversión en tus páginas con datos sin necesidad de salir de tu editor de WordPress.

Imagen destacada de Striving Blogger 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.