Kuidas jälgida oma veebisaidi sündmusi Google Tag Manager abil

Üksikasjalik juhend, kodeerimine pole vajalik

Viimases artiklis juhendasime teid, kuidas seadistada Google Analytics Google Tag Manageri kaudu, et jälgida kõiki teie veebisaidi kasutajate lehtede külastusi (lehevaatamisi).

Kuid paljudes olukordades soovite jälgida oma lehtedel kasutajate käitumist, näiteks nupul klikkide lisamine, vormi esildised või videovaated.

Kõiki neid käitumisharjumusi nimetatakse sündmusteks ja täna näitame teile, kuidas saata neid sündmusi Google Tag Manageri kaudu Google Analyticsisse.

HOIATUS: Selles õpetuses eeldatakse, et teie veebimajutusel on konfigureeritud Google Tag Manager ja Google Analytics. Kui te pole seda veel teinud, vaadake meie viimast artiklit, mis on lingitud selle postituse alguses, et neid üles seada.

Lahingukava

Nagu tavaliselt, alustame lahinguplaanist, nii et me teame täpselt, millesse me jõuame:

  • Esiteks koostame loetelu sündmustest, mida tahame jälgida.
  • Teiseks seadistame CSS-i elemendi valijatega tööriista jaoks iga sündmuse päästikud, mida soovite oma veebisaidil jälgida.
  • Kolmandaks seadistame iga sündmuse jaoks sildid, et saata nende sündmustega seotud andmeid Google Analyticsi.
  • Lõpuks kasutame Google Tag Manager'is eelvaate funktsiooni, et veenduda, et kõiki sündmusi jälgitakse õigesti.

Selles õpetuses soovitame kasutada sündmuste jälgimiseks Google Tag Managerit järgmistel kolmel põhjusel:

  • See lähenemisviis ei nõua oma veebisaidile koodi lisamist, mis muudab juurutamise oluliselt lihtsamaks, kui teie meeskonnas pole tehnilisi isikuid.
  • Google muudab nende jälgimismehhanismi pidevalt ja nad vabastavad järgmise paari kuu jooksul uue jälgimiskoodide kogu, mille nimi on gtag.js. Google Tag Manageri kasutamine aitab teil vältida vaeva uuesti koodi sisenemisel ja jälgimismehhanismi muutmisel iga kord, kui neil on värskendusi.
  • Google Tag Manager annab teile lihtsama liidese jälgitavate sündmuste vaatamiseks. See liides aitab teil organiseeruda, kui jälgite oma veebisaidil palju sündmusi.

1. samm: koostage sündmuste loend

Sündmuste jälgimise seadistamise esimene samm on tuvastada, milliseid sündmusi tahame kõigepealt jälgida.

Kunagi olin tohutu lähenemisviisi "jälgi kõike" fänn, kes toetab iga teie veebisaidil toimuva sündmuse jälgimist.

Selle lähenemisviisi eeliseks on see, et see aitab teil mõista oma veebisaidi kasutajakogemuse tervikpilti. Andmeteaduse taustast pärit inimesena ma jumaldan ideed omada kõiki andmeid.

Selle lähenemisviisi miinuseks on aga see, et andmemahuga on tõesti lihtne üle saada ja ülehinnata tegelik äriline väärtus, kui kulutate oma (või teie analüütiku) aega oma lehe iga elemendi analüüsimiseks.

Väikeste ja keskmise suurusega ettevõtete jaoks ei soovitaks ma teie sündmuste jälgimisel sellist lähenemist. Suurematele ettevõtetele soovitaksin Google Analyticsi asemel investeerida ikkagi keerukamatesse käitumisjälgimisvahenditesse nagu Hotjar (sündmuste soojuse kaardistamiseks) ja Heap Analytics (sündmuste lehtri jälgimiseks).

Hiljuti hakkasin saama tohutuks lähenemiseks makro- ja mikromuundamise lähenemisviisile, mis toetab ainult teie veebisaidil makro- ja mikrotranspordi sündmuste jälgimist.

See lähenemisviis mõistab kõigi veebisaidi sündmuste analüüsimisel tekkivat võimalikku ülekoormust ja õpetab analüütikuid selle asemel salvestama ainult väikese nimekirja sündmustest, millel on teie jaoks äriväärtus.

Need sündmused võivad olla makrokonversioonide sündmused, st sündmused, mida teie kliendid peavad ostmise või juhtvormi esitamiseks läbima. Need võivad olla ka mikrotranspordiüritused, mis näitavad teie vaatajaskonna suuremat huvi. Nende hulka võivad kuuluda nuppude klõpsud, näiteks uudiskirja tellimine või oma veebisaidil tooteteabe otsimine.

Koostage ülaltoodud kirjelduse põhjal oma veebisaidi lühike loend makro- ja mikromuundamise sündmustest (ideaalis vähem kui kümme). Siis oleme valmis liikuma järgmise sammu juurde - sündmuste jälgimise seadistamine.

2. samm: sündmuse päästikute seadistamine

Alustame lühikese kokkuvõttega sellest, mida eelmisel nädalal päästikute kohta arutasime.

Vaikimisi jälgib Google Tag Manager kõiki teie veebimajutuses olevaid sündmusi ja lehe külastusi automaatselt. Kuid see ei salvesta ühtegi neist andmetest, kui te ei ütle seda teha. Päästikud on viis, kuidas saate käskida GTM-il jälgida konkreetseid sündmusi ja lehevaatamisi, mida soovite Google Analyticsi või muudesse teenustesse saata.

Seetõttu peame Google Tag Managerile teatama, et soovime saata eelmises etapis kokku pandud sündmused Google Analyticsi. Selleks kasutame CSS-i elemendi valijaks nimetatavat elementi.

Lühike juhend sündmuste valimiseks

Jälgitavate sündmuste tuvastamiseks on kasulik mõista kontseptuaalselt, kuidas need nupud teie veebisaidil on kodeeritud ja kuidas me neid elemente valime.

Teie veebisaidil on kõik elemendid kodeeritud HTML-siltidega, mille struktuur on näidatud allpool:

HTML-märgendil on mitu võtmekomponenti:

  • Sildi nimi, täpsustades selle konkreetse sildi funktsiooni teie veebisaidi üldises kontekstis. Sel juhul tähendab “h1” “esimest päist”.
  • Atribuudi nimi, täpsustades päise kohta lisateavet, näiteks selle klass (kasutatakse sarnaste atribuutidega siltide rühmitamiseks), id (kasutatakse siltide kordumatu identifikaatorina) ja stiilid.
  • Mõjutatud sisu on tekst, mida kuvatakse veebisaidil kas nupu või lõiguna.

Neid siltide komponente silmas pidades on CSS-i elemendi valija otsingupäringute keel, milles saate süstemaatiliselt tuvastada oma veebisaidi konkreetseid HTML-silte.

Näiteks saab graafiliselt illustreeritud HTML-sildi valida järgmise lihtsa päringu „h1.primary” abil.

CSS-selektori süntaksi kohta lisateabe saamiseks kasutage allolevat linki.

Elemendi valija lubamine Google Tag Manager'is

Nüüd, kui oleme kontseptuaalselt aru saanud, kuidas oma sündmusi valida, lähme käsi puhtaks.

Google Tag Manager võimaldab teil tuvastada oma veebisaidi sündmusi sündmuste mitmesuguste atribuutide põhjal (nad nimetavad neid atribuute muutujateks). Kõigi selle sisseehitatud muutujate loendi leiate Google Tag Manageri nupust “muutuja -> seadista”.

Nagu ülaltoodud ekraanipildist näete, pakub Google Tag Manager väga põhjalikku loendit sisseehitatud muutujatest, mille abil saate sündmusi tuvastada, alates elemendi klõpsamisest kuni vormi esitamiseni.

Selles õpetuses keskendume ühele kõige põhilisemale sündmusele - klõpsamisele.

Selle saavutamiseks kasutame muutujat „Klõpsuelement”. Ülaltoodud ekraanil saate selle lubada, märkides ruudu valiku „Klõps elemendil” kõrval (saate ka muud klõpsude kategooria ruudud lubada, et sündmuse valimisel rohkem valikuid lubada).

Tuvastage oma sündmuste CSS-valija

Nüüd peame tuvastama iga meie sündmuse kordumatu CSS-valija.

Selleks palume abi Google Chrome'i veebiarendustööriistalt - tööriistade seeriast, millele teil on automaatselt juurdepääs, kui teil on Google Chrome.

Kasutame näitena Google Merchandise Store'i.

Kui kasutaja klõpsab konkreetse toote lisa ostukorvi nupul, siis Google Merchandise Store'is toimub ostukorvi lisamise toiming, selle asemel, et suunata kasutajad eraldi lehele. Seetõttu tuleb seda klõpsat jälgida mikrokonversioonide sündmusena.

Sellel konkreetsel ekraanil (saate seda linki minnes jälgida) paremklõpsake ja valige rippmenüüst „Kontrolli”. Ekraani paremas servas avaneb konsooli külgpaneel, mis näeb välja nagu allpool olev ekraanipilt.

Nagu ekraanipildil olevad juhised selgitavad, peaksite esmalt klõpsama konsooli vasakus ülanurgas oleval elemendi valija ikoonil. Seejärel peaksite kursoriga huvipakkuva elemendi kohal hõljuma, klõpsake sellel ja teie CSS-i identifikaatori leiate konsooli paremalt küljelt.

Lõpuks kasutage konsoolipäringut document.querySelectorAll, et veenduda, et tagastatakse ainult üks tulemus, seega on CSS-i valija kordumatu (tavaliselt on see nii). Siin on teie CSS-i valija.

P.S. Kui teie CSS-selektor ei ole ainulaadne, proovige CSS-selektorit pikemaks muuta, lisades 3. etapis rohkem parameetreid (need jäävad ovaalsest kommentaatorist vasakule). Kui see ikkagi probleemi ei lahenda, peate tuvastama kattuva elemendi ja välistama selle käivitamise Google Tag Manager'is (näitame teile hiljem).

Päästiku seadistamine

Nüüd oleme valmis päästiku looma.

Minge Google Tag Manageri jaotisse "Trigger" ja valige "Uus".

Klõpsake väljal Trigger Configuration ja valige käsk >> All Elements.

Järgmisel seadistuskuval valige “Mõned klõpsud”, see tähendab, et soovite jälgida ainult teatud teie veebisaidil tehtavaid klikke.

Järgmistes konfigureerimisvalikutes valige käsk Klõpsake elementi, sobib CSS-i valijaga ja tippige eelmises sammus tuvastatud kordumatu CSS-valija.

Kui teie CSS-valija polnud vaatamata parameetrite laiendamisele ainulaadne, peaksite tuvastama sündmused, mida te ei soovi jälgida, ja looge sellele ekraanile uus reegel valikuga „ei sisalda CSS-i valijat”.

Kui kõik on seadistatud, peaks see välja nägema nagu allpool olev ekraan.

Lõpuks salvestage kõik konfiguratsioonid. Nüüd oleme valmis sildi määrama!

3. samm: sildi seadistamine

Hea uudis, selle protsessi kõige keerulisem osa on läbi. Nüüd on siin kõik mittetehniline sujuv purjetamine!

Selles etapis seadistame sildi, mis saadab sündmuse päästiku Google Analyticsi.

Nagu ma eelmisel nädalal meie postituses näitasin, minge parema navigeerimisriba abil Google Tag Manageri jaotisse „Silt” ja klõpsake ekraani ülaservas punast nuppu „Uus”.

Seadistage silt

Seadistage silt täpselt samade Google Analyticsi sätetega nagu eelmise nädala postituses, kuid seekord valige selle asemel „Sündmused”.

Sündmuste valimine võimaldab teil veel paar võimalust Google Analyticsile teada anda, mis see sündmus on. Siin on minu soovitatav viis teie ürituste korraldamiseks, kuid tulge julgelt välja omaenda struktuur:

  • Kategooria: see on sündmuse üldkategooria, olgu see siis väljaregistreerimisüritus, kaasamissündmus või nii edasi.
  • Toiming: see on selle sündmuse ajal toimunud toiming, näiteks „click_add_to_cart” või „click_video”.
  • Silt: siia paigutate sündmuse kohta lisateavet, näiteks millist toodet klõpsatakse, millist videot vaadatakse jne.
  • Väärtus: kui kasutate oma analüüsi ettevalmistamisel keerulist mikrikonversioonide väärtuse määramist, saate sellele sündmusele väärtuse määrata. Muidu soovitan selle praegu tühjaks jätta.

Kui olete sellel lehel kogu asjakohase teabe täitnud, klõpsake nuppu Salvesta. Lõpetagem päästiku seadistamine.

Ühendage silt päästikuga

See samm on lihtne. Valige sildi loomisekraanil väli „Trigger” ja valige päästik, mille me eelmistes sammudes just seadistasime. Vajutage salvestamiseks ja teie sildid on ametlikult konfigureeritud!

4. samm: silumine Google Tag Manageri eelvaate funktsiooniga

Tehniliselt peaksid kõik teie sündmused olema Google Analyticsis õigesti konfigureeritud ja aktiveeritavad. Kuid nagu iga tehnoloogia, ei juhtu see teie esimese proovimisega peaaegu kunagi.

Seetõttu vajate tööriistu, mis aitaksid teil tuvastada, kas just konfigureeritud sündmuste jälgimine töötab, ja sinna tuleb Google'i halduri eelvaatefunktsioon.

Pärast kõigi jälgitavate sündmuste seadistamist klõpsake eelvaate režiimi sisenemiseks paremas ülanurgas nuppu „Eelvaade”.

Seejärel, kui vahekaart Google Tag Manager on avatud, avage oma veebisaidi jaoks uus vahekaart. Ekraani alumises osas leiate siluri osa, mis näeb välja nagu allpool olev ekraan

Selle jaotise vasakpoolne külg kirjeldab kõiki teie veebisaidil tehtud toiminguid, parem parempoolne näitab teile, milline silt käivitas (või ei käivitanud) iga teie võetud toimingu korral.

Naaske nüüd oma sündmuste loendisse ja klõpsake igaühel neist oma veebisaidil, et kontrollida, kas teie konfigureeritud silt käivitub õigesti. Kui seda pole, minge tagasi ja kontrollige uuesti kõiki samme, et veenduda, kas kõik on õigesti konfigureeritud, ja proovige uuesti, kuni see töötab.

Kui kõik on õigesti seadistatud, minge uuesti Google Tag Manageri juurde ja edastage ning avaldage kõik sündmuste jälgimiseks tehtud muudatused. Palju õnne, olete valmis!

Kui takerdute protsessi mis tahes punkti, saatke mulle julgelt e-posti aadressil bill@humanlytics.co. Mul on rohkem kui hea meel aidata teil pilk heita ja tuvastada võimalikud vead.

Vahepeal tänan teid selle artikli lugemise eest nii palju. Kui teile see õpetus meeldis, ärge unustage jälgida meid meie meediumiväljaandes lehel Analytics inimestele, ja tellige allpool meie uudiskiri. Aitäh!

Selle artikli on koostanud Humanlytics. Kas otsite niisama rohkem sisu? Vaadake meid Twitteris ja meediumis ning liituge meie Analyticsi inimestele Facebooki kogukonnaga, et arutada veel selliseid ideid ja teemasid!