Tartalom

Az 5. oldal tartalma

Folytatás

Az előző oldalon Drupal típusú CMS rendszeren hajtottuk végre a Matomo (Piwik) követőkódjának beépítését, most pedig megnézzük hogyan tudjuk egyedileg készített weboldalakba is beilleszteni a JavaScript kódokat.

Követőkód elkészítése

Ebben a fejezetben lépésről lépésre készítünk el egy összetettebb követőkódot, amivel átfogó és pontos statisztikai adatokat szerezhetünk weboldalunk forgalmáról. Ezt a részt akkor is érdemes átfutni, ha valamelyik tartalomkezelő rendszert használjuk, mert az abban lévő Matomo bővítmény nem ismeri az összes beállítást, viszont lehetőséget biztosít egyedi kódok elhelyezésére, ahol az itt megismert beállításokat elhelyezhetjük.

Az alapkód

Először szerezzük be az alapkódot, amit a Matomo beállítások oldalán tehetünk meg. Ehhez kattintsunk a jobb felső sarokban lévő fogaskerékre, majd lejjebb bal oldalon lépjünk a "Weboldalak" kategóriában a "Követőkód" menüpontra.

Görgessünk lejjebb a JavaScript Követés részig:

Itt találunk néhány beállítást, amiket ha bekapcsolgatunk, akkor a lejjebb lévő követőkód példányba bekerülnek a megfelelő sorok:

Itt most számunkra az alapkód a lényeg, tehát a következő:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Matomo -->
<script type="text/javascript">
  var _paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//192.168.1.120/matomo/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '3']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

Ebből amit egyedileg kell beállítanunk, az a 8. és a 10. sorban van: a 8. sorban adhatjuk meg a saját Matomo példányunk elérési útvonalát, a 10. sorban pedig a mérni kívánt weboldal ID-jét. Az összes többi rész ebben a kódban már általános, tehát minden kódpéldánynál ugyanaz (illetve lesznek még olyan beállítások, amiket szintén egyedileg kell megadnunk). Ezzel a kóddal már működik egy normális használatú weboldal forgalom mérés, azonban még sok beállítási lehetőség van – amiknek egy részét korábban már megismerhettünk a különböző CMS rendszerek bővítményei által  –, ezek közül a fontosabbakat itt most átnézzük.

Matomo beállításai

Első körben haladjunk végig a Matomo felületén kapcsolgatható követőkód beállításokon, csak most JavaScript kódok szemszögéből.

Aldomainek követése

Ha szeretnénk, hogy a látogatókat mérje a rendszer az összes aldomainen (ha több is van), akkor helyezzük be ezt a kódsort az alapkód 5. sorában lévő trackPageView sor elé:

  _paq.push(["setCookieDomain", "*.domainnev.tld"]);

Itt természetesen állítsuk be a mérni kívánt weboldal domain nevét.

Domain név hozzáfűzése a címhez

Ezzel a funkcióval a Matomo a statisztikálban megjelenő címek elé, vagy utána fűzi a domain nevet is:

  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);

Ezt is a trackPageView sora elé kell tenni.

Ismert domain nevek

A setDomains funkcióval szabályozhatjuk, hogy mely domainek, aldomainek, alkönyvtárak, stb tartoznak a webhelyhez. Így ha ezek valamelyikén történik egy látogatás, vagy bármilyen esemény, az nem fog kilépési oldalnak számítani a statisztikákban. Minden ezeken kívül eső látogatás (pl. kimenő linkekre kattintás) kilépési oldalnak számít.

  _paq.push(["setDomains", ["*.domain.tld"]]);

Ezt is a trackPageView sora elé kell tenni.

JavaScript nélküli követés

Lehetőség van olyan látogatások mérésére is, ahol nem futnak JavaScript kódok. Ez egy <noscript> résszel oldható meg:

<noscript><p><img src="//192.168.1.120/matomo/matomo.php?idsite=3&amp;rec=1" style="border:0;" alt="" /></p></noscript>

Ezt a sort az alapkód végére kell tenni a </script> sora után. Továbbá helyettesítsük be a saját Matomo példányunk elérési útvonalát, valamint az idsite=3 paramétert módosítsuk a saját Matomo rendszerünkben lévő weboldal ID-vel – ahogyan az alapkódban is tettük.

Egyedi változók követése

A setCustomVariable függvénnyel egyedi változókat is elhelyezhetünk a kódban, amivel személyre szabottabb méréseket végezhetünk:

  _paq.push(["setCustomVariable", 1, "valtozo", "ertek", "visit"]);

Ahol az paraméterek jelentése a következő:

• setCustomVariable: Maga a függvény, amit meghív a JavaScript követőkód
• 1: Változó indexe/helye. Itt 1-5 -ig helyezhetünk el változókat. Ugyanazt a változót mindig ugyanarra az indexre tegyük. Így 5 különböző változót helyezhetünk el.
• ertek: A változónak adott érték. Itt például PHP-ből generált értékeket adhatunk át a kódnak.
• visit: Ez pedig a változó hatásköre. Ha "visit"-re állítjuk, akkor a változó az egész látogatási munkamenetre érvényes lesz. Pl. a felhasználó nevét, stb adhatjuk meg. Ha pedig itt "page" hatókört adunk meg, akkor a látogatáson belüli oldalletöltésekre külön értékeket továbbíthatunk, ami oldalletöltésenként eltérő lehet. Például a megtekintett oldallal kapcsolatos adatok: Blog oldal címe, szerzője, vagy akár egy webáruházban lévő termék termékkódja, stb.

Az így elhelyezett változókat a látogatások során a Matomo szerver begyűjti, majd a statisztikákban lehet rájuk szűrni, csoportosítani, stb.

Ezt is a trackPageView elé kell tenni.

Kliens oldali DoNotTrack engedélyezése

Lehetőséget biztosíthatunk a kliens oldalról is a követések kikapcsolására, ha ezt a sort betesszük a kódba a trackPageView elé:

  _paq.push(["setDoNotTrack", true]);

Követő sütik tiltása

  _paq.push(["disableCookies"]);

Ha elhelyezzük ezt a sort a követőkódban (szintén a trackPageView elé), akkor letilt minden követő sütit. A már meglévő sütik a következő oldalbetöltéskor törlődni fognak.

Marketing kampányok követése

Követhetjük saját marketing kampányainkat is, például hírleveleinket és egyéb fizetős hirdetéseinket is. Ehhez meg kell adnunk az adott kampány nevét, és hozzá egy kulcsszót. Ezek alapján azonosítja be a rendszer a statisztika számára, hogy honnan érkezett a látogató. A követőkódban két sort kell elhelyeznünk a trackPageView elé:

  _paq.push(["setCampaignNameKey", "kampanyneve"]);
  _paq.push(["setCampaignKeywordKey", "kulcsszo"]);

Majd az adott kampány linkjeibe (pl. hírlevél) így kell betennünk az oldalunk URL címét (példa):

http(s)://weboldalam.hu/erkezesi_oldal.php?pk_campaign=kampanyneve&pk_kwd=kulcsszo

Ekkor a Matomo szerver beazonosítja a kampányt, és társítja a megfelelő helyre a statisztikákban. Természetesen az érkezési oldalon bent kell lennie a forrásban ennek a követőkód kiegészítésnek.

További részletek erről...

Események és célok

Esemény követése

A mai modern weboldalakon már nem minden esemény idéz elő egy teljes oldalletöltést. Így például egy JavaScript linkre történő kattintás nem tölti be az oldalt, ezért a követőkód sem fut le újra, csak amikor az elején betöltődik a teljes oldal. Ezért lehetőségünk van ezeket a JavaScript kattintási eseményeket is külön követnünk, amik a Matomo statisztikai felületein is eltérő megjelenéssel rendelkeznek. Ehhez mindössze annyit kell tenni, hogy az oldal elején kerüljön betöltésre legalább az alap követőkód, majd a JavaScript linket pedig így készítsük el:

<a href="#" onclick="_paq.push(['trackEvent', 'Kategória', 'Érték']);">Linkszöveg</a>

Ahol a Kategória helyén megadhatunk egy magunk számára megkülönböztető azonosítót, például hogy hol történt a kattintás (Menü, terméklista, lábléc, stb), az Érték helyén pedig megadhatunk egy egyedi azonosítót, például egy webáruház termék oldalán elhelyezett megjelenítő link esetén a termék nevét vagy kódját, stb. Ekkor a Matomo szerver gyűjteni fogja ezeket a független kattintási eseményeket is.

Cél követése

A Matomo rendszerben a célok segítségével különböztethetjük meg a látogatások azon részét, amiknél a látogató egy adott URL címen egy meghatározott akciót hajt végre. Ilyenek lehetnek például egy hírlevél feliratkozás, regisztráció, letöltés, vásárlás, stb az oldalon. A célokat a Matomo felületén kell felvinni, ahol be kell állítani a cél teljesülésének feltételeit, mint például az URL címben szereplő mintát, valamint a feltételnek megfelelő URL címen történő aktivitást (linkre kattintás, letöltés, X idő eltöltése az adott oldalon, külső hivatkozásokra kattintás, stb). Ha ezek teljesülnek, a cél létrejön a Matomo statisztikáiban. Azonban vannak esetek, amikor ezekkel a kritériumokkal nem lehet követni egy célt, ilyenek lehetnek például:

• Amikor a felhasználó elküld egy űrlapot
• Amikor a felhasználó megnéz egy videót
• Amikor a felhasználó checkout-ol a kosarából
• stb.

Az ilyen esetekre – az eseményekhez hasonlóan – el lehet helyezni külön aktiváló részt, ami kiváltja a megadott célt.

Ehhez itt is arra van szükség, hogy az oldal teljes betöltődésekor bent legyen a Matomo követőkódja, valamint a szükséges helyen el kell még helyezni az aktiváló részt. Ezt be lehet tenni például egy HTML űrlap onsubmit eseményébe, vagy a fentebbi esemény-hez hasonlóan egy link onclick részébe:

<form onsubmit="_paq.push(['trackGoal', 1]);">
   ...
</form>

vagy

<a onclick="_paq.push(['trackGoal', 1]);">Linkszöveg</>

Ahol a trackGoal függvénynév után kell megadni a már előre felvitt cél ID-t.

További beállítások

Pontos mérés

Két oldalletöltés között egyszerűen kiszámítható az (első) oldalon eltöltött idő. Azonban az utolsó oldalon történő tartózkodás idejét nem tudhatjuk, hogy mikor hagyta el a látogató az oldalunkat. Erre kínál megoldást a enableHeartBeatTimer opció. Ennek a lényege, hogy a megadott időközönként a böngésző egy "életjelet" küld a Matomo szervernek, így az oldal elhagyása előtt is kaphatunk visszajelzést. Ehhez a következő sort kell betennünk:

_paq.push(['enableHeartBeatTimer', x]);

Ahol az x helyén kell megadni, hogy hány másodpercenként küldje az életjelet a szervernek.

Itt vegyük figyelembe, hogy a túl gyakori ciklusok megterhelik a szervert, így az erőforrásainknak megfelelő értéket állítsuk be.

Ezt a beállítást az előzőektől eltérően most a trackPageView sora után kell betenni.

Belső keresés mérése

Ha a mérni kívánt weboldal tartalmaz saját keresőt, akkor a Matomo (Piwik) webanalitikai rendszer segítségével a keresések is könnyedén követhetőek. Ezt pedig úgy állíthatjuk be, hogy az eddigi oldalletöltések esetén megszokott trackPageView helyett alkalmazzuk a trackSiteSearch függvényt a keresési oldalakon a következő módon:

_paq.push(['trackSiteSearch', kulcsszó, kategória, találatok_száma]);

Ahol a paraméterek a következők:

• kulcsszó: A találati oldalra érkezve a keresési kifejezést kell itt átadni a függvénynek.
• kategória: (opcionális) Ha van az oldalon kialakított kategória rendszer, akkor a kategóriát is megadhatjuk itt.
• találatok_száma: (opcionális) Itt pedig megadhatjuk, hogy a keresés hány találatot adott.

Tehát mégegyszer: míg a hagyományos oldalletöltéseknél a trackPageView függvényt használjuk, addig a kereső találati oldalain pedig a trackSiteSearch függvényt. Ennek megfelelően a Matomo statiszikáiban is az oldalletöltések helyett ilyenkor keresési események fognak megjelenni, amit eltérő ikonnal is jelöl meg a rendszer.

Felhasználói azonosító követése

Ha az oldalon van felhasználókezelés, akkor a belépett felhasználók egyedi azonosítóját is továbbíthatjuk a Matomo szervernek, ami átlátható statisztikát biztosít a többféle böngészők és eszközök között is. Ehhez tegyük be az alábbi sort a követőkódba:

_paq.push(['setUserId', 'felhasznalo_id']);

Ahol a felhasznalo_id helyére kell betenni az oldal által nyilvántartott felhasználói azonosítót.

Ezt a trackPageView elé kell tenni.

Ennek pontos kivitelezését egy szerver oldali script feltételes ágába helyezve lehet megoldani egyszerűen. Ha be van lépve a felhasználó, akkor betesszük ezt a sort a forráskódba...

Ezek voltak szerintem a legfontosabbak, de még számos beállítási lehetőség áll rendelkezésre, melyekről itt olvashatunk bővebben.

A következő oldalon folytatjuk a Matomo (Piwik) rendszer telepítése utáni szükséges beállításokkal.

Lapozó