Hoe gebruikersgedrag te volgen met Google Analytics-evenementen

Om een ​​lang verhaal kort te maken; u heeft zojuist uw website opnieuw ontworpen en u hebt gebruikgemaakt van alle praktische tips waarvan u op de hoogte bent. De website laadt snel, en het ziet er zeker veel beter uit met de nieuwe interface.

Maar heb je overwogen hoe maatregel je nieuwe ontwerp? Hoe weet je of de nieuwe pop-up die je zojuist hebt toegevoegd de conversie van schijven is, of de ervaring schaadt? Hoe vaak wordt de pop-up weergegeven en hoeveel mensen verlaten deze? Hoeveel gebruikers navigeren er vanuit het off-canvas menu dat je net hebt toegevoegd? Hoeveel mensen bekijken de afbeeldingschuifregelaar op de startpagina na de eerste dia? De vragen zijn veel en gevarieerd.

In deze zelfstudie laat ik u zien hoe u gebruik kunt maken van de Google Analytics-API voor het bijhouden van gebeurtenissen (wat een lange naam!) Om de antwoorden te vinden.

Ermee beginnen

Als u nog geen Google Analytics-gebruiker bent, maakt u een account en volgt u de instructies voor het volgen om een ​​trackingscript voor uw website te genereren. Meestal ziet het fragment dat u krijgt, er uit als het onderstaande voorbeeld met de UA-XXXXXX-X de unieke tracking-ID van uw website zijn.

(functie (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r; i [r] = i [r] || function () (i [r] .q = i [r] .q || []). push (argumenten), i [r] .l = 1 * nieuwe datum (); a = s.createElement (o), m = s.getElementsByTagName (o) [ 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (venster, document, 'script', 'http://www.google-analytics.com/ analytics.js ',' ga '); ga ('create', 'UA-XXXXXX-X', 'auto'); ga ('send', 'pageview'); 

Voor deze oefening moet u ook een Chrome-extensie, Google Analytics Debugger, installeren om de Google Analytics-scripts op onze site later te debuggen.

Google Chrome Debugger is ingeschakeld

Zodra we deze hebben ingesteld, kunnen we beginnen met ons eerste voorbeeld.

Een klik volgen

Stel je voor dat we een paar knoppen hebben (of ankerkoppelingen die zijn vormgegeven als knoppen). We voegen de eerste boven de vouw toe in ons zogenaamde "hero" -gebied en een tweede knop vlak voor de voettekst. Zoals je hieronder kunt zien, wijst elke knop naar dezelfde pagina, heeft verschillende stylingklassen en een unieke ID. In dit geval kunnen we de "Event Tracking API" gebruiken om uit te vinden welke knop meer klikken ontvangt.

 Koop nu  Koop nu

Het gebruik van het bijhouden van gebeurtenissen is relatief eenvoudig, omdat het niet strikt conventies vereist voor het definiëren van het evenement. Eerst moeten we de knoppen binden aan de Klik evenement.

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

Dan voegen we toe bis () Dit is een functie die wordt weergegeven in de Google Analytics-scripts die we eerder hebben toegevoegd en die dezelfde functie is die we gebruiken om een ​​'paginaweergave' op te nemen. Evenzo volgen we een gebeurtenis met behulp van de sturen commando met evenement ingesteld als de hitType argument samen met een aantal vereiste parameters, namelijk:

• eventAction: specificeert de gebruikersinteractie of de gebruikersinterfacestatus, bijvoorbeeld. Klik, spelen, pauze, enz.
• eventCategory: specificeert het Object om bijvoorbeeld te volgen. Videos, Toetsen, Pop-ups, enz.
• eventLabel: een uniek label of ID van de gebeurtenis. We voegen deze variabele toe om meerdere instanties van hetzelfde object te categoriseren.

Zoals eerder vermeld, stelt Google geen strikte regels; u kunt deze toepassen op elke manier die u geschikt acht op uw website. In ons geval stellen we deze variabelen als volgt in:

var buttons = document.querySelectorAll ('. btn'); buttons.forEach (function (btn) btn.addEventListener ('klik', functie (event) ga ('send', 'event', eventAction: 'click', eventCategory: 'Nu kopen-knoppen', eventLabel: event .target.id // buy-now-above || buy-now-below);););

Met de Google Analytics Debugger-extensie actief, kunnen we op een van onze knoppen klikken en de DevTools-console bekijken om te zien of de tracker werkt:

De tracker verzendt gegevens naar Google Analytics

En zodra Google Analytics de gegevens heeft ontvangen, wordt deze geregistreerd onder de Realtime> Evenementen en Gedrag> Evenementen.

Uit deze schermafbeelding zien we dat onze knop 'Nu kopen' onder de vouw meer klikken ontvangt dan de knop hierboven.

Een carrousel volgen

Ons tweede voorbeeld zal een Image Slider of Carousel zijn. Je zult waarschijnlijk argumenten tegenkomen voor het gebruik van carrousels op websites; "Mensen hebben geen interactie met carrousels" of "mensen hebben alleen interactie met de eerste dia". Maar zijn deze argumenten van toepassing op uw website? Zonder de juiste gegevens is het moeilijk te zeggen.

Laten we Google Analytics-gebeurtenissen opnemen in onze carrousel, die we hebben gebouwd met Slick.js. Deze jQuery-plug-in biedt een handvol aangepaste jQuery-gebeurtenissen en dat is precies wat we nodig hebben om Google Analytics-gebeurtenissen bij te houden. Ga naar de Slick-documentatie voor meer informatie over het bouwen van de carrousel.

Onze carrousel is eenvoudig gemaakt voor het doel van de demo.

Onze carrousel bestaat uit vijf dia's. Net als bij ons eerste voorbeeld hebben we ook een unieke ID toegevoegd voor elk van de dia's (bijv. slide-1, slide-2, slide-3, enz.) die we zullen doorgeven in de eventLabel parameter. Het doel hier is om uit te vinden:

1. of gebruikers de carrousel voorbij de eerste dia bekijken 
2. en om het aantal weergaven voor elke dia te verzamelen. 

Om dit te doen kunnen we de Slick.js-evenementen gebruiken wip en afterChange.

wip

De wip gebeurtenis, zoals de naam al aangeeft, wordt geactiveerd wanneer de gebruiker de carrousel navigeert met behulp van de uithaalbeweging. In dit geval stellen we de eventAction parameter naar wip ook.

$ ('. carrousel'). on ('swipe', functie (event, slick, richting) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'swipe', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

afterChanges

De afterChanges is de gebeurtenis geactiveerd wanneer de dia wordt gewijzigd; met andere woorden, wanneer de gebruiker de volgende of vorige dia in de carrousel bekijkt. In dit geval stellen we de eventAction naar uitzicht voor "nieuwe diaweergave".

$ ('. carrousel'). on ('afterChange', functie (event, slick, richting) ga ('send', 'event', eventCategory: 'Carousel', eventAction: 'view', eventLabel: $ ( this) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

Nadat Google Analytics de gegevens heeft verzameld, zullen we snel ontdekken hoeveel gebruikers interactie hebben met onze carrousel, het aantal weergaven dat elke dia ontvangt en hoeveel gebruikers een uithaalbeweging gebruiken bij het gebruik van de carrousel.

Zoals we hierboven kunnen zien, ontvangt onze carrousel in totaal 19 weergaven, waarvan 14 via het uithaalbeweging.

Wat is het volgende?

We hebben zojuist twee voorbeelden gezien van het integreren van Google Analytics Events Tracking op onze webpagina voor het verzamelen van gebruikersinteractiegegevens. Deze cijfers geven ons een degelijke referentie om te beoordelen of het nieuwe ontwerp beter presteert dan het oude ontwerp, waardoor we uiteindelijk de UX voor onze website kunnen verbeteren..

Ik raad u aan de documentatie te bekijken om uw gebruik van Google Analytics Events Tracking API verder uit te breiden.

Verdere bronnen

• Google Analytics Events Tracking API
• Demystifying Google Analytics op Tuts+
• Een verkenning van carrouselgebruik op mobiele e-commercewebsites