Hur man spårar användarbeteende med Google Analytics-händelser

Lång historia kort; du har just omgjort din webbplats, och du har utnyttjat alla de bästa metoderna du är medveten om. Webbplatsen laddar snabbt, och det ser verkligen ut mycket bättre med det nya gränssnittet.

Men har du funderat hur man ska mäta din nya design? Hur kommer du att veta om den nya popupen du just har lagt till omvandling av enheter eller skadar upplevelsen? Hur ofta visas popupen och hur många människor överger det? Hur många användare navigerar från webbplatsen från kanvasmenyn som du just har lagt till? Hur många personer ser bildreglaget på hemsidan bortom den första bilden? Frågorna är många och varierade.

I den här handledningen visar jag dig hur du kan utnyttja Google Analytics Event Tracking API (vilket långt namn!) För att hitta svaren.

Komma igång

Om du inte redan är en Google Analytics-användare, skapa ett konto och följ instruktionerna ombord för att skapa ett spårningsskript för din webbplats. Normalt kommer det utdrag du får se ut som exemplet nedan med UA-XXXXXX-X vara det unika spårnings-ID för din webbplats.

(funktionen (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || funktionen jag [r] .q || []). push (argumenter), i [r] .l = 1 * ny Datum (); a = s.createElement (o), m = s.getElementsByTagName 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (fönster, dokument, "script", "http://www.google-analytics.com/ analytics.js ',' ga '); ga ("skapa", "UA-XXXXXX-X", "auto"); ga ('skicka', 'sidvisning'); 

För denna övning behöver du också installera en Chrome-förlängning, Google Analytics Debugger, för att felsöka Google Analytics-skript på vår webbplats senare.

Google Chrome Debugger är på

När vi har dessa inställningar kan vi börja med vårt första exempel.

Spårning av en klick

Föreställ dig att vi har ett par knappar (eller ankarlänkar utformade som knappar). Vi lägger till den första ovanför veckan i vårt så kallade "hjälte" -område och en andra knapp precis innan sidfoten. Som du kan se nedan pekar varje knapp på samma sida, har olika stylingklasser och ett unikt ID. I det här fallet kan vi använda "Event Tracking API" för att ta reda på vilken knapp som får fler klick.

 Köp nu  Köp nu

Att använda händelsespårning är relativt lätt eftersom det inte strängt kräver konventioner när det gäller att definiera händelsen. Först måste vi binda knapparna till klick händelse.

var knappar = document.querySelectorAll ('. btn'); buttons.forEach (funktion (btn) btn.addEventListener ('klick', funktion (händelse) ););

Sedan lägger vi till ga () vilken är en funktion som exponeras från Google Analytics-skript som vi lagt till tidigare, och som är samma funktion som vi använder för att spela in en "sidvisning". På samma sätt spårar vi en händelse med hjälp av skicka kommando med händelse ställa in som hitType argument tillsammans med ett antal nödvändiga parametrar, nämligen:

• eventAction: specificerar användarinteraktionen eller användargränssnittstillståndet t.ex.. klick, spela, paus, etc.
• eventCategory: anger objektet som ska spåras t.ex.. videoklipp, Knappar, Popup-fönster, etc.
• eventLabel: En unik etikett eller ID för händelsen. Vi lägger till denna variabel för att kategorisera flera instanser av samma objekt.

Som sagt anger Google inte strikta regler. Du kan tillämpa dessa på något sätt som du ser lämpligt på din webbplats. I vårt fall ställer vi in ​​dessa variabler enligt följande:

var knappar = document.querySelectorAll ('. btn'); buttons.forEach (funktion (btn) btn.addEventListener ('klicka', funktion (händelse) ga ('send', 'event', eventAction: 'click', eventCategory: 'Köp nu Knappar', eventLabel: event .target.id // buy-now-above || buy-now-below);););

Med Google Analytics Debugger-förlängningen aktiv kan vi klicka på en av våra knappar och granska DevTools Console för att se om spårningen fungerar:

Spåraren skickar data till Google Analytics

Och när Google Analytics tagit emot data kommer den att spelas in under Realtid> Händelser och Beteende> Händelser.

Från denna skärmdump finner vi att vår "Köp nu" -knapp under veckan får fler klick än den ovanstående.

Spåra en karusell

Vårt andra exempel kommer att innebära en bildskärm eller karusell. Du kommer förmodligen ha stött på argument för och emot att använda karuseller på webbplatser. "Människor verkar inte faktiskt interagera med karuseller" eller "människor interagerar bara med första bilden". Men gäller dessa argument för din webbplats? Utan korrekt data är det svårt att berätta.

Låt oss införliva Google Analytics-evenemang i vår karusell, som vi har byggt med Slick.js. Det här jQuery-pluginet innehåller en handfull anpassade jQuery-händelser, vilket är precis vad vi behöver för att spåra Google Analytics Event Tracking. Vänligen gå vidare till Slick-dokumentationen för detaljer om hur du bygger karusellen.

Vår karusell görs enkelt för syftet med demo.

Vår karusell består av fem bilder. På samma sätt som vårt första exempel har vi också lagt till ett unikt ID för var och en av bilderna (t.ex.. slide-1, slide-2, slide-3, etc.) som vi kommer att passera i eventLabel parameter. Målet här är att ta reda på:

1. om användarna ser karusellen bortom den första bilden 
2. och att samla antalet visningar för varje bild. 

För att göra detta kan vi använda händelserna Slick.js slägga och afterChange.

Svep

De slägga händelse, som namnet antyder, utlöses när användaren navigerar i karusellen med hjälp av svepningsbehandlingen. I det här fallet ställer vi in eventAction parameter till slägga också.

$ ('carousel'). på ('swipe', funktion (händelse, slick, riktning) ga ('send', 'händelse', eventCategory: 'Carousel', eventAction: 'swipe', eventLabel: $ detta) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

afterChanges

De afterChanges Är händelsen utlösad när bilden ändras. med andra ord när användaren ser nästa eller föregående bild i karusellen. I det här fallet ställer vi in eventAction till se för "ny bildvisning".

$ ('carousel'). på ('afterChange', funktion (händelse, slick, riktning) ga ('skicka', 'händelse', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ detta) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

När Google Analytics har samlat in data kommer vi snart att ta reda på hur många användare som interagerar med vår karusell, antalet visningar varje bild mottar och hur många användare använder en svepning vid användning av karusellen.

Som vi kan se ovan får vår karusell totalt 19 visningar, varav 14 är gjorda genom swipe gesten.

Vad kommer härnäst?

Vi har just sett två exempel på att integrera Google Analytics-händelsespårning på vår webbsida för att samla in användarinteraktionsdata. Dessa siffror ger oss en solid referens för att bedöma om den nya designen fungerar bättre än den gamla designen, vilket hjälper oss att förbättra UX för vår hemsida.

Jag uppmanar dig att kolla in dokumenten för att ytterligare utöka din användning av Google Analytics Events Tracking API.

Ytterligare resurser

• API för händelsespårning i Google Analytics
• Demystifying Google Analytics på Tuts+
• En undersökning av karusellanvändning på mobila e-handelswebbplatser