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 pueden 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 que necesita para configurar las pruebas A/B, especialmente cuando Google Optimize desaparece como comercializador; necesita formas alternativas de ejecutar sus pruebas.

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

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

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

Por suerte, Clarity lo hizo etiquetas personalizadas (y parámetros personalizados de GA4) para que pueda etiquetar a sus usuarios y filtrarlos en sus informes.

¿Qué son las etiquetas personalizadas 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 registros y mapas de calor para diferentes conjuntos 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 restricciones ni limitaciones.

Cómo etiquetar a un visitante usando Microsoft Clarity

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

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

Pero me gustaría mostrarles un ejemplo concreto y real de cómo se puede usar esto desde nuestra experiencia.

En SEJ, realizamos varias pruebas en diferentes tipos de anuncios y diseños de páginas web para obtener información sobre cómo el comportamiento del usuario se ve influenciado por factores como el tipo de anuncio de banner o el diseño de la página web.

Ejemplos de pruebas A/B que ejecutamos:

• Anuncios de banner estáticos vs. banners publicitarios animados.
• Barra lateral izquierda vs. Barra lateral derecha.
• Cambiar etiquetas de menú.

El objetivo es comprender en qué caso los usuarios se desplazan más profundamente en el artículo y luego se involucran en la lectura o si cambiar las etiquetas del menú puede ayudar a generar más clics.

1. Pruebas estáticas vs A/B Banners publicitarios Banners publicitarios animados

Usamos Google Ad Manager para cargar anuncios en nuestra página web y luego podemos usar Etiquetas de editor de Google API 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 el documento a continuación.

Usamos la clave ‘ads_type’ con los valores predeterminados ‘static_ads’ y ‘animated_ads’ en GAM para poder informar sobre anuncios de GAM también, como CTR para cada grupo.

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

<script>
   window.group_name = "animated_ads";
   let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2
   if( randomNumber == 2 )   
document.addEventListener('DOMContentLoaded', function() );
</script>

Cuando se activa el evento «DOMContentLoaded», normalmente se cargan la etiqueta del editor y Clarity. Si no, podría considerar envolver el JS dentro de un establecerTiempo de espera() funciona con un poco de retraso.

Con la clave ads_type en GAM, puede configurar diferentes tipos de banners para ofrecer a cada grupo. Dado que esa clave se establece como el valor de la etiqueta para la clave «experimento» en Clarity, podemos analizar los datos de cada grupo y generar 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 un parámetro personalizado con la clave «experimento» en GA4 y completarlo cuando se cargue la etiqueta de configuración mediante el método datalayer.push.

dataLayer.push();

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 el valor de la variable como se muestra a continuación:

Rellene la dimensión personalizada «experimento» de la variable JS global window.group_name y listo.

Ahora, el parámetro personalizado del experimento se transfiere a GA4 y puede filtrar los informes mediante el parámetro personalizado «experimento».

(Consejo rápido: al nombrar su tamaño personalizado, asegúrese de no usar ninguno parámetro reservado nombre para que funcione 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
</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 )
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener   
if (document.readyState === 'complete')  else 
function move_sidebar( class_name )
</script>

En este caso, manipulamos el 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 el etiquetado personalizado.

Después de un tiempo, cuando tenga suficientes datos de muestra para las 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 del menú Prueba A/B

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

Queremos probar la comparación «Reciente» vs. «Noticias» en la barra de navegación de nuestro sitio.

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

Usaremos la ruta JS para acceder a los elementos en el DOM y cambiar 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 )
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener   
if (document.readyState === 'complete')  else 
function change_label( menu_label )
</script>

Para agregar el código, puede ingresarlo de su página web o use GTM como se explicó anteriormente.

Tenga en cuenta que si realiza un seguimiento con GA4, también deberá utilizar una métrica personalizada.

Para extraer informes en GA4, debe usar «Explorer Reports» y filtrar el valor por el parámetro personalizado «experimento».

Conclusión

La compra de herramientas de prueba A/B puede ser costosa y es posible que no siempre brinde la funcionalidad específica que necesita para 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 codificar, el proceso no debería ser demasiado difícil.

Otros recursos:

---

Imagen destacada: Burdun Iliya/Shutterstock