Ärianalüütika

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.

8. August 2023 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 tag'e ühes kohas. Tag'id 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).

Joonis 1. Google Tag Manager

Mis vahe on Google Tag Manager'il (GTM) ja Google Analytics'il (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 tag'ide juurutamiseks ja salvestamiseks kasutatav tööriist, kuid sellel ei ole aruannete analüüsimise võimekust. Seetõttu saadetakse andmed GAsse.

Google Tag Manager'i (GTM) olulised omadused ja põhiline kasutusala

GTM’il on kolm peamist komponenti:

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

Tag'id 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.

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

Variables'id kasutatakse tag'ides ja trigger'ites 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 Manager'i (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.

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

Joonis 2. Uue tag'i loomine

Seejärel nimetame äsja loodud tag'i selgelt ja arusaadavalt – näiteks „Blogi meeldimised“. Kui veebilehel on rohkelt tag'e, 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.

Joonis 3. Tag'ile nime määramine

Edasi valime tag'i 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.

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.

Joonis 5. Näide lahendusest blogis

Jätkame Custom HTML tag'i 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.

Kood antud näite jaoks:

<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()">×</span>
</div>
</div>

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

Joonis 6. Triggering ala

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

Joonis 7. Uue trigger'i lisamine

Nii nagu tag'iga, paneme ka trigger'ile 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.

Joonis 8. Trigger'i nime määramine

Edasi valime trigger'i tüübiks „User Engagement“ sektsiooni alt Scroll Depth.

Joonis 9. Trigger'i 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.

Joonis 10. Trigger'i seadistamine

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

Loome ka uue variable'i, 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.

Joonis 11. Uue variable'i 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 Type – Data Layer Variable
Data Layer Variable Name – Event Label
Data Layer Version – Version 1

Joonis 12. Uue variable'i nimetamine ja seadistamine

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

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

Joonis 13. Uue „Thumbs up“ nupu tag'i seadistamine

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

Esmalt tuleb määrata trigger'ile nimi, milleks võib olla Thumbs up nupu klikkimine.

Seejärel Trigger Configuration alale vajutades tuleb trigger'i tüübiks valida Click sektsiooni alt All elements.

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

This trigger fires on – Some clicks
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.

Joonis 14. Uue „Thumbs up“ nupu trigger'i seadistamine

Joonis 15. Uue „Thumbs down“ nupu tag'i seadistamine

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

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

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

This trigger fires on – Some clicks
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.