Test A/B in Google Analytics con monitoraggio degli eventi

di Rostyslav Mykhajliw Fondatore di TrueSocialMetrics.com ~ 8 min

Come sai, per impostazione predefinita, la funzione degli esperimenti di Google Analytics funziona solo con pagine separate e funziona bene quando inizi una campagna pubblicitaria. Quindi puoi controllare l'URL di destinazione. Ma cosa fare se non controlli le tue fonti di traffico: ricerca, referral, post sui social media. Questo è il problema principale. Ma abbiamo una soluzione semplice per questo. La soluzione richiede:

• jquery
• jquery.cookie

Iniziamo a testare

/ pagina indice contiene un'immagine per impostazione predefinita, ma vogliamo sostituirla con un video per il 50% dei visitatori e misurare la percentuale di iscrizione per ciascun caso. Ho creato un semplice js per i test A/B con il salvataggio dell'allocazione nei cookie.

funzione allocazione(nome, celle) {
    cella = $.cookie('ab-testing-' + nome);
    if (cella) restituisce cella;
    // allocare
    rand = Matematica.casuale();
    if (rand<0.5) {
        cella = celle[0];
    } altro {
        cella = celle[1];
    }
    $.cookie('ab-testing-' + nome, cella, { scadenza: 90, percorso: '/' });
    cella di ritorno;
}

Questo codice alloca il 50% degli utenti per testare la cella in modo casuale e salva l'allocazione nel cookie e restituisce il nome della cella di allocazione. Il primo parametro è il "nome del test", il secondo è l'elenco dei nomi delle celle

Caso d'uso:

allocation('ImageVsVideo', ['Image', 'Video']); // Immagine o video

Per sostituire l'immagine sulla pagina con il video nel 50% dei casi dobbiamo aggiungere un identificatore univoco all'elemento. L'ho chiamato: ab-testing-ImageVsVideo.

Fantastico, siamo pronti per sostituire la logica. Ho caricato il video su vimeo.com come risultato, dopo la conversione ho ottenuto il seguente codice di esportazione

<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>

Ho preferito il codice html5 (ma se vuoi puoi sempre fare un passo indietro e utilizzare l'oggetto flash legacy).

La nostra logica è semplice: se il nome della cella è uguale a "Video", aggiorna l'id dell'elemento "ab-testing-ImageVsVideo" con il codice html del player specificato.

$(funzione(){
    cell = allocation('ImageVsVideo', ['Image', 'Video']);
    if (cella=='Video') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Tutto funziona bene, ma non abbiamo tracciato i nostri obiettivi. Come facciamo a sapere quale variante del test vince?

Google Analytics offre un'ottima funzionalità chiamata Event Tracking. Viene utilizzato principalmente per tracciare l'azione dell'utente sulla pagina come la pressione del pulsante o il tracciamento dell'azione Ajax. Ma lo useremo per tenere traccia dell'allocazione delle celle del nostro test. Ci sono 2 argomenti obbligatori: Categoria e Azione, nel nostro caso categoria "AB-Testing" per tutti i test a/b e l'azione "ImageVsVideo-Image" (o ImageVsVideo-Video) come identificatore. Script funzionante per la nostra pagina.

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + allocation('ImageVsVideo', ['Image', 'Video'])]);

Puoi trovare un esempio nel codice sorgente della pagina di destinazione, ho anche inserito la funzione di allocazione nel file ab-testing.js per un facile utilizzo.

I rapporti di Google Analytics sono il passaggio successivo

Il nostro obiettivo originale era aumentare la "tasso di iscrizione", ma volevamo anche conoscere un risultato economico, tasso di conversione generale e completamenti obiettivo. Quindi abbiamo selezionato le seguenti metriche:

• Visitatori Singoli
• Iscriviti (Completamenti Goal11)
• Registrazione (tasso di conversione Goal11)
• Valore obiettivo per visita
• Tasso di conversione obiettivo
• Completamenti obiettivo

Inoltre è bello dividere i visitatori "Nuovi" e "Ritornati", perché soprattutto quando parliamo di "Iscrizione" ci preoccupiamo per i nuovi utenti. Quindi andiamo al report personalizzato e creiamo un nuovo "test A/B"
È fantastico ! Ma abbiamo ancora un elenco completo delle visite senza la differenza "Immagine" o "Video", quindi dobbiamo creare 2 segmenti personalizzati. Vai su "Segmenti avanzati" e crea "Nuovo segmento personalizzato" - "Immagine". La metrica di ricerca "Event Action" contiene "ImageVsVideo-Image".
Ripeti lo stesso per il segmento "Video" con "Event Action" uguale a "ImageVsVideo-Video ".

Infine, applica entrambi i segmenti "Immagine" e "Video" e vedrai qualcosa di simile a questo:

Di conseguenza: tasso di conversione video 13% contro 10% con immagine, valore economico più elevato, ma tasso di conversione obiettivo leggermente inferiore. Quindi abbiamo bisogno di più statistiche. Selezioniamo la dimensione secondaria "Tipo di traffico".
Per il traffico diretto i risultati sono quasi gli stessi, ma per il traffico di ricerca "Tasso di iscrizione" e Valore economico sono molto più alti. Ma da un'altra prospettiva, per gli utenti esistenti la conversione sta diminuendo. Dimostra che per le persone che hanno già visitato il nostro sito web la "risposta rapida" è più importante. Quindi ha senso mostrare "Video" ai nuovi clienti che provengono dai motori di ricerca.

Collegamenti

• Event Tracking Guide

Aggiornamento dal 05/07/2013

Ho aggiornato il "codice di allocazione" aggiungendo il supporto multi-test per la stessa pagina. Ad esempio, su una pagina del blog corrente - 2 test: - Ci sono 4 diversi moduli di "singup", con messaggi diversi (ma il resto dei 3 è nascosto). Se apri la pagina in una modalità sorgente li troverai.

• Il secondo test è un messaggio sotto il modulo con un collegamento alle pagine "Come funziona" o "Iscriviti".

Il codice completo è qui, inoltre puoi download la nostra ultima versione (ricorda che stiamo usando js async specializzato loader, se non lo usi, devi sostituire head.ready(function(){ per $( documento).ready(funzione(){.

function allocationTestCell(nome, celle) {
    cella = $.cookie('ab-testing-' + nome);
    if (cella) restituisce cella;
    // allocare
    rand = Matematica.casuale();
    inizio = 0;
    delta = 1/celle.lunghezza;
    cella = celle[0];
    for (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            cella = celle[i];
            rottura;
        }
    }
    $.cookie('ab-testing-' + nome, cella, { scadenza: 90, percorso: '/' });
    cella di ritorno;
}
$(documento).ready(funzione(){
    var AbTesting = {};
    $('.ab-testing').each(funzione(indice, elemento) {
        test = $(elemento).attr('data-ab-test-test');
        cell = $(elemento).attr('data-ab-testing-cell');
        if (!(AbTesting[test] istanza di Array)) {
            AbTesting[test] = [];
        }
        AbTesting[test].push(cella);
    });
    // allocazione
    for (test in AbTestting) {
        allocazione = allocazioneTestCell(test, AbTesting[test]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + allocazione, 'ab-testing-'+test+'-'+'allocation', 0, true]);
        $('.ab-testing').each(funzione(indice, elemento) {
            _test = $(elemento).attr('data-ab-testing-test');
            _cell = $(elemento).attr('data-ab-testing-cell');
            if (_test!=test) ritorno;
            if (_cella!=allocazione) {
                return $(elemento).hide();
            }
            $(elemento).show();
        });
    }
});

La differenza principale è che il nuovo codice non richiede di scrivere alcun pezzo di codice su JS. Devi solo aggiungere la classe "ab-testing" a qualsiasi elemento che desideri testare e specificare il nome del test e il nome della cella, ad es. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">codice per i test</div>.

Diamo un'occhiata a un vero esempio di applicazione di questo test da zero.

Il codice sorgente di questo elemento è simile a:

<div>
  Analizza e migliora la tua presenza sui social media <a href="/how-it-works">Inizia ora</a>
</div>

Nella prima fase devi copiare l'elemento, modificare un messaggio e renderlo nascosto.

<div>
  Analizza e migliora la tua presenza sui social media <a href="/how-it-works">Inizia ora</a>
</div>
<div style="display:none;">
  Analizza e migliora la tua presenza sui social media <a href="/signup">Inizia ora</a>
</div>

Adesso, se aggiorni la pagina non cambierà nulla: hai 1 elemento visibile e 1 invisibile con il link che vuoi testare. Al passaggio successivo, dobbiamo scegliere un nome di test e un nome di cella. Nel mio esempio:

• signupblogtext - nome del test
• come funziona - nome della cella per il primo blocco con collegamento a "come funziona"
• registrazione - nome della cella per il blocco nascosto con collegamento a "registrazione"

Inoltre aggiungeremo la classe "ab-testing" come marcatore per il nostro JS. Quindi il codice di lavoro completo è simile a questo:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  Analizza e migliora la tua presenza sui social media <a href="/how-it-works">Inizia ora</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  Analizza e migliora la tua presenza sui social media <a href="/signup">Inizia ora</a>
</div>

Di conseguenza, il 50% degli utenti vedrà un blocco con il collegamento "come funziona" e un altro 50% - il secondo.

Test

Il mio codice memorizza l'allocazione nei cookie degli utenti, il che significa che l'allocazione avviene solo una volta, quindi se vuoi testarlo hai bisogno di un browser pulito senza cookie. Ma una soluzione molto più semplice è usare la funzione Google Chrome Incognito Window. Fornisce una nuova finestra del browser assolutamente chiara senza cookie. Di conseguenza, puoi aprire la pagina più volte e verificare se tutto funziona correttamente.