Come configurare i test A/B utilizzando Microsoft Clarity e GA4

In qualità di marketer, vuoi migliorare le prestazioni del tuo sito web e generare più conversioni. In molti casi, il test A/B potrebbe essere la risposta.

Confrontando due versioni di una pagina web, puoi determinare quale è più efficace nel raggiungere i tuoi obiettivi.

In questo articolo, ti guideremo attraverso i passaggi per configurare i test A/B utilizzando Microsoft Clarity e GA4.

Microsoft Clarity è uno strumento gratuito di analisi delle mappe di calore che dispone di tutte le funzionalità di segmentazione necessarie per impostare i test A/B, soprattutto quando Google Optimize sta tramontando come marketer; hai bisogno di modi alternativi per eseguire i tuoi test.

Il modo più semplice e diretto per impostare il test A/B è impostare due versioni della pagina Web e indirizzare il traffico a ciascuna.

Utilizzando un filtro URL di Microsoft Clarity, puoi segmentare i dati e analizzarli per diverse versioni della tua pagina web.

Ma cosa succede se desideri testare diversi layout della pagina sul traffico live senza URL diversi?

Fortunatamente, Clarity ha tag personalizzati (e dimensioni personalizzate GA4), quindi puoi taggare i tuoi utenti e filtrarli nei rapporti.

Cosa sono i tag personalizzati Microsoft Clarity?

I tag personalizzati di Clarity sono etichette personalizzate alfanumeriche arbitrarie che è possibile assegnare al visitatore e utilizzare successivamente per segmentare i dati e analizzare registrazioni e mappe di calore per diversi gruppi di test.

Screenshot da Clarity, maggio 2023

Ci sono limiti ai tag personalizzati in Microsoft Clarity?

Non ci sono limiti. Puoi aggiungere tutti i tag che desideri al tuo progetto senza alcuna restrizione o limitazione.

Come taggare un visitatore utilizzando Microsoft Clarity

Tagging è semplice come eseguire un piccolo frammento di codice JavaScript:

chiarezza("insieme", "esperimento", "nome_gruppo");

Ma vorrei guidarti attraverso uno specifico esempio di vita reale di come questo può essere utilizzato dalla nostra esperienza.

In SEJ, conduciamo vari test su diversi tipi di annunci e layout di pagine web per ottenere informazioni su come il comportamento degli utenti è influenzato da fattori come il tipo di banner pubblicitario o il layout della pagina web.

Esempi di test A/B che stiamo eseguendo:

• Banner pubblicitari statici vs. banner pubblicitari animati.
• Barra laterale sinistra vs barra laterale destra.
• Modificare le etichette del menu.

L'obiettivo è capire in quale caso gli utenti scorrono più in profondità nell'articolo e quindi si impegnano nella lettura o se la modifica delle etichette del menu può aiutare a generare più clic.

1. Test A/B Banner pubblicitari statici Vs. Banner pubblicitari animati

Utilizziamo Google Ad Manager per caricare gli annunci sulla nostra pagina Web e quindi possiamo utilizzare l'API del tag publisher di Google per trasferire i valori chiave al nostro ad server.

Distribuiamo uniformemente il traffico utilizzando la funzione Math.random() in JavaScript, che restituisce 1 o 2.

Per eseguire l'esperimento, copia e incolla quanto segue.

Utilizziamo la chiave "ads_type" con valori predefiniti "static_ads" e "animated_ads" in GAM per poter eseguire rapporti di annunci anche sul lato GAM, come il CTR per ciascun gruppo.

Screenshot da Google Ad Manager, maggio 2023

Quindi, nella sezione della tua pagina web, copia e incolla il codice JS oppure puoi utilizzare il tag HTML personalizzato GTM su ogni visualizzazione di pagina in cui sono presenti annunci.

Quando si attiva l'evento "DOMContentLoaded", di solito vengono caricati il ​​tag publisher e Clarity. In caso contrario, potresti considerare di avvolgere JS all'interno di una funzione setTimeout() con un piccolo ritardo.

Con la chiave ads_type in GAM, è possibile configurare diversi tipi di banner da offrire a ciascun gruppo. Poiché la chiave è impostata come valore di tag per la chiave "esperimento" in Clarity, possiamo analizzare i dati per ciascun gruppo ed eseguire i report.

Screenshot da Clarity, maggio 2023

Se hai bisogno di una configurazione specifica che richieda una codifica avanzata, puoi provare a utilizzare ChatGPT per scrivere un codice per te.

Se desideri monitorare come cambiano i tassi di conversione degli utenti in GA4, puoi aggiungere una dimensione personalizzata con la chiave "esperimento" in GA4 e compilarla quando il tag di configurazione viene caricato utilizzando il metodo datalayer.push.

dataLayer.push({ 'esperimento': nome_gruppo });

In alternativa, puoi utilizzare la variabile JavaScript GTM per ottenere il valore della variabile globale window.group_name che abbiamo impostato sopra come parametro di test.

Screenshot da GA4, maggio 2023

E nel tag di configurazione, imposta una dimensione personalizzata per trasferire il valore della variabile come mostrato di seguito:

Screenshot da GA4, maggio 2023

Compila la dimensione personalizzata "esperimento" dalla variabile JS globale window.group_name e voilà!

Ora la dimensione personalizzata dell'esperimento viene trasferita a GA4 e puoi filtrare i rapporti utilizzando la dimensione personalizzata "esperimento".

(Suggerimento rapido: quando assegni un nome alle tue dimensioni personalizzate, assicurati di non utilizzare nessuno dei nomi dei parametri riservati per farlo funzionare correttamente.)

2. Barra laterale sinistra vs. Barra laterale destra

Il principio è lo stesso. Usa la funzione Math.random() in JavaScript per dividere il test.

In questo caso, stiamo manipolando DOM per modificare il layout.

Nel tuo caso specifico, potrebbe essere necessario applicare CSS diversi per le regolazioni del layout. Puoi utilizzare ChatGPT come uno strumento utile per aiutarti con la tua codifica personalizzata.

Dopo un certo periodo di tempo, quando disponi di dati di esempio sufficienti per il test suddiviso, puoi utilizzare il filtro tag di Microsoft Clarity "experiment=main_content_left" o "experiment=main_content_right" per segmentare i dati.

3. Etichette del menu Test A/B

Ancora una volta utilizzeremo la funzione Math.random() e manipoleremo il DOM tramite JavaScript.

Vogliamo testare l'etichetta del menu "Ultimi" rispetto a "Notizie" nella barra di navigazione del nostro sito web.

Per questo, prendiamo il percorso JS usando il browser DevTools come mostrato di seguito.

Screenshot da DevTools, maggio 2023

Useremo il percorso JS per accedere agli elementi nel DOM e cambiare l'etichetta.

Per aggiungere il tuo codice, puoi inserirlo nella sezione della tua pagina web o utilizzare GTM, come spiegato in precedenza.

Tieni presente che se esegui il monitoraggio con GA4, dovrai utilizzare anche una dimensione personalizzata.

Per generare rapporti in GA4 devi utilizzare "Explorer Reports" e filtrare la tua metrica in base alla dimensione personalizzata "esperimento".

Conclusione

L'acquisto di strumenti di test A/B può essere costoso e potrebbe non offrire sempre le funzionalità specifiche di cui hai bisogno per i tuoi obiettivi.

Ad esempio, nessuno degli strumenti di test A/B che abbiamo provato potrebbe fornire un'interfaccia intuitiva per testare diversi tipi di annunci senza codifica personalizzata.

Tuttavia, i metodi qui descritti potrebbero richiedere qualche sforzo per apprendere la codifica personalizzata.

Con ChatGPT disponibile per aiutarti a scrivere codice, tuttavia, il processo non dovrebbe essere troppo difficile.

Altre risorse:

Immagine di presentazione: Burdun Iliya/Shutterstock