Che cos'è e come fare A/B Testing con Google Tag Manager?

Dopo averti detto perchè e quando usare il Tag Manager, oggi ti spiego come creare dei semplici A/B Testing con questo strumento di Google.

Cos'è un A/B Testing?

È un esperimento controllato con due varianti della stessa pagina internet create allo scopo di verificare quella che risulta più gradevole all'utente e lo invoglia ad effettuare l'azione desiderata.

Strumenti per l'A/B Testing

Ci sono molti strumenti free o a pagamento per fare questi esperimenti:

• Google Optimizer;
• Hubspot, Unbouce;
• Visual Web Optimizer.

Queste applicazioni web, a volte, sembrano molto semplici da usare e sono utili quando le variazioni risultano così complesse da aver bisogno di uno strumento visuale per non creare “danni”. Spesso, invece, gli A/B Test sono semplici variazioni sul tema: per esempio il cambio del colore di una Call to Action (CTA) o un elemento della pagina da rendere più visibile ed evidente. Per fare questo, possiamo utilizzare Google Tag Manager.

Come utilizzare Tag Manager per l'A/B Testing

Per fare un esempio, ho preso una Landing page di Site by Site e ho provato a cambiare il colore del pulsante che manda il contatto in modo da renderlo più evidente.

Per cambiare il colore del pulsante ho utilizzato la Console del Developer Tools di Google Chrome, che permette di cambiarne il colore senza rendere la modifica pubblica.

L'istruzione che ho inserito è stata questa:

document.getElementById("submit").style.background="green"

Si tratta di un semplice comando Javascript che ha permesso di cambiare il colore di sfondo dell'elemento della pagina che contiene l'identificativo “submit”.
Quando ho deciso che il risultato ottenuto mi soddisfaceva, ho impostato su Google Tag Manager il pannello in modo da effettuare l'A/B Test in questo modo:

In GTM ho attivato la variabile intelligente Numero Casuale.

Sempre in GTM, ho creato un nuovo Tag Html Personalizzato scrivendo questo codice e poi incollando il codice contenuto in questa url

https://raw.githubusercontent.com/thenextweb/cro/master/ab_testing.js

In questo file sono contenute delle istruzioni di base che permettono di:

• settare un Cookie, cioè un piccolo dato, e la sua scadenza nel browser che sta visitando la pagina;
• leggere questo dato se già esiste;
• creare una variabile da far interpretare a Google Tag Manager a seconda se il Cookie ha assunto un valore o meno;

Dobbiamo personalizzare però queste istruzioni in modo che il pulsante diventi verde, nel nostro caso, al verificarsi della condizione Cookie = 1.
Attenzione! È necessario che queste operazioni siano portate a termine da un professionista in modo da evitare di commettere errori grossolani che potrebbero compromettere il funzionamento dell'intera pagina web; a volte è sufficiente un “;” in più o in meno per creare un errore a cascata e bloccare il corretto comportamento di una applicazione web.

Ho cambiato il valore della variabile prefisso personalizzandolo in 'sbs'. Poi ho cancellato tutte le varianti che non ho usato, popolandola con le istruzioni che abbiamo scoperto poco prima con la Console del Developer Tools di Google Chrome.

Nel caso specifico, stiamo lavorando su una Landing Page e non abbiamo altre pagine come attivatore: per questo, ho scelto di settare All Pages (in altri casi, si possono scegliere pagine in cui attivare il Tag o decidere di farlo attivare all'esecuzione di certe azioni). Un strategia come questa deve essere condotta da uno Specialista che conosce bene la struttura del sito o della Landing Page su cui interviene.

Dalla tab Application del Developer Tools di Chrome, in cui, tra le altre cose, si possono esaminare i cookie. Come puoi notare, se alla prima versione della Landing Page (colore bottone CTA del nostro colore) cookie chiamato sbs-cookie è a 0 anche il pulsante “Contattaci” rimane invariato.

Se, invece, nel browser si setta il cookie a 1, il colore del pulsante cambia.
In questo modo, in modo del tutto casuale, un visitatore vedrà il pulsante arancione e un altro visitatore il pulsante verde. Quale colore permetterà alla nostra landing di convertire in maniera migliore?

Settiamo Tag Manager, in modo da inviare i dati a Google Analytics per poterli misurare e successivamente analizzare. Quando un navigatore accede alla pagina e il relativo valore del Cookie.
Come faccio a riconoscere quando un navigatore attiva una situazione o l'altra?

Primo passo è creare un evento Google Analytics che, durante la visita, monitori il valore del Cookie di volta in volta e indichi se lo stesso è a 0 o a 1.

Per fare questo ho settato una nuova variabile Data layer (Variabile di livello di dati) in Tag Manager e la setto col nome eventAction.

Come faccio a sapere che la variabile si chiama eventAction?

Controllando la variabile di livello di dati nella pagina desiderata, attraverso l'anteprima di Google Tag Manager, riesco a riconoscere qual è il nome di quella porzione di data layer che contiene il valore del Cookie in quel momento. Nel mio caso il suo nome è “eventAction”, nella schermata qui evidenziata.

Questa nuova variabile settata nel Tag Manager mi servirà tra poco, quando andrò a dichiarare il nuovo Evento di Google Analytics. Questo evento verrà popolato con il valore di questa variabile. Vediamo come:
Creo un nuovo Tag Google Analytics Event e gli do il nome di abTest.

Setto l'azione con la variabile Tag Manager appena creata e imposto l'attivatore che sarà un evento personalizzato che si chiama “abTest”.
Come faccio a sapere che l'evento personalizzato si chiama proprio così?

Con Google Tag Manager posso vedere come si chiama l'evento personalizzato. A questo punto posso inviare il tutto per la pubblicazione del Tag sul Tag Manager.

Per avere delle statistiche su cui lavorare bisogna poi visitare la Landing Page avendo cura di svuotare i Cookie ad ogni visita per avere qualche campione sia col caso del tasto giallo sia col tasto verde.

Poi si accede a Google Analytics

E nella sezione In Tempo Reale, nella sottosezione Eventi si possono vedere le visite che sono state effettuate e in quale versione erano, se col tasto Giallo (sbs-0-0) o col tasto di invio Verde (sbs-1-1).

Ora il nostro obiettivo è riuscire a conoscere quale versione della Landing Page converte meglio.
Per fare questo è necessario creare, nella sezione Personalizzazione, un rapporto Personalizzato che possa collegare quale colore ha suscitato più interesse e quindi ha convertito di più.
Bisogna, quindi, collegare i dati statistici collegati alla dimensione Azione Evento alle metriche Eventi unici e Completamento obiettivo come si può vedere in questa schermata:

Le statistiche, in questo momento, non ci sono ancora perchè serve del tempo per elaborarle (circa 2/3 ore) e rilasciarle nei rapporti. Quando questo rapporto si popolerà, attraverso il grafico capiremo la strategia che ha funzionato meglio e quale ha assicurato le migliori performace.

Tu conosci il motivo per cui le tue pagine non convertono?