Slik sporer du brukeradferd med Google Analytics-hendelser

Lang historie kort; Du har nettopp omdesignet nettstedet ditt, og du har brukt alle de beste metodene du er klar over. Nettstedet laster raskt, og det ser absolutt mye bedre ut med det nye grensesnittet.

Men har du vurdert hvordan måle ditt nye design? Hvordan vil du vite om den nye popupen du nettopp har lagt til drevkonvertering, eller skader opplevelsen? Hvor ofte vises popup-vinduet og hvor mange mennesker forlater det? Hvor mange brukere navigerer fra nettstedet fra kanvasmenyen som du nettopp har lagt til? Hvor mange personer ser bildeskyderen på hjemmesiden utover det første lysbildet? Spørsmålene er mange og varierte.

I denne veiledningen vil jeg vise deg hvordan du kan utnytte Google Analytics Event Tracking API (hva et langt navn!) For å finne svarene.

Starter

Hvis du ikke allerede er en Google Analytics-bruker, lager du en konto og følger instruksjonene ombord for å generere et sporingsskript for nettstedet ditt. Vanligvis vil koden du får, se ut som eksempelet nedenfor med UA-XXXXXX-X å være den unike sporings-IDen til nettstedet ditt.

(funksjonen (jeg, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || funksjon jeg [r] .q || []). push (argumenter), jeg [r] .l = 1 * ny Dato (); a = s.createElement (o), m = s.getElementsByTagName 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (vindu, dokument, 'script', 'http://www.google-analytics.com/ analytics.js ',' ga '); ga ('create', 'UA-XXXXXX-X', 'auto'); ga ('send', 'sidevisning'); 

For denne øvelsen må du også installere en Chrome-utvidelse, Google Analytics Debugger, for å feilsøke Google Analytics-skriptene på nettstedet vårt senere..

Google Chrome Debugger er På

Når vi har disse oppsettene, kan vi begynne med vårt første eksempel.

Sporer et klikk

Tenk deg at vi har et par knapper (eller ankerforbindelser stylet som knapper). Vi legger til den første over folden i vårt såkalte "helt" -område, og en annen knapp like før bunnteksten. Som du ser nedenfor, peker hver knapp på den samme siden, har forskjellige stylingklasser og en unik ID. I dette tilfellet kan vi bruke "Event Tracking API" for å finne ut hvilken knapp som mottar flere klikk.

 Kjøp nå  Kjøp nå

Bruke Events Tracking er relativt enkelt, siden det ikke strengt krever konvensjoner når det gjelder å definere hendelsen. Først må vi knytte knappene til klikk begivenhet.

var knapper = document.querySelectorAll ('.btn'); buttons.forEach (funksjon (btn) btn.addEventListener ('klikk', funksjon (hendelse) ););

Så legger vi til ga () som er en funksjon som er eksponert fra Google Analytics-skriptene vi la til tidligere, og som er den samme funksjonen vi bruker til å ta opp en "sidevisning". På samme måte sporer vi et arrangement ved hjelp av sende kommandoen med begivenhet sett som hitType argument sammen med en rekke nødvendige parametere, nemlig:

• eventAction: angir brukerinteraksjonen eller brukergrensesnittstatusen f.eks. klikk, spille, pause, etc.
• eventCategory: Angir objektet som skal spores f.eks. videoer, knapper, Pop-ups, etc.
• eventLabel: En unik etikett eller ID for arrangementet. Vi legger til denne variabelen for å kategorisere flere forekomster av det samme objektet.

Som nevnt angir Google ikke strenge regler; Du kan bruke disse på en måte som du ser hensiktsmessig på nettstedet ditt. I vårt tilfelle angir vi disse variablene som følger:

var knapper = document.querySelectorAll ('.btn'); buttons.forEach (funksjon (btn) btn.addEventListener ('klikk', funksjon (hendelse) ga ('send', 'event', eventAction: 'click', eventCategory: 'Kjøp nå knapper', eventLabel: event .target.id // buy-now-over || buy-now-below);););

Med Google Analytics Debugger-utvidelsen aktiv, kan vi klikke på en av våre knapper og undersøke DevTools Console for å se om tracker fungerer:

Trackeren sender data til Google Analytics

Og når Google Analytics mottok dataene, blir det registrert under Real-time> Hendelser og Oppførsel> Hendelser.

Fra dette skjermbildet finner vi at vår "Kjøp nå" -knapp under folden mottar flere klikk enn den ovenfor.

Spore en karusell

Vårt andre eksempel vil innebære en bildeskinner eller karusell. Du vil sannsynligvis ha møtt argumenter for og imot å bruke karuseller på nettsteder; "Folk faktisk ikke samhandle med karuseller" eller "folk bare samhandle med første lysbilde". Men gjelder disse argumentene for nettstedet ditt? Uten riktig data er det vanskelig å fortelle.

La oss inkorporere Google Analytics-hendelser i karusellen, som vi har bygget ved hjelp av Slick.js. Dette jQuery-pluginet gir en håndfull tilpassede jQuery-hendelser, som er akkurat det vi trenger for å kjøre Google Analytics Event Tracking. Vennligst gå over til Slick-dokumentasjonen for detaljer om hvordan du bygger karusellen.

Vår karusell er gjort enkelt for formålet med demoen.

Vår karusell består av fem lysbilder. På samme måte som vårt første eksempel, har vi også lagt til en unik ID for hvert lysbilde (f.eks. slide-1, slide-2-, slide-3, etc.) som vi vil passere i eventLabel parameter. Målet her er å finne ut:

1. om brukerne ser karusellen utover det første lysbildet 
2. og å samle antall visninger for hvert lysbilde. 

For å gjøre dette kan vi utnytte Slick.js-hendelsene swipe og afterChange.

Sveip

De swipe Hendelsen, som navnet antyder, utløses når brukeren navigerer i karusellen ved hjelp av sveipebevegelsen. I dette tilfellet setter vi inn eventAction parameter til swipe også.

$ ('karusell'). På ('swipe', funksjon (begivenhet, glatt, retning) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'swipe', eventLabel: $ dette) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

afterChanges

De afterChanges er hendelsen utløst når lysbildet er endret; med andre ord når brukeren ser neste eller forrige lysbilde innenfor karusellen. I dette tilfellet setter vi inn eventAction til utsikt for "ny lysbildevisning".

$ ('carousel'). på ('afterChange', funksjon (begivenhet, glatt, retning) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ dette) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

Når Google Analytics har samlet dataene, vil vi snart finne ut hvor mange brukere som samhandler med karusellen, antall visninger hvert lysbilde mottar, og hvor mange brukere som bruker en swipe-gestus ved bruk av karusellen.

Som vi kan se ovenfor, får vår karusell totalt 19 visninger, hvorav 14 er gjort gjennom sveipebevegelsen.

Hva blir det neste?

Vi har nettopp sett to eksempler på å integrere Google Analytics Events Tracking på vår nettside for å samle inn brukerinteraksjonsdata. Disse tallene gir oss en solid referanse for å bedømme om det nye designet fungerer bedre enn det gamle designet, og til slutt hjelper oss med å forbedre UX for nettstedet vårt.

Jeg oppfordrer deg til å sjekke ut dokumentene for å øke bruken av Google Analytics Events Tracking API.

Ytterligere ressurser

• Google Analytics Events Tracking API
• Demystifying Google Analytics på Tuts+
• En utforskning av karusellbruk på mobile e-handelswebsteder