Después de crear un sitio web, de implementar diferentes herramientas de de análisis (Tag Manager, herramienta de analítica y herramientas de grabación de sesiones, sin olvidar de la gestión de los consentimientos), llega el momento de pasar a la acción, de activar los datos para conseguir cambios en tu proyecto.
Para eso sirven las herramientas de test A/B y personalización.
Imagina que ya tienes una página web, en la que has recogido y analizado muchos datos. Has extraído conclusiones y tienes una idea clara de cómo mejorar tu página, eliminando fricciones o corrigiendo errores de diseño. Antes de hacer cambios, es fundamental realizar pruebas. Basándose en los datos, podrás tomar decisiones informadas en lugar de guiarte por intuiciones. Para eso sirven estas herramientas. Te permiten probar tus ideas, tus hipótesis y decidir, con datos en mano, si la propuesta es mejor que la original.
Para eso sirven las herramientas de test A/B y personalización.
Imagina que ya tienes una página web, en la que has recogido y analizado muchos datos. Has extraído conclusiones y tienes una idea clara de cómo mejorar tu página, eliminando fricciones o corrigiendo errores de diseño. Antes de hacer cambios, es fundamental realizar pruebas. Basándose en los datos, podrás tomar decisiones informadas en lugar de guiarte por intuiciones. Para eso sirven estas herramientas. Te permiten probar tus ideas, tus hipótesis y decidir, con datos en mano, si la propuesta es mejor que la original.
Índice:
- Métodos para implementar una herramienta de A/B Testing
- ¿Cómo implementar una herramienta de A/B Testing?
Métodos para implementar una herramienta de A/B Testing
Como siempre hay varias opciones para la implementación. Hay que tener en cuenta una serie de conceptos que son más técnicos.
Existen dos formas principales de implementar herramientas de test A/B: directamente en el código de la página o utilizando un gestor de etiquetas como Google Tag Manager.
Implementación por servidor: en este caso, tendremos que colocar el código lo más arriba posible en el <head> de la página, para que la herramienta tome el control de la página lo antes posible.
De esta forma evitamos efectos indeseados en la experiencia del usuario, como puede ser el caso del ‘flickering’, un parpadeo en la página que se produce al pintar la página normal y recargar sobre ella, en muy pocos milisegundos, la versión con el test.
Esta opción puede resultar adecuada desde el punto de vista del usuario, pero hay que tener en cuenta que, para personalizar una página, tenemos que contar con el consentimiento del usuario. Por lo que siempre va a actuar después de la herramienta de consentimientos y, sí también hemos implementado esta herramienta por servidor, como es la forma más correcta, todo el manejo tiene que ser por código. Es una solución más compleja técnicamente.
Implementación con Google Tag Manager: Si nos decantamos por la opción de la implementación por Tag Manager, la complejidad técnica se reduce enormemente, sin embargo, el ‘flickering’ va a estar presente y puede generar dudas en el usuario de tu página. Se puede reducir este efecto con varias técnicas, como hacer que se ejecute de manera síncrona (antes que el resto del código de la página pero esto tiene riesgos) o con otras técnicas menos elegantes.
¿Por qué Google Tag Manager? Al seguir la filosofía de este curso de ofrecer soluciones accesibles, hemos elegido Google Tag Manager por su facilidad de uso y versatilidad.
Existen dos formas principales de implementar herramientas de test A/B: directamente en el código de la página o utilizando un gestor de etiquetas como Google Tag Manager.
Implementación por servidor: en este caso, tendremos que colocar el código lo más arriba posible en el <head> de la página, para que la herramienta tome el control de la página lo antes posible.
De esta forma evitamos efectos indeseados en la experiencia del usuario, como puede ser el caso del ‘flickering’, un parpadeo en la página que se produce al pintar la página normal y recargar sobre ella, en muy pocos milisegundos, la versión con el test.
Esta opción puede resultar adecuada desde el punto de vista del usuario, pero hay que tener en cuenta que, para personalizar una página, tenemos que contar con el consentimiento del usuario. Por lo que siempre va a actuar después de la herramienta de consentimientos y, sí también hemos implementado esta herramienta por servidor, como es la forma más correcta, todo el manejo tiene que ser por código. Es una solución más compleja técnicamente.
Implementación con Google Tag Manager: Si nos decantamos por la opción de la implementación por Tag Manager, la complejidad técnica se reduce enormemente, sin embargo, el ‘flickering’ va a estar presente y puede generar dudas en el usuario de tu página. Se puede reducir este efecto con varias técnicas, como hacer que se ejecute de manera síncrona (antes que el resto del código de la página pero esto tiene riesgos) o con otras técnicas menos elegantes.
¿Por qué Google Tag Manager? Al seguir la filosofía de este curso de ofrecer soluciones accesibles, hemos elegido Google Tag Manager por su facilidad de uso y versatilidad.
Hasta hace poco, Google Optimize era una excelente opción gratuita para iniciarse en las pruebas A/B. Sin embargo, no está disponible desde septiembre de 2023.
Actualmente, existe una amplia variedad de herramientas en el mercado. Puedes consultar una comparación detallada en: futuro artículo.
Por qué VWO: Para este curso, hemos seleccionado VWO debido a su versión gratuita, que nos permitirá explorar las funcionalidades básicas de las pruebas A/B. Además, VWO se destaca por su interfaz intuitiva y su amplia gama de características, como la segmentación de usuarios y la personalización de experiencias. Aunque existen otras opciones sólidas como ABTasty, Optimizely y Convert, VWO ofrece una buena relación calidad-precio para aquellos que se inician en el mundo de las pruebas A/B.
La integración no es la más sencilla del mundo y requiere bastantes pasos, pero si seguimos cada uno de ellos en orden, sin prisa y tal como se indica, tendrás la herramienta preparada en unos pocos minutos:
Actualmente, existe una amplia variedad de herramientas en el mercado. Puedes consultar una comparación detallada en: futuro artículo.
Por qué VWO: Para este curso, hemos seleccionado VWO debido a su versión gratuita, que nos permitirá explorar las funcionalidades básicas de las pruebas A/B. Además, VWO se destaca por su interfaz intuitiva y su amplia gama de características, como la segmentación de usuarios y la personalización de experiencias. Aunque existen otras opciones sólidas como ABTasty, Optimizely y Convert, VWO ofrece una buena relación calidad-precio para aquellos que se inician en el mundo de las pruebas A/B.
La integración no es la más sencilla del mundo y requiere bastantes pasos, pero si seguimos cada uno de ellos en orden, sin prisa y tal como se indica, tendrás la herramienta preparada en unos pocos minutos:
Estamos creando cuatro variables en Google Tag Manager (GTM) para identificar de forma única cada campaña y variante dentro de una prueba A/B. Estas variables nos permitirán rastrear el rendimiento de cada variante y tomar decisiones basadas en datos.
Para hacerlo sigue estos pasos :
Para hacerlo sigue estos pasos :
- Acceder a la sección de Variables:
- En tu cuenta de GTM, ve a la sección de "Variables".
- Haz clic en "Nueva".
- Configurar la primera variable (VWO - CampaignId):
- Nombre: Escribe "VWO - CampaignId". Este nombre te ayudará a identificar fácilmente la variable más adelante.
- Tipo de variable: Selecciona "Constante".
- Nombre de variable de capa de datos: Escribe "CampaignId". Este es el nombre que utilizaremos para hacer referencia a esta variable en nuestras etiquetas y reglas.
- Versión de la capa de datos: Selecciona "Versión 2". Esto asegura que los datos se envíen correctamente a Google Analytics 4 (GA4).
- Valor predefinido: Establece un valor de 0. Este valor se utilizará si no se encuentra un valor en la capa de datos, y permite inicializar todo el proceso, lo que nos permite realizar un seguimiento incluso en casos donde no hayamos podido identificar la campaña.
crear variables de data layer
3. Repetir el proceso para las otras variables:
Crea tres variables más con los siguientes nombres y valores de capa de datos:
Crea tres variables más con los siguientes nombres y valores de capa de datos:
- "VWO - CampaignName" con "CampaignName" en la capa de datos
- "VWO - VariationId" con "VariationId" en la capa de datos
- "VWO - VariationName" con "VariationName" en la capa de datos
Estamos configurando dos activadores en Google Tag Manager (GTM) para controlar cuándo se carga el código de VWO y para recopilar información sobre los tests que se están ejecutando.
Primer activador: "VWO Genérico"
Primer activador: "VWO Genérico"
- Este activador se encargará de cargar el código de VWO de forma general, siempre y cuando se cumpla una determinada condición.
- Accedemos a Google Tag Manager, pinchamos en activadores y creamos nuevo activador.
- Le damos un nombre al trigger, en este caso, le he puesto “VWO Genérico”.
- En el tipo de evento buscamos: evento personalizado o custom event.
- El nombre del evento que elegimos será ‘VWO’, que es el nombre de evento que se manda al dataLayer de GTM.
- Seleccionamos que el evento se active en ‘Algunos eventos personalizados’ que será cuando se cumpla la condición de que la variable ‘VWO - CampaignId’ tenga valor 0. Que es el valor que le hemos dado por defecto en el paso anterior.
- Esto nos permite cargar el código de VWO en todas las páginas, incluso si no tenemos información específica sobre la campaña o la variante. Las personalizaciones y test AB que queramos hacer y tengamos ya configuradas en la herramienta, empezarán a funcionar.
crear trigger en GTM
Segundo activador: "VWO-Data-Push-Event-Trigger"
- Este activador nos permitirá recopilar información más detallada sobre los tests que se están ejecutando
- Le damos nombre, en este caso le he llamado “VWO-Data-Push-Event-Trigger”.
- En nombre del evento, escribimos “vwo-data-push”. Se activará cada vez que se envíe un evento personalizado llamado "vwo-data-push" a la capa de datos. Este evento suele ser enviado por el código de VWO para notificar a GTM sobre cambios en las variaciones o resultados de los tests.
- Le decimos que se active en “Todos los eventos personalizados”.
crear trigger data push en GTM
Aquí también vamos a actuar en tres fases, por un lado, el tag que inserta la herramienta. Después el que realiza la conexión don GTM y, por último, el tag que va a rellenar la información de los tests que estén funcionando en el momento en la página.
Inserción del código base de la herramienta seguimos estos pasos:
Inserción del código base de la herramienta seguimos estos pasos:
- Accede a VWO, en el menú lateral busca ‘Configurations’ y selecciona la opción “Websites and Apps”.
- Crear un nuevo sitio web: Agrega tu sitio web y copia el código generado.
- Copia el código que te proporciona.
crear tag vwo: tracking code
En GTM:
- Crea una nueva etiqueta. Seguimos la ruta Etiquetas -> Nueva
- Selecciona el tipo "HTML Personalizado".
- Pega el código de VWO en el campo de configuración.
- Configurar el consentimiento:
- Si hemos seguido el tutorial del curso al completo, habremos instalado previamente un CMP, y ahora podremos aplicar que este tag se lance cuando haya consentimiento apropiado para esta herramienta.
- Navega a "Configuración avanzada" > "Configuración de consentimiento".
- Marca la opción "La etiqueta requiere consentimiento adicional para activarse" y selecciona "personalization_storage".
- Asocia esta etiqueta al trigger "cookie_consent_update" (o al trigger de consentimiento que hayas creado previamente).
- Si hemos seguido el tutorial del curso al completo, habremos instalado previamente un CMP, y ahora podremos aplicar que este tag se lance cuando haya consentimiento apropiado para esta herramienta.
crear tag vwo: tag en GTM
Este procedimiento sirve para cualquier web, pero esta herramienta también cuenta con integraciones con otras plataformas como Wordpress, Joomla! o Drupal, que facilita este proceso.
A continuación vamos a configurar la conexión con GTM. Seguimos estos pasos:
A continuación vamos a configurar la conexión con GTM. Seguimos estos pasos:
- Accede a VWO, en el menú lateral busca ‘Configurations’ y selecciona la opción “Integrations”.
- Busca y selecciona la integración de Google Tag Manager y pincha en ‘Help’.
- Si te desplazas hasta abajo del todo encontrarás el código de configuración. Copia este código.
crear tag integración con GTM: config code
En GTM:
- Crea una nueva etiqueta. Seguimos la ruta Etiquetas -> Nueva
- Selecciona el tipo "HTML Personalizado".
- Pega el código de VWO en el campo de configuración.
- Asociar el trigger: Selecciona el trigger "VWO Genérico" que creaste previamente. Este asegurará que el código de VWO se cargue en el momento adecuado.
crear tag integración con GTM: tag en GTM
Para finalizar nos queda realizar el lanzamiento del evento que contiene la información de los experimentos creados con VWO.
En GTM:
En GTM:
- Crear una nueva etiqueta:
- Selecciona "Google Analytics: evento de GA4".
- Elige la variable correspondiente a tu ID de GA4.
- Nombre del evento: "VWO_Data_Push" (o un nombre más descriptivo que refleje el propósito del evento).
- Parámetros del evento:
- Nombre: Utiliza los nombres de las variables que creaste en el punto 1 (por ejemplo, "CampaignId", "VariationId", "VariationName").
- Valor: Selecciona las variables correspondientes de GTM.
- Asociar el trigger:
- Selecciona el trigger "VWO-Data-Push-Event-Trigger".
crear tag evento de GA4
¿Qué hace este tag?:
- Evento personalizado en GA4: Al enviar un evento personalizado a GA4 con el nombre "VWO_Data_Push" y los parámetros correspondientes, podremos rastrear los resultados de los experimentos de VWO en nuestra propiedad de GA4.
- Parámetros del evento: Cada parámetro del evento representará una variable de VWO que queremos rastrear. Por ejemplo, el parámetro "CampaignId" tendrá como valor la variable de GTM "VWO - CampaignId".
- Trigger: El trigger "VWO-Data-Push-Event-Trigger" se activará cada vez que VWO envíe un evento "vwo-data-push" a la capa de datos. Esto asegurará que el evento personalizado se envíe a GA4 en el momento adecuado.
Con esto ya estaría finalizada la implementación de la herramienta. Solo falta publicar el ‘WorkSpace’ de GTM y comprobar que tus test están funcionando y que se está midiendo de forma correcta.
Una forma rápida y sencilla de ver si está todo bien, aparte de mirar que el test se ejecuta, es mirar la consola. En la pestaña "Consola", teclea dataLayer y busca los eventos que has creado, como "vwo-data-push" y los eventos personalizados de GA4. Si estos eventos aparecen, significa que el código de VWO se está ejecutando y los datos se están enviando correctamente. También puedes entrar en Google Analytics y verificar que los eventos personalizados de VWO están llegando y que los datos se estén mostrando correctamente en los informes.
Con estos pasos, podrás asegurarte de que la implementación de VWO en tu sitio web es correcta y que puedes aprovechar al máximo las funcionalidades de esta herramienta para mejorar la experiencia de tus usuarios y aumentar las conversiones.