Come tenere traccia del comportamento degli utenti con gli eventi di Google Analytics

Per farla breve; hai appena ridisegnato il tuo sito web e hai fatto uso di tutte le migliori pratiche di cui sei a conoscenza. Il sito Web si carica rapidamente e sembra sicuramente molto meglio con la nuova interfaccia.

Ma hai considerato come misurare il tuo nuovo design? Come farai a sapere se il nuovo popup che hai appena aggiunto guida la conversione o danneggia l'esperienza? Con quale frequenza viene visualizzato il popup e quante persone lo abbandonano? Quanti utenti navigano nel sito dal menu di sfondo che hai appena aggiunto? Quante persone visualizzano il cursore dell'immagine sulla home page oltre la prima diapositiva? Le domande sono molte e varie.

In questo tutorial, ti mostrerò come sfruttare l'API di tracciamento eventi di Google Analytics (che nome lungo!) Per trovare le risposte.

Iniziare

Se non sei già un utente di Google Analytics, crea un account e segui le istruzioni di onboarding per generare uno script di monitoraggio per il tuo sito web. In genere, lo snippet che ti viene mostrato sarà simile all'esempio seguente con UA-XXXXXX-X essendo l'ID di tracciamento univoco del tuo sito web.

(funzione (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || function () (i [r] .q = i [r] .q || []). push (argomenti), i [r] .l = 1 * new Date (); a = s.createElement (o), m = s.getElementsByTagName (o) [ 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (finestra, documento, 'script', 'http://www.google-analytics.com/ analytics.js ',' ga '); ga ('create', 'UA-XXXXXX-X', 'auto'); ga ('invia', 'visualizzazione di pagina'); 

Per questo esercizio dovrai anche installare un'estensione di Chrome, Debugger di Google Analytics, per eseguire il debug degli script di Google Analytics sul nostro sito in un secondo momento.

Google Chrome Debugger è attivo

Una volta configurati, possiamo iniziare con il nostro primo esempio.

Tracciamento di un clic

Immagina di avere un paio di pulsanti (o collegamenti di ancoraggio disegnati come pulsanti). Aggiungiamo il primo above the fold nella nostra cosiddetta area "eroe" e un secondo pulsante appena prima del piè di pagina. Come puoi vedere qui sotto, ogni pulsante punta alla stessa pagina, ha varie classi di stile e un ID univoco. In questo caso, possiamo utilizzare "Event Tracking API" per scoprire quale pulsante riceve più clic.

 Acquista ora  Acquista ora

L'uso del monitoraggio degli eventi è relativamente facile, poiché non richiede rigorosamente le convenzioni in termini di definizione dell'evento. Per prima cosa dobbiamo associare i pulsanti a clic evento.

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('click', function (event) ););

Quindi aggiungiamo ga () che è una funzione esposta dagli script di Google Analytics che abbiamo aggiunto in precedenza e che è la stessa funzione che usiamo per registrare una "visualizzazione di pagina". Allo stesso modo, tracciamo un evento usando il inviare comando con evento impostare come il hitType argomento insieme a una serie di parametri richiesti, vale a dire:

• eventAction: specifica l'interazione dell'utente o lo stato dell'interfaccia utente, ad es. clic, giocare, pausa, eccetera.
• EventCategory: specifica l'oggetto da tracciare ad es. video, pulsanti, Pop-up, eccetera.
• eventLabel: un'etichetta o ID univoco dell'evento. Aggiungiamo questa variabile per categorizzare più istanze dello stesso oggetto.

Come accennato, Google non stabilisce regole rigide; puoi applicarle in qualsiasi modo tu ritenga opportuno sul tuo sito web. Nel nostro caso, impostiamo queste variabili come segue:

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (funzione (btn) btn.addEventListener ('clic', funzione (evento) ga ('invia', 'evento', eventAction: 'clic', eventCategory: 'Pulsanti Paga adesso', eventLabel: evento .target.id // buy-now-above || buy-now-below);););

Con l'estensione Debugger di Google Analytics attiva, possiamo fare clic su uno dei nostri pulsanti ed esaminare la Console DevTools per vedere se il tracker funziona:

Il tracker sta inviando dati a Google Analytics

E una volta che Google Analytics ha ricevuto i dati, verrà registrato sotto Tempo reale> Eventi e Comportamento> Eventi.

Da questo screenshot, scopriamo che il pulsante "Acquista ora" sotto la piega riceve più clic rispetto a quello sopra riportato.

Monitoraggio di un carosello

Il nostro secondo esempio riguarderà un cursore immagine o un carosello. Probabilmente avrai riscontrato argomenti a favore e contro l'utilizzo di caroselli sui siti web; "Le persone in realtà non interagiscono con i caroselli" o "le persone interagiscono solo con la prima diapositiva". Ma questi argomenti si applicano al tuo sito web? Senza dati corretti, è difficile dirlo.

Incorporiamo gli eventi di Google Analytics nel nostro carosello, che abbiamo creato utilizzando Slick.js. Questo plugin jQuery fornisce una manciata di eventi jQuery personalizzati che è proprio quello di cui abbiamo bisogno per eseguire il monitoraggio degli eventi di Google Analytics. Si prega di consultare la documentazione di Slick per i dettagli su come costruire il carosello.

Il nostro carosello è reso semplice ai fini della demo.

Il nostro carosello è composto da cinque diapositive. Analogamente al nostro primo esempio, abbiamo anche aggiunto un ID univoco per ciascuna diapositiva (ad es. slide-1, slide-2, slide-3, ecc.) che passeremo nel eventLabel parametro. L'obiettivo qui è scoprire:

1. se gli utenti vedono il carosello oltre la prima diapositiva 
2. e per raccogliere il numero di visualizzazioni per ogni diapositiva. 

Per fare ciò possiamo utilizzare gli eventi Slick.js rubare e afterChange.

rubare

Il rubare evento, come suggerisce il nome, viene attivato quando l'utente naviga sul carosello usando il gesto di scorrimento. In questo caso, impostiamo il eventAction parametro a rubare anche.

$ ('. carousel'). on ('swipe', funzione (evento, slick, direzione) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'swipe', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, ecc.););

afterChanges

Il afterChanges è l'evento innescato quando la diapositiva viene cambiata; in altre parole, quando l'utente visualizza la diapositiva successiva o precedente all'interno del carosello. In questo caso, impostiamo il eventAction a vista per "nuova diapositiva".

$ ('. carousel'). on ('afterChange', function (event, slick, direction) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, ecc.););

Una volta che Google Analytics ha raccolto i dati, scopriremo presto quanti utenti interagiscono con il nostro carosello, il numero di visualizzazioni ricevute da ciascuna diapositiva e quanti utenti utilizzano un gesto di scorrimento quando utilizzano la giostra..

Come possiamo vedere sopra, il nostro carosello riceve un totale di 19 visualizzazioni, 14 delle quali sono fatte attraverso il gesto di scorrimento.

Qual'è il prossimo?

Abbiamo appena visto due esempi di integrazione del monitoraggio degli eventi di Google Analytics nella nostra pagina Web per la raccolta dei dati di interazione dell'utente. Questi numeri ci danno un solido riferimento per giudicare se il nuovo design si comporta meglio del vecchio design, in definitiva aiutandoci a migliorare la UX per il nostro sito Web.

Ti invito a consultare i documenti per estendere ulteriormente l'utilizzo dell'API di monitoraggio degli eventi di Google Analytics.

Ulteriori risorse

• API di tracciamento degli eventi di Google Analytics
• Demistificare Google Analytics su Tuts+
• Un'esplorazione dell'uso del carosello sui siti web di e-commerce mobile