Kuinka seurata verkkosivustosi tapahtumia Google Tag Manager -sovelluksen avulla

Vaiheittainen opas, mitään koodausta ei tarvita

Viimeisessä artikkelissa opasimme sinua kuinka määrittää Google Analytics Google Tag Manager -sovelluksen avulla seuraamaan kaikkia verkkosivustosi käyttäjien sivukäyntejä (sivun katseluja).

Monissa tilanteissa haluat kuitenkin seurata käyttäjien käyttäytymistä sivuillasi, kuten “Lisää ostoskoriin” -painikkeen napsautuksia, lomakkeita tai videonäkymiä.

Kaikkia näitä käyttäytymisiä kutsutaan tapahtumiksi, ja tänään aiomme näyttää sinulle, kuinka nämä tapahtumat lähetetään Google Analyticsille Google Tag Manager -sovelluksen kautta.

VAROITUS: Tämä opetusohjelma olettaa, että sinulla on Google Tag Manager ja Google Analytics määritetty verkko-omaisuudellesi. Jos et ole vielä tehnyt niin, tarkista viimeinen artikkeli, joka on linkitetty tämän viestin alussa, asettaaksesi ne.

Taistelusuunnitelma

Aloitetaan tavallisesti taistelusuunnitelmalla, joten tiedämme tarkalleen mitä olemme tekemässä:

  • Ensin kootaan luettelo tapahtumista, joita haluamme seurata.
  • Toiseksi asetamme tapahtumalaukaisimet jokaiselle tapahtumalle, jota haluat seurata verkkosivustollasi, CSS Element Selectors -nimisen työkalun avulla.
  • Kolmanneksi, me perustamme tunnisteet jokaiselle tapahtumalle lähettämään kyseisiin tapahtumiin liittyvät tiedot Google Analyticsille.
  • Viimeinkin käytämme Google Tag Manager -sovelluksen esikatseluominaisuutta varmistaaksemme, että kaikkia tapahtumia seurataan oikein.

Tässä oppaassa suosittelemme Google Tag Manager -sovelluksen käyttöä tapahtumien seurantaan seuraavista kolmesta syystä:

  • Tämä lähestymistapa ei edellytä minkään koodin lisäämistä verkkosivustollesi, mikä helpottaa toteutusta huomattavasti, jos sinulla ei ole teknistä henkilöä joukkueessasi.
  • Google muuttaa jatkuvasti seurantamekanismiaan, ja he julkaisevat uuden seurantakoodikirjaston, nimeltään gtag.js, parin seuraavan kuukauden aikana. Google Tag Manager -sovelluksen avulla voit välttää vaivaa menemästä koodikantasi uudelleen ja muuttaa seurantamekanismia aina, kun ne päivitetään.
  • Google Tag Manager tarjoaa sinulle helpomman käyttöliittymän, jonka avulla voit seurata tapahtumia. Tämä käyttöliittymä auttaa sinua pysymään järjestäytyneenä, jos seuraat paljon tapahtumia verkkosivustollasi.

Vaihe 1: Koota tapahtumaluettelo

Ensimmäinen vaihe tapahtumaseurannan asettamisessa on tunnistaa mitä tapahtumia haluamme seurata.

Minulla oli valtava seurata kaikkea -lähestymistapaa, joka kannattaa jokaisen verkkosivustollasi tapahtuvan tapahtuman seurantaa.

Tämän lähestymistavan etuna on, että se auttaa sinua ymmärtämään kokonaiskuvan verkkosivustosi käyttäjäkokemuksesta. Ihmisenä, joka tulee tietotieteellisestä taustasta, rakastan ajatusta kaikesta tiedosta.

Tämän lähestymistavan haittapuolena on kuitenkin se, että datan määrä on todella helppo hämmentyä ja yliarvioida todellinen yritysarvo, joka kuluttaa (tai analyytikosi) aikaa sivusi jokaisen elementin analysoimiseen.

Pienille ja keskisuurille yrityksille en suosittele tätä tapaa seurata tapahtumiasi. Suuremmille yrityksille suosittelen silti Google Analyticsin käytön sijasta investointeja kehittyneempiin käyttäytymisen seurantatyökaluihin, kuten Hotjar (tapahtumien lämpökartoitus) ja Heap Analytics (tapahtumasuppilon seurantaan).

Äskettäin minusta on tullut valtava “makro- ja mikromuunnos” -lähestymistavan fani, joka kannattaa vain makro- ja mikrotulos tapahtumien seurantaa verkkosivustollasi.

Tämä lähestymistapa ymmärtää kaikkien verkkosivustojen tapahtumien analysoinnin mahdollisen ylikuormituksen ja opettaa sen sijaan analyytikoita tallentamaan vain pieni luettelo tapahtumista, joilla on sinulle liiketoiminta-arvoa.

Nämä tapahtumat voivat olla makronmuutostapahtumia, ts. Tapahtumia, jotka asiakkaidesi täytyy käydä läpi joko ostaaksesi tai lähettääksesi lomakkeen. Ne voivat olla myös mikromuutostapahtumia, jotka osoittavat yleisösi entistä aktiivisemman sitoutumisen. Niihin voi sisältyä painikkeiden napsautuksia, kuten uutiskirjeen tilaaminen tai tuotetietojen tarkasteleminen verkkosivustollasi.

Koota lyhyt luettelo verkkosivustosi makro- ja mikromuunnostapahtumista (mieluiten alle kymmenen) yllä olevan kuvauksen perusteella. Sitten olemme valmiita siirtymään seuraavaan vaiheeseen, jossa tapahtumien seuranta todella asetetaan.

Vaihe 2: Tapahtuma laukaisee

Aloitetaan lyhyesti lyhyesti siitä, mistä keskustelimme liipaisimista viime viikolla.

Google Tag Manager seuraa oletuksena kaikkia verkkosivustoosi liittyviä tapahtumia ja sivukäyntejä automaattisesti. Se ei kuitenkaan tallenna mitään näistä tiedoista, ellet sano sen tekevän niin. Liipaisimet ovat tapa, jolla voit kehottaa GTM: tä seuraamaan tiettyjä tapahtumia ja sivun katseluja, jotka haluat lähettää Google Analyticsille tai muille palveluille.

Siksi meidän on kerrottava Google Tag Managerille, että haluamme lähettää edellisessä vaiheessa kerätyt tapahtumat Google Analyticsille. Tätä varten käytämme jotain, jota kutsutaan CSS-elementin valitsijaksi.

Lyhyt esitys tapahtumien valitsemisesta

Seuraavien tapahtumien tunnistamiseksi on hyödyllistä ymmärtää käsitteellisesti, kuinka nämä painikkeet koodataan verkkosivustollesi ja kuinka nämä elementit valitaan.

Verkkosivustollasi kaikki elementit koodataan HTML-tunnisteilla, joiden rakenne on esitetty alla:

HTML-tunnisteessa on useita avainkomponentteja:

  • Tunnisteen nimi, joka määrittelee tämän nimenomaisen tunnisteen toiminnon verkkosivustosi yleisessä kontekstissa. Tässä tapauksessa ”h1” tarkoittaa ”ensimmäistä otsikkoa”.
  • Attribuutin nimi, joka määrittelee otsikosta lisätietoja, kuten sen luokan (käytetään samanlaisten määritteiden tunnisteiden ryhmittelyyn), tunnuksen (käytetään tunnisteiden yksilöivänä tunnisteena) ja tyylien.
  • Vaikuttava sisältö on teksti, joka näytetään verkkosivustolla joko painikkeena tai kappaleena.

Tunnisteen nämä komponentit huomioon ottaen CSS-elementin valitsin on hakukieli, jolla voit systemaattisesti tunnistaa tietyt HTML-tunnisteet verkkosivustollasi.

Esimerkiksi grafiikassa esitetty HTML-tunniste voidaan valita seuraavan yksinkertaisen kyselyn ”h1.primary” avulla.

Lisätietoja CSS-valitsimen syntaksista saat käyttämällä alla olevaa linkkiä.

Ota Elementin valitsin käyttöön Google Tag Manager -sovelluksessa

Nyt kun olemme ymmärtäneet käsitteellisesti, kuinka voimme valita tapahtumamme, kädet likaantuvat.

Google Tag Manager antaa sinun tunnistaa verkkosivustosi tapahtumat tapahtumien eri määritteiden perusteella (he kutsuvat näitä ominaisuuksia ”muuttujiksi”). Voit saada luettelon kaikista sen sisäänrakennetuista muuttujista Google Tag Manager -sovelluksen muuttuja -> määritä -painikkeella.

Kuten yllä olevasta kuvakaappauksesta voidaan nähdä, Google Tag Manager tarjoaa erittäin kattavan luettelon sisäänrakennetuista muuttujista, joiden avulla voit tunnistaa tapahtumat, alkion napsauttamisesta lomakkeen lähettämiseen.

Tässä opetusohjelmassa keskitymme yhteen perusteellisimpiin tapahtumiin - napsauttamiseen.

Tämän suorittamiseksi aiomme käyttää napsautuselementti-muuttujaa. Voit ottaa sen käyttöön yllä olevassa näytössä valitsemalla ”Napsauta elementti” vieressä olevan valintaruudun (voit ottaa käyttöön myös muut Napsautukset-luokan ruudut salliaksesi enemmän vaihtoehtoja tapahtuman valinnan aikana).

Tunnista tapahtumiesi CSS-valitsin

Nyt meidän on tunnistettava jokaisen tapahtumamme ainutlaatuinen CSS-valitsin.

Tätä varten pyydämme Google Chrome Web Development Tool -apua, joka on joukko työkaluja, joihin sinulla on automaattisesti käyttöoikeus, jos sinulla on Google Chrome.

Aiomme käyttää Google Merchandise Store -esimerkkiä.

Kun käyttäjä napsauttaa tietyn tuotteen lisäosa-painiketta Google-tavarakaupassa, lisäosa-toiminto suoritetaan sivulla sen sijaan, että ohjaisi käyttäjät erilliselle sivulle. Siksi tätä napsautusta on seurattava mikrotulostapahtumana.

Kun olet tietyllä näytöllä (voit seurata tätä linkkiä), napsauta hiiren kakkospainikkeella ja valitse avattavasta valikosta ”tarkasta”. Näytön oikealta puolelta aukeaa konsolin sivupaneeli, joka näyttää alla olevalta kuvakaappaukselta.

Kuten kuvakaappauksen ohjeet selittävät, sinun tulisi ensin napsauttaa konsolin vasemmassa yläkulmassa olevaa elementinvalintakuvaketta. Sitten vie hiiri kiinnostavan elementin päälle kohdistimella, napsauta sitä, ja CSS-tunnuksesi löytyy konsolin oikealta puolelta.

Lopuksi, käytä konsoli-kyselyä document.querySelectorAll varmistaaksesi, että vain yksi tulos on palautunut, joten CSS-valitsin on ainutlaatuinen (yleensä tämä tapahtuu). Täällä sinulla on CSS-valitsin.

Loppusanat Jos CSS-valitsin ei ole ainutlaatuinen, yritä tehdä CSS-valitsimesta pidempi lisäämällä lisää parametreja vaiheessa 3 (ne ovat soikean merkinnän vasemmalla puolella). Jos se ei edelleenkään ratkaise ongelmaa, sinun on tunnistettava päällekkäinen elementti ja suljettava se pois Google Tag Manager -käynnistyksestä (näytämme sinulle myöhemmin).

Liipaisimen asettaminen

Nyt olemme valmiita luomaan liipaisimen.

Siirry Google Tag Manager -sovelluksen käynnistysosaan ja valitse Uusi.

Napsauta Trigger Configuration -ruutua ja valitse napsauta >> All Elements.

Valitse seuraavassa asennusnäytössä ”Jotkut napsautukset”, mikä tarkoittaa, että haluat seurata vain tiettyjä verkkosivustollasi tapahtuvia napsautuksia.

Valitse seuraavissa määritysvaihtoehdoissa Napsauta elementtiä, Vastaa CSS-valitsinta ja kirjoita edellisessä vaiheessa yksilöimäsi ainutlaatuinen CSS-valitsin.

Jos CSS-valitsimesi ei ollut ainutlaatuinen parametreiden laajentamisesta huolimatta, sinun tulisi tunnistaa tapahtumat, joita et halua seurata, ja luoda uusi sääntö tähän ruutuun vaihtoehdolla ”ei sisällä CSS-valitsinta”.

Kun kaikki on määritetty, sen pitäisi näyttää alla olevalta näytöltä.

Tallenna lopuksi kaikki kokoonpanot. Nyt olemme valmiita asettamaan tunnisteen!

Vaihe 3: Tunnisteen asettaminen

Hyvät uutiset, tämän prosessin monimutkaisin osa on ohi. Nyt se on kaikki ei-teknistä sujuvaa purjehdusta täältä!

Tässä vaiheessa asetamme tunnisteen, joka lähettää tapahtuman liipaisimen Google Analyticsille.

Kuten osoitin viime viikolla viestissämme, siirry Google Tag Manager -sovelluksen kohtaan oikealla navigointipalkilla ja napsauta näytön yläosassa olevaa punaista Uusi-painiketta.

Määritä tunniste

Määritä tunniste tarkalleen samoilla Google Analytics -asetuksilla kuin viime viikon viesti, mutta valitse tällä kertaa sen sijaan Tapahtumat.

Tapahtumien valitseminen antaa sinulle vielä muutaman vaihtoehdon kertoa Google Analyticsille, mikä tämä tapahtuma on. Tässä on suositeltava tapa organisoida tapahtumasi, mutta keksi vapaasti oma rakenne:

  • Luokka: Tämä on tapahtuman kokonaisluokka, onko kyseessä uloskirjautumistapahtuma, kiintotapahtuma tai niin edelleen.
  • Toimi: Tämä on tapahtuma, joka tapahtui tämän tapahtuman aikana, kuten “click_add_to_cart” tai “click_video”.
  • Etiketti: Tähän voit sijoittaa lisätietoja tapahtumasta, kuten mitä tuotetta napsautetaan, mitä videota katsotaan jne.
  • Arvo: Jos käytät hienostunutta mikromuunnoksen arvonmääritystä analyysihankkeessasi, voit määrittää arvon tälle tapahtumalle. Muutoin suosittelen, että jätät tämän tyhjäksi.

Kun olet täyttänyt kaikki tällä sivulla olevat asiaankuuluvat tiedot, napsauta Tallenna. Nyt lopetetaan liipaisimen asettaminen.

Yhdistä tag liipaisimeen

Tämä vaihe on yksinkertainen. Valitse ”Trigger” -ruutu tunnisteiden luonti -näytössä ja valitse liipaisin, jonka olemme juuri asettaneet edellisissä vaiheissa. Hit tallenna, ja tunnisteesi on määritetty virallisesti!

Vaihe 4: virheenkorjaus Google Tag Manager -sovelluksen esikatselutoiminnolla

Teknisesti kaikki tapahtumisi tulisi määrittää ja käynnistää oikein Google Analyticsissa. Kuten jokainen tekniikka, tätä ei kuitenkaan koskaan tapahdu ensimmäisen yrittämisen yhteydessä.

Siksi tarvitset työkaluja, joiden avulla voit selvittää, toimiiko juuri määrittämäsi tapahtumaseuranta, ja tässä Google Tag Manager -sovelluksen esikatselutoiminto tulee käyttöön.

Kun olet määrittänyt kaikki seurattavat tapahtumat, napsauta “Esikatselu” -painiketta oikeassa yläkulmassa siirtyäksesi esikatselutilaan.

Kun sitten Google Tag Manager -välilehti on auki, avaa uusi välilehti verkkosivustollesi. Löydät virheenkorjausosan näytön alaosasta, joka näyttää alla olevalta näytöltä

Tämän osan vasen puoli kuvaa kaikkia verkkosivustossasi tekemiäsi toimia, kun taas oikea puoli kertoo, mikä tunniste laukaisi (tai ei lauennut) jokaisessa tekemässäsi toiminnassa.

Palaa nyt olemassa olevaan tapahtumaluetteloon ja napsauta kutakin niistä verkkosivustollasi tarkistaaksesi, ampuuko määritetty tunniste oikein. Jos ei ole, palaa takaisin ja tarkista kaikki vaiheet varmistaaksesi, että kaikki on määritetty oikein, ja yritä uudelleen, kunnes se toimii.

Kun kaikki on määritetty oikein, palaa jälleen Google Tag Manager -sovellukseen ja lähetä ja julkaise kaikki tapahtuman seurantaa varten tekemäsi muutokset. Onnittelut, olet valmis!

Jos takertuit missä tahansa prosessin vaiheessa, lähetä sähköpostia minulle bill@humanlytics.co. Autan enemmän kuin mielellään katsomaan ja tunnistamaan mahdolliset virheet.

Samaan aikaan kiitos paljon tämän artikkelin lukemisesta. Jos pidit tästä opetusohjelmasta, älä unohda seurata meitä Analytics for Humans-julkaisun Medium-julkaisussa ja tilata alla oleva uutiskirje. Kiitos!

Tämän artikkelin on tuottanut Humanlytics. Etsitkö lisää sisältöä juuri tältä? Katso meidät Twitterissä ja Mediumissa ja liity Analytics ihmisille-Facebook-yhteisöön keskustelemaan lisää ideoista ja tämänkaltaisista aiheista!