Liigu edasi põhisisu juurde
naisterahvas arvuti taga

Kas sinu veebi sisu töötab hästi või jätab lugejad külmaks? Praktiline juhend „meeldimiste“ statistika jälgimiseks Google Tag Manageri abil.

Maris Jool

Kui me ei tea, kuidas külastajad meie veebilehel käituvad, siis ei tea me ka seda, milline sisu (nt blogipostitus) neid kõnetab ja milline mitte. Samuti ei tea me, kas ja millist sisu tuleks täiustada, et see oleks külastajatele atraktiivsem. 

 

Appi tuleb võimekas ja kasutajasõbralik töövahend Google Tag Manager (edaspidises tekstis ka GTM). Käesolevas artiklis näitame, kuidas luua lihtsat ja efektiivset lahendust blogipostituste “meeldimiste” jälgimiseks. Lahendus aitab sul, lähtuvalt vaatajaskonna vajadustest, teha paremaid otsuseid sisu haldamise ja tootmise osas. Lisaks võib meeldimiste jälgimine aidata tuvastada valdkondi, kus on tarvis sisu täiustada.

 

GTM pakub kohandamis- ja integreerimisvõimalusi ning kasutajate interaktsioonide reaalajas jälgimist. Need omadused teevad sellest võimsa tööriista kasutajate käitumisest ülevaate saamiseks ja kasutajakogemuse parandamiseks. Selle abil saab lihtsasti tuvastada trende ja teha vajalikke muudatusi. 

 

Sisu kvaliteeti saame hinnata ainult kasutajate tagasiside põhjal, mida on sageli keeruline saada ja mõõta. Tüüpiliselt ei soovi kasutajad kulutada oma aega pika ja keerulise tagasiside andmiseks, kuid sellisel juhul jäävad meil ka olulised vihjed saamata. 

 

GTM on suurepärane tööriist kasutajate tegevuste jälgimiseks ja tagasiside saamiseks. Suureks plussiks on see, et turundus- ja müügitiim saab nende lahendustega ise hakkama, ilma arendajaid tülitamata :) 

 

Kõigepealt aga teeme selgeks mõned teoreetilised põhitõed.

 

Google Tag Manager (GTM) on tasuta tööriist, mis võimaldab äriarendusega tegelevatel inimestel hallata ja rakendada oma veebilehe silte ehk tage ühes kohas. Tagid on koodilõigud, mille abil saab lihtsasti jälgida külastajate tegevusi ilma arendajaid kaasamata, kuna need ei vaja JavaScripti kirjutamist. 

 

Eriti efektiivne on GTM, kui seda kasutada koos teise tööriista - Google Analyticsiga (edaspidi GA). 

 

Pilt
Google Tag Manager

Joonis 1. Google Tag Manager

 

 

Mis vahe on Google Tag Manageril (GTM) ja Google Analyticsil (GA)?

Google Analytics (GA), nagu ka Google Tag Manager (GTM), on tasuta tööriist. GA aitab analüüsida ettevõtte veebilehte või blogi ja annab tervikliku ülevaate digi- ja turunduskampaaniatest. Mõlemaid tööriistu kasutatakse sageli koos veebilehe toimivuse paremaks mõistmiseks.

 

GAd kasutatakse peamiselt veebilehe andmete analüüsimiseks, samas kui GTMi kasutatakse andmete saatmiseks GAsse. GTM on tagide juurutamiseks ja salvestamiseks kasutatav tööriist, kuid sellel ei ole aruannete analüüsimise võimekust. Seetõttu saadetakse andmed GAsse.

 

 

Google Tag Manageri (GTM) olulised omadused ja põhiline kasutusala

GTM’il on kolm peamist komponenti: 

 

  1. tag (silt) – väike Javascripti koodi osa või jälgimispiksel; 
  2. trigger (päästik) - määrab, millal, kus või kuidas tag tuleb aktiveerida;
  3. variable (muutuja) - annab tagi ja triggeri nõuetekohaseks toimimiseks vajalikku lisateavet

 

Tagid on väikesed koodilõigud, mida kasutatakse andmete kogumiseks või veebilehel konkreetsete toimingute tegemiseks. Neid saab kasutada analüütika jälgimiseks, uuesti turundamise kampaaniate seadistamiseks või isegi konversioonipikslite käivitamiseks.

 

Triggereid kasutatakse selleks, et määrata, millal tag veebisaidil käivitada. Trigger on sisuliselt tingimuste kogum, mis peab olema täidetud enne tagi aktiveerimist.

 

Variablesid kasutatakse tagides ja triggerites kasutatavate andmete salvestamiseks ja toomiseks. Neid saab kasutada teabe, näiteks konkreetse lehe URLi, nupu teksti või vormivälja väärtuse salvestamiseks.

 

GTMil on potentsiaali jälgida suurel hulgal turundustegevust, kuid enimkasutatavad funktsionaalsused on järgmised:

 

  • allalaadimised (downloads)
  • kerimised (scrolls)
  • klikid (clicks)
  • vormid (forms)
  • videod (videos)

 

 

Praktiline juhend ”meeldimiste” jälgimiseks Google Tag Manageri (GTM) abil

Teadmine, kas postitused lugejatele meeldivad või mitte, on oluline, sest aitab mõista, mis tüüpi sisu külastajaid kõnetab ja mis mitte. Seda infot saame seejärel kasutada köitvama ja asjakohasema sisu loomiseks, mis võib suurendada veebilehte külastavate inimeste arvu ja kaasata neid rohkem näiteks postitust jagama või salvestama. 

 

Lisaks võib kasutaja eelistuste mõistmine aidata tuvastada valdkonnad, mida tuleks täiustada, näiteks muuta oma postitused loetavamaks või lisada rohkem pilte. 

 

Oletame, et sul on GTM ja GA juba eelnevalt seadistatud ja vajalikud jälgimiskoodid veebilehele lisatud. Nüüd tekib soov blogipostituste „meeldimiste“ statistikat jälgida, aga eraldi nuppu pole selleks koodi kirjutatud. Sel juhul loome vastavad nupud GTMis ja saadame nende abil statistika GAsse.

 

1. Esmalt loome GTMis tagi, valides selle vasakpoolsest menüüst ja vajutades paremal üleval nurgas asuvat „New“ nuppu. 

 

Pilt
Uue tagi loomine

Joonis 2.Uue tagi loomine

 

2. Seejärel nimetame äsja loodud tagi selgelt ja arusaadavalt – näiteks „Blogi meeldimised“. Kui veebilehel on rohkelt tage, siis selge nime järgi on võimalik otsitud tag kiirelt ja efektiivselt üles leida. Kasutada saab ka otsingut, mis asub kohe „New“ nupu kõrval. 

 

Pilt
Tagile nime määramine

Joonis 3. Tagile nime määramine

 

3. Edasi valime tagi tüübi, vajutades Tag Configuration alale. Antud hetkel tuleb valida „Custom“ sektsiooni alt Custom HTML, mis lubab kopeerida juba olemasoleva HTMLi või JavaScripti koodi, mis on praeguse näite jaoks juba eelnevalt loodud.

 

Pilt
Tagi tüübi valimine

Joonis 4. Tagi tüübi valimine

 

Kuna praegu soovime luua nupud blogis „meeldimiste“ jälgimise jaoks, siis üks võimalustest on lisada thumbs up (pöial üles) ja thumbs down (pöial alla) variandid, mis näitab selgelt, kas lugejatele blogipostitus meeldib või mitte.

 

Pilt
Näide lahendusest blogis

Joonis 5. Näide lahendusest blogis

 

4. Jätkame Custom HTML tagi valimisega. Kui ala koodi lisamiseks on GTMi tekkinud, siis sinna tulebki lisada alljärgnev kood täies mahus. See kood loob soovitud blogipostitusse täpselt samasugused nupud, nagu eelnevas, pöial üles ja pöial alla, näites. 

 

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://use.fontawesome.com/fe459689b4.js"> </script>
<script>
    function feedback_thumbs_up() {
        document.getElementById("thumbs-up").className = "btn green";
        document.getElementById("thumbs-down").className = "btn";
        document.getElementById("thumbs-up").style.display = "none";
        document.getElementById("thumbs-down").style.display = "none";
        document.getElementById("thank-you-message").style.display = "block";
        document.getElementById("feedback-title").style.display = "none";
        sendThumbsUpEventToGTM('thumbs up');
    }
    function feedback_thumbs_down() {
        document.getElementById("thumbs-down").className = "btn red";
        document.getElementById("thumbs-up").className = "btn";
        document.getElementById("thumbs-down").style.display = "none";
        document.getElementById("thumbs-up").style.display = "none";
        document.getElementById("thank-you-message").style.display = "block";
        document.getElementById("feedback-title").style.display = "none";
        sendThumbsDownEventToGTM('thumbs down');
    }
    function close_modal() {
        document.getElementById("thank-you-message").style.display = "none";
        document.getElementsByClassName("thumbs_feedback")[0].style.display = "none";
    }
    function sendThumbsUpEventToGTM() { 
        dataLayer.push({ 
            'event': 'feedback', 
            'eventCategory': 'feedback', 
            'eventAction': 'click', 
            'eventLabel': 'thumbs up' 
        }); 
    }
    function sendThumbsDownEventToGTM() { 
        dataLayer.push({ 
            'event': 'feedback', 
            'eventCategory': 'feedback', 
            'eventAction': 'click', 
            'eventLabel': 'thumbs down' 
        }); 
    }
</script>

<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css' rel='stylesheet'/>
<style>

    .btn i.fa-thumbs-up:hover {
        color: #0BA875 !important;
    }

    .btn i.fa-thumbs-down:hover {
        color: #E60067 !important;
    }
</style>

<div class="thumbs_feedback">
    <div class="thumbs_feedback_title" id="feedback-title">HINDA SISU</div>
    <button class="btn" id="thumbs-up" value="" onclick="feedback_thumbs_up()">
        <i class="fa fa-thumbs-up fa-lg" aria-hidden="true" value="" for="positive"></i>
    </button>
    <button class="btn" id="thumbs-down" value="" onclick="feedback_thumbs_down()">
        <i class="fa fa-thumbs-down fa-lg" aria-hidden="true" value="" for="negative"></i>
    </button>
    <div id="thank-you-message" style="display: none">
        Aitäh tagasiside eest!
        <span class="close" onclick="close_modal()">&times;</span>
    </div>
</div>

Joonis 6. Kood antud näite jaoks

 

5. Kui kood on kopeeritud, valime triggering, mis antud koodi käivitaks.

 

Pilt
Triggering ala

Joonis 7. Triggering ala

 

Selleks loome uue triggeri, vajutades üleval paremal nurgas olevat plussmärki (+).  

 

Pilt
Uue triggeri lisamine

Joonis 8. Uue triggeri lisamine

 

6. Nii nagu tagiga, paneme ka triggerile sobiva nime. Praegu soovime teada saada, kas lugejatele blogipostitus meeldis ja selleks tuleb leida sobiv trigger. Kuna arvamuse kujundamiseks peavad külastajad lugema pealkirjast veidi kaugemale, siis sobiv aeg arvamuse küsimiseks on hetk, kui lugeja on jõudnud lugemisega poole peale.

 

GTM saab sellest aru scrollimise (allakerimise) järgi. Niisiis, selleks, et anda blogipostitusele adekvaatset hinnangut, peaks olema scrollitud vähemalt 50% sisust. 

 

Pilt
Triggeri nime määramine

Joonis 9. Triggeri nime määramine

 

7. Edasi valime triggeri tüübiks „User Engagement sektsiooni alt Scroll Depth.

 

Pilt
Triggeri tüübi valimine

Joonis 10. Triggeri tüübi valimine

 

Seadetest tuleb kindlasti valida Vertical scroll depth, mis tähendab seda, et scrollimine toimib vertikaalselt ülevalt alla. Ja eelnevalt lisatud kood peaks käivituma, kui 50% on kasutaja veebilehel alla kerinud, ehk protsendiks tuleb lisada 50. 

 

Pilt
Triggeri seadistamine

Joonis 11. Triggeri seadistamine

 

Ülejäänud seaded võib jätta samaks. Kindlasti tuleb muudatused ka salvestada, vajutades „Save“.

 

8. Loome ka uue variable, kuna tegemist on 2 erineva nupuga, mille jaoks tuleb info eraldi edastada GAsse. Selleks vajutame paremal pool User-Defined Variables sektsiooni kõrval, paremal pool olevat “New” nuppu.

 

Pilt
Uue variable lisamine

Joonis 12. Uue variable lisamine

 

See peab olema seadistatud ja nimetatud täpselt samamoodi, nagu on näha alloleval joonisel 13. See on oluline, kuna eelnevalt lisatud koodi on lisatud samad väärtused, mille järgi GTM infot saab. 

 

Variable TypeData Layer Variable
Data Layer Variable Name Event Label
Data Layer Version – Version 1

 

Pilt
Uue variable nimetamine ja seadistamine

Joonis 13. Uue variable nimetamine ja seadistamine

 

9. Seejärel loome uue tagid, et saata nuppude klikkimise info Google Analyticsisse ja selleks tuleb valida Tag Configuration valikust, Featured sektsiooni alt: Google Analytics: GA4 Event. Järgevad sammud tuleb lisada alljärgnevalt (vt ka joonis 14):

 

Configuration Tag’i valikust tuleb esmalt valida None Manually Set ID ja sisestada enda GA4 konto Measurement ID.

 

Seejärel:

 

Event name – Thumbs up
Category – feedback
Action – click
Label – thumbs up


 

Pilt
Uue „Thumbs up“ nupu tagi seadistamine

Joonis 14. Uue „Thumbs up“ nupu tagi seadistamine

 

Triggering ala peale vajutades tuleb luua uus trigger, milleks on Thumbs up nupu klikkimine. 

 

Esmalt tuleb määrata triggerile nimi, milleks võib olla Thumbs up nupu klikkimine. 
Seejärel Trigger Configuration alale vajutades tuleb triggeri tüübiks valida Click sektsiooni alt All elements.

 

Järgnevad sammud tuleb teha täpselt nagu alljärgneval pildil, et trigger töötaks korrektselt:

 

  1. This trigger fires on – Some clicks
  2. Fire this trigger when an Event occurs and all of these conditions are true – esimesse lahtrisse tuleb valida Click Classes, kui seda kohe ei leia, siis tuleb klikata Choose Built-In variable peale, kus valikust leiab Click Classes. Järgmisesse lahtrisse tuleb valida „equals“ ja viimasesse lisada „fa-fa-thumbs-up fa-lg“, see tuleb kopeerida täpselt, sest selle klassi järgi saab GTM aru, et klikati just Thumbs up nuppu. 

 

Pilt
Uue „Thumbs up“ nupu triggeri seadistamine

Joonis 15. Uue „Thumbs up“ nupu triggeri seadistamine 

 

10. Seejärel tuleb antud tegevust korrata ning luua tag Thumbs down“ nupu jaoks.

 

Pilt
Uue „Thumbs down“ nupu tagi seadistamine

Joonis 16. Uue „Thumbs down“ nupu tagi seadistamine

 

Triggering ala peale vajutades tuleb luua uus trigger, milleks on Thumbs down nupu klikkimine. 

 

Esmalt tuleb määrata triggerile nimi, milleks võib olla Thumbs down nupu klikkimine. Seejärel Trigger Configuration alale vajutades tuleb triggeri tüübiks valida Click sektsiooni alt All elements.

 

Järgnevad sammud tuleb teha täpselt nagu alljärgneval pildil, et trigger töötaks korrektselt:

 

  1. This trigger fires on – Some clicks
  2. Fire this trigger when an Event occurs and all of these conditions are true – esimesse lahtrisse tuleb valida Click Classes, kui seda kohe ei leia, siis tuleb klikata Choose Built-In variable peale, kus valikust leiab Click Classes. Järgmisesse lahtrisse tuleb valida „equals“ ja viimasesse lisada „fa-fa-thumbs-down fa-lg“, see tuleb kopeerida täpselt, sest selle klassi järgi saab GTM aru, et klikati just Thumbs down nuppu. 

 

Pilt
Uue „Thumbs down“ nupu triggeri seadistamine

Joonis 17. Uue „Thumbs down“ nupu triggeri seadistamine 

 

11. Viimase tegevusena, kui kõik ülalmainitud sammud on järgitud, salvestatud ja kõik on nimetatud korrektselt, vajutame “Submit.

 

Lõpptulemus jääb selline:

 

Pilt
Näide lõplikust lahendusest

Joonis 18. Näide lõplikust lahendusest

 

 

Loodud lahenduse testimine ja kontrollimine

Kui kõik ülaltoodud sammud on tehtud, siis on aeg kontrollida, kas kõik ilusti töötab ja kas info saadetakse GAsse. Selleks vajutame GTMis WORKSPACE menüül „Preview“ nuppu. 

 

Pilt
eelvaate nupp

Joonis 19. Eelvaate nupp

 

Seejärel suunduma soovitud veebilehele ja teeme hard refresh ehk vajutame refresh hoides all Shifti või CRTL+F5. Lehe laadimise tulemusena peaks olema just tehtud tagid näha sektsioonis Tags Fired. Kui blogis vajutada Thumbs up või Thumbs down nuppe, siis peaks olema vaade selline (vastavalt nähtav siis Thumbs up või Thumbs down nupu tag):

 

Pilt
Kontrollimine, kas lahendus töötab

Joonis 20. Kontrollimine, kas lahendus töötab

 

Kui kõik lisatud tagid on kenasti töökorras, siis kontrollime, kas vastav info jõudis ka GAsse. 

 

Oluline on teada, et GA värskendab GTMilt saadud andmeid peaaegu reaalajas. See tähendab, et pärast nupuvajutust peaks trigger käivituma ja andmeid GAsse saatma. Andmete töötlemiseks ja GA aruannetes kuvamiseks võib siiski kuluda veidi rohkem aega, kuna GA kasutab suurte andmemahtude koondamiseks valimit.

 

Et tulemust kiiresti näha, valime vasakpoolsest menüüst otsime Event Count by Event Name sektsiooniSiin on näha, kas nupuvajutuse andmed jõuavad ilusti GAsse. Kui kõik toimib, siis on näha loodud eventi (vt joonis 19).

 

Pilt
Tulemuste vaatamine

Joonis 21. Tulemuste vaatamine

 

Kui aega on lisamisest möödas juba rohkem kui 48h, on võimalik detailsemaid tulemusi näha vasakpoolsest menüüst valides Engagement – Events.

 

Tagide, triggerite ja variablede seadistamine GTMis võib tunduda keeruline, eriti neile kes on platvormil uued, kuid harjutades ja kogemusi saades muutub see lihtsamaks. Seadistuse rakendamiseks ja silumiseks on oluline omada selget arusaama oma eesmärkidest ja olla kursis terminoloogiaga.

 

Loodame, et meie praktiline juhend aitab sind sinu töös ja muudab veebilehe andmete jälgimise protsessi sujuvamaks, hõlbustab statistika kogumist ja kampaaniate optimeerimist. Ja seda kõike ilma tehnilisi teadmisi vajamata :)

 

 


 

Lisa kommentaar

Plain text

  • HTML elemendid keelatud.
  • Automaatne rea- ja lõiguvahetus
  • Veebilehtede aadressid ja e-posti aadressid muutuvad automaatselt linkideks.