Cum să urmăriți comportamentul utilizatorilor cu evenimentele Google Analytics

Poveste lungă scurtă; tocmai ați reproiectat site-ul dvs. și ați folosit toate cele mai bune practici despre care știți. Site-ul se încarcă rapid, și cu siguranță arată mult mai bine cu noua interfață.

Dar te-ai gândit cum să măsura noul dvs. design? Cum veți ști dacă noul pop-up pe care tocmai l-ați adăugat la conversia unităților sau vătămă experiența? Cât de des este afișată fereastra pop-up și câți oameni o abandonează? Câți utilizatori navighează pe site din meniul off-canvas pe care tocmai l-ați adăugat? Câți oameni văd glisorul imaginii de pe prima pagină dincolo de primul diapozitiv? Întrebările sunt multe și variate.

În acest tutorial, vă vom arăta cum să utilizați API-ul de urmărire a evenimentelor Google Analytics (ce nume lung!) Pentru a găsi răspunsurile.

Noțiuni de bază

Dacă nu sunteți deja utilizator Google Analytics, creați un cont și urmați instrucțiunile de la bord pentru a genera un script de urmărire pentru site-ul dvs. web. În mod obișnuit, fragmentul pe care vi-l dați va arăta ca exemplul de mai jos cu UA-XXXXXX-X fiind unicul cod de urmărire al site-ului dvs. web.

(funcția (i, s, o, g, r, a, m) i ['GoogleAnalyticsObject'] = r [i] (o), m = s.getElementsByTagName (o) [i] [q] 0]; a.async = true; a.src = g; m.parentNode.insertBefore (a, m);) (fereastră, document, "script", "http://www.google-analytics.com/ analytics.js ',' ga '); ga ("creați", "UA-XXXXXX-X", "auto"); ga ("trimite", "afișarea paginii"); 

Pentru acest exercițiu, va trebui, de asemenea, să instalați o extensie Chrome, Google Debugger, pentru a depana script-urile Google Analytics pe site-ul nostru mai târziu.

Debuggerul Google Chrome este activat

Odată ce le-am înființat, putem începe cu primul nostru exemplu.

Urmărirea unui clic

Imaginați-vă că avem câteva butoane (sau link-uri ancorate numite butoane). Adăugăm primul pe deasupra pliului în așa-numita zonă "erou" și un al doilea buton chiar înaintea subsolului. După cum puteți vedea mai jos, fiecare buton indică aceeași pagină, are diferite clase de stil și un ID unic. În acest caz, putem utiliza "API-ul de urmărire a evenimentelor" pentru a afla care buton primește mai multe clicuri.

 Cumpară acum  Cumpară acum

Folosirea urmăririi evenimentelor este relativ ușoară, deoarece nu necesită strict convenții în ceea ce privește definirea evenimentului. Mai întâi trebuie să legăm butoanele la clic eveniment.

butoanele var = document.querySelectorAll ('. btn'); buttons.forEach (functie (btn) btn.addEventListener ('click', functie (eveniment) ););

Apoi adăugăm ga () care este o funcție expusă din script-urile Google Analytics pe care le-am adăugat mai devreme și care este aceeași funcție pe care o folosim pentru a înregistra o "afișare de pagină". În mod similar, urmărim un eveniment folosind trimite comanda cu eveniment setat ca hitType argument împreună cu un număr de parametri necesari, și anume:

• eventAction: specifică interacțiunea utilizatorului sau starea interfeței cu utilizatorul, de ex. clic, Joaca, pauză, etc.
• eventCategory: specifică Obiectul pentru urmărire, de ex. Videoclipuri, Butoane, Pop-up-uri, etc.
• eventLabel: o etichetă unică sau un ID al evenimentului. Adăugăm această variabilă pentru a clasifica mai multe instanțe ale aceluiași Obiect.

După cum sa menționat, Google nu stabilește reguli stricte; puteți să le aplicați în orice mod pe care îl considerați adecvat pe site-ul dvs. Web. În cazul nostru, am setat aceste variabile după cum urmează:

butoanele var = document.querySelectorAll ('. btn'); buttons.forEach (functie (btn) btn.addEventListener ('click', functie (eveniment) ga ('trimite', 'event', eventAction: 'click', eventCategory: .target.id // buy-now-above || buy-now-below);););

Cu ajutorul extensiei Debugger Google Analytics, putem face clic pe unul dintre butoanele noastre și examinăm Consola DevTools pentru a vedea dacă tracker-ul funcționează:

Dispozitivul de urmărire trimite date către Google Analytics

Iar după ce Google Analytics a primit datele, acesta va fi înregistrat sub În timp real> Evenimente și Comportament> Evenimente.

Din această captură de ecran, aflăm că butonul nostru "Cumpărați acum" de mai jos folosește mai multe clicuri decât cel de mai sus.

Urmărirea unui carusel

Cel de-al doilea exemplu va implica un slider de imagine sau un carusel. Probabil ați întâlnit argumente pentru și împotriva utilizării caruselurilor pe site-uri web; "Oamenii nu interacționează de fapt cu carusele" sau "oamenii interacționează doar cu primul diapozitiv". Dar aceste argumente se aplică site-ului dvs.? Fără date corecte, este dificil de spus.

Să includeți evenimentele Google Analytics în caruselul nostru pe care l-am construit folosind Slick.js. Acest plugin jQuery oferă o mulțime de evenimente jQuery personalizate, ceea ce este exact ceea ce trebuie să executați Urmărirea evenimentelor Google Analytics. Vă rugăm să vă îndreptați spre documentația Slick pentru detalii despre construirea caruselului.

Caruselul nostru este simplu în scopul demo-ului.

Caruselul nostru este format din cinci diapozitive. Similar cu primul exemplu, am adăugat, de asemenea, un cod unic pentru fiecare dintre diapozitive (de ex. slide 1, slide 2, slide 3, etc) pe care le vom trece în eventLabel parametru. Scopul este de a afla:

1. dacă utilizatorii vizualizează caruselul dincolo de primul diapozitiv 
2. și să colecteze numărul de vizionări pentru fiecare diapozitiv. 

Pentru a face acest lucru putem folosi evenimentele Slick.js beţivan și afterChange.

Beţivan

 beţivan evenimentul, așa cum sugerează și numele, este declanșat atunci când utilizatorul navighează cu caruselul folosind gestul de glisare. În acest caz, setăm eventAction parametru pentru beţivan de asemenea.

$ ('carousel') pe ('glisați', funcție (eveniment, șmecherie, direcție) ga ('send', 'event', eventCategory: aceasta) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

afterChanges

 afterChanges este evenimentul declanșat atunci când slide-ul este schimbat; cu alte cuvinte, atunci când utilizatorul vizualizează diapozitivul următor sau anterior din carusel. În acest caz, setăm eventAction la vedere pentru "vizualizare nouă a diapozitivelor".

$ ('carusel'), pe ('afterChange', functie (eveniment, slick, directie) ga ('send', 'event', event_category_carousel ', eventAction: aceasta) .find ('.slick-active') .attr ('id') // slide-1, slide-2, slide-3, etc.););

Odată ce Google Analytics a adunat datele, vom afla în curând câți utilizatori interacționează cu caruselul nostru, numărul de vizionări primite de fiecare diapozitiv și numărul de utilizatori care folosesc un gest de glisare atunci când utilizează caruselul.

După cum vedem mai sus, caruselul nostru primește un total de 19 vizionări, dintre care 14 se fac prin gestul de glisare.

Ce urmeaza?

Tocmai am văzut două exemple de integrare a urmăririi evenimentelor Google Analytics în pagina noastră web pentru colectarea datelor despre interacțiunile utilizatorilor. Aceste numere ne oferă o referință solidă pentru a determina dacă noul design are performanțe mai bune decât vechiul design, ajutându-ne în cele din urmă să îmbunătățim UX-ul pentru site-ul nostru.

Vă încurajez să verificați docs-urile pentru a vă întinde în continuare utilizarea API-ului de urmărire a evenimentelor Google Analytics.

Resurse suplimentare

• API pentru urmărirea evenimentelor Google Analytics
• Demistificarea Google Analytics pe Tuts+
• O explorare a utilizării caruselului pe site-urile mobile de comerț electronic