Cómo configurar pruebas A/B con Microsoft Clarity y GA4

Como especialista en marketing, desea mejorar el rendimiento de su sitio web y generar más conversiones. En muchos casos, las pruebas A/B podrían ser la respuesta.

Al comparar dos versiones de una página web, puede determinar cuál es más eficaz para lograr sus objetivos.

En este artículo, lo guiaremos a través de los pasos para configurar las pruebas A/B con Microsoft Clarity y GA4.

Microsoft Clarity es una herramienta gratuita de análisis de mapas de calor que tiene todas las funciones de segmentación necesarias para configurar pruebas A/B, especialmente cuando Google Optimize expira como comercializador; necesita otras formas de ejecutar sus pruebas.

La forma mejor y más fácil de configurar las pruebas A/B es configurar dos versiones de la página web y dirigir el tráfico a cada una.

Mediante el uso de un filtro de URL de Microsoft Clarity, puede segmentar datos y analizarlos para diferentes versiones de su página web.

Pero, ¿qué sucede si desea probar diferentes diseños de la página de tráfico en vivo sin diferentes URL?

Afortunadamente, Clarity tiene etiquetas personalizadas (y dimensiones personalizadas de GA4), por lo que puede etiquetar a sus usuarios y filtrarlos en los informes.

¿Qué son las etiquetas personalizadas de Microsoft Clarity?

Las etiquetas personalizadas de Clarity son etiquetas personalizadas alfanuméricas arbitrarias que puede asignar al visitante y usar más tarde para segmentar datos y analizar grabaciones y mapas de calor para diferentes grupos de prueba.

¿Existen límites para las etiquetas personalizadas en Microsoft Clarity?

No hay límites. Puede agregar tantas etiquetas como desee a su proyecto sin ninguna restricción o limitación.

Cómo etiquetar a un visitante usando Microsoft Clarity

El marcado es tan simple como ejecutar un pequeño fragmento de código JavaScript:

clarity("set", "experiment", "group_name");

Pero me gustaría guiarlo a través de un ejemplo específico de la vida real de cómo se puede usar a partir de nuestra experiencia.

En SEJ, realizamos varias pruebas en diferentes tipos de anuncios y diseños web para comprender mejor cómo el comportamiento del usuario se ve influenciado por factores como el tipo de anuncio publicitario o el diseño web.

Ejemplos de pruebas A/B que realizamos:

• Anuncios de banner estáticos frente a anuncios de banner animados.
• Barra lateral izquierda versus barra lateral derecha.
• Edición de etiquetas de menú.

El objetivo es comprender cuándo los usuarios se desplazan más profundamente en el artículo y, por lo tanto, participan en la lectura, o si cambiar las etiquetas del menú puede ayudar a generar más clics.

1. Banners estáticos de prueba A/B versus anuncios de banner animados

Usamos Google Ad Manager para cargar anuncios en nuestra página web, por lo que podemos usar la API de etiquetas de editor de Google para pasar valores clave a nuestro servidor de anuncios.

Distribuimos el tráfico de manera uniforme usando la función Math.random() en JavaScript, que devuelve 1 o 2.

Para ejecutar el experimento, copie y pegue lo siguiente.

Usamos la clave «ads_type» con los valores predefinidos «static_ads» y «animated_ads» en GAM para que también podamos generar informes de anuncios en el lado de GAM, como el CTR para cada grupo.

Luego en la sección de su página web, copie y pegue el código JS, o puede usar la etiqueta HTML personalizada GTM en cada vista de página donde tenga anuncios.

<script>
   window.group_name = "animated_ads";
   let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2
   if( randomNumber == 2 ){
      group_name = "static_ads";
   }   
document.addEventListener('DOMContentLoaded', function() {   
   //make sure publisher tag has loaded   
   if( typeof googletag != 'undefined' ){   
      googletag.pubads().setTargeting("ads_type", group_name );
   }
   //check if clarity has loaded and set tag "experiment" with values "static_ads" or "animated_ads"
   if( typeof window.clarity != 'undefined' ){
      window.clarity("set", "experiment", window.group_name );
   }
});
</script>

Cuando se activa el evento «DOMContentLoaded», la etiqueta del editor y la claridad generalmente se cargan. Alternativamente, puede considerar envolver JS en una función setTimeout() con un pequeño retraso.

Con la clave ads_type en GAM, es posible configurar diferentes tipos de banners para ser emitidos a cada grupo. Dado que hemos configurado esta clave como un valor de etiqueta para la clave «experimental» en Clarity, podemos analizar los datos de cada grupo y ejecutar sus informes.

Si necesita una configuración específica que requiere codificación avanzada, puede intentar usar ChatGPT para escribir un código para usted.

Si desea realizar un seguimiento de cómo cambian las tasas de conversión de los usuarios en GA4, puede agregar una dimensión personalizada con la clave «prueba» en GA4 y completarla al cargar la etiqueta de configuración mediante el método de capa de datos.

dataLayer.push({ 'experiment': group_name });

Alternativamente, puede usar GTM Variable de JavaScript para obtener el valor de la variable global window.group_name que configuramos anteriormente como parámetro de prueba.

Y en la etiqueta de configuración, configure una dimensión personalizada para pasar este valor variable como se muestra a continuación:

Rellene la dimensión personalizada «experiencia» de la variable JS global window.group_name, ¡y listo!

Su dimensión personalizada de prueba ahora se transfiere a GA4 y puede filtrar los informes mediante la dimensión personalizada de «prueba».

(Sugerencia: al nombrar sus dimensiones personalizadas, asegúrese de no usar nombres de parámetros reservados para que funcionen correctamente).

2. Barra lateral izquierda vs. Barra lateral derecha

El principio es el mismo. Use la función Math.random() en JavaScript para dividir la prueba.

<style>
/*when adding this class to the content div it swaps sidebar position */
.main_content_right{
flex-direction: row-reverse;
}
</style>
<script>
   // since we have no any css under .main_content_left class it will do nothing i.e. sidebar will be the default right;   
   window.group_name = "main_content_left" 
   let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2. 
   //let randomNumber = Math.floor(Math.random() * 5) + 1; // random number from 1-5. use this if you want to run test on the sample of your traffic e.g. on the 25%.
   if( randomNumber == 2 ){
      group_name = "main_content_right" // we will use group_name as a class name and a custom tag at the same time;
   }
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener   
if (document.readyState === 'complete') {
     move_sidebar( group_name )      
   } else {
   // DOMContentLoaded event has not yet fired
   document.addEventListener('DOMContentLoaded', function() {
       move_sidebar( group_name );
   });
   }
function move_sidebar( class_name ){   
   document.querySelector('.sej-sect>div').classList.add(class_name);// add class 
   //check if clarity has loaded and set tag "experiment" with values "right_sidebar" or "left_sidebar"
   if( typeof window.clarity != 'undefined' ){
      window.clarity("set", "experiment", class_name );
   }
   console.log('sidebar position', class_name );
}
</script>

En este caso, estamos manipulando DOM para cambiar el diseño.

En su caso específico, es posible que deba aplicar diferentes CSS para los ajustes de diseño. Puede usar ChatGPT como una herramienta útil para ayudarlo con su codificación personalizada.

Después de un tiempo, cuando tenga suficientes datos de muestra para sus pruebas divididas, puede usar el filtro de etiquetas Microsoft Clarity «experiment=main_content_left» o «experiment=main_content_right» para segmentar sus datos.

3. Etiquetas de menú de prueba A/B

Nuevamente, usaremos la función Math.random() y manipularemos DOM a través de JavaScript.

Queremos probar la etiqueta del menú «Últimas» contra «Noticias» en la barra de navegación de nuestro sitio web.

Para esto, obtengamos la ruta JS usando el navegador DevTools como se muestra a continuación.

Usaremos la ruta JS para acceder a los elementos DOM y modificar la etiqueta.

<script>
   //We want to test the menu label for the Latest section in our website's navigation bar
   window.group_name = "Latest" 
   let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2. 
   //let randomNumber = Math.floor(Math.random() * 5) + 1; // random number from 1-5. use this if you want to run test on the sample of your traffic e.g. on the 25%.
   if( randomNumber == 2 ){
      group_name = "News" // we will use group_name as a label and a custom tag at the same time;
   }
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener   
if (document.readyState === 'complete') {
     change_label( menu_label )      
   } else {
   // DOMContentLoaded event has not yet fired
   document.addEventListener('DOMContentLoaded', function() {
       change_label( menu_label );
   });
   }
function change_label( menu_label ){   
   document.querySelector("#main-navigation > li:nth-child(1) > a").textContent=menu_label;//set label, in your case it will be different
   //check if clarity has loaded and set tag "experiment" with values "right_sidebar" or "left_sidebar"
   if( typeof window.clarity != 'undefined' ){
      window.clarity("set", "experiment", menu_label );
   }
   console.log('menu label', menu_label );
}
</script>

Para agregar su código, puede insertarlo en la sección de su página Web, o utilizar GTM, como se explicó anteriormente.

Tenga en cuenta que si realiza el seguimiento con GA4, también deberá utilizar una dimensión personalizada.

Para extraer informes en GA4, debe usar «Explorer Reports» y filtrar su métrica por dimensión personalizada de «experiencia».

Conclusión

Comprar herramientas de prueba A/B puede ser costoso y no siempre ofrecen las funciones específicas que necesita para lograr sus objetivos.

Por ejemplo, ninguna de las herramientas de prueba A/B que probamos pudo proporcionar una interfaz fácil de usar para probar diferentes tipos de anuncios sin codificación personalizada.

Sin embargo, los métodos descritos aquí pueden requerir un poco de esfuerzo para aprender a codificar a la medida.

Con ChatGPT disponible para ayudarlo a escribir código, el proceso no debería ser demasiado difícil.

Más recursos:

---

Imagen destacada: Burdun Iliya/Shutterstock