Javascript és Web analitika alapjai

JavaScript tagek használata webanalitikában (Page Tagging)

A JavaScript tagek vagy más néven page tagging a legelterjedtebb módszer a weboldalak látogatottságának és felhasználói viselkedésének elemzésére. Ebben a módszerben egy JavaScript kódrészletet (tracking tag) helyeznek el a weboldalon, amely adatokat gyűjt és küld egy analitikai rendszerbe, például Google Analytics, Matomo, Adobe Analytics vagy Hotjar.

🔹 Hogyan működik a JavaScript alapú nyomkövetés?

JavaScript kód beágyazása minden weboldalba (általában a <head> vagy <body> szakaszban).
A böngésző futtatja a kódot, és információkat gyűjt a látogatóról (pl. eszköz, böngésző, IP-cím, képernyőfelbontás, interakciók stb.).
Az adatok egy külső szerverre kerülnek továbbításra (pl. Google Analytics, Matomo stb.).
Az analitikai rendszer feldolgozza és elemzi az adatokat, majd riportokat készít.

📌 Példa egy Google Analytics tagre (GA4):

----html

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Ez a kód minden látogatót naplóz és adatokat küld a Google Analytics szerverére.

🔹 Előnyök (Miért jó a page tagging?)

✅ Részletes felhasználói információk

Eszköz, böngésző, földrajzi helyzet, képernyőfelbontás, operációs rendszer stb.
Felhasználói viselkedés (pl. hova kattintanak, meddig görgetnek, mennyi időt töltenek egy oldalon).

✅ Interakciók követése

Egyedi események mérése (pl. gombkattintás, videólejátszás, űrlapbeküldés).
AJAX-hívások és SPA (Single Page Application) oldalak támogatása.

✅ Valós idejű adatok

Azonnali adatok a látogatókról és a weboldal forgalmáról.
Gyorsan reagálhatsz kampányokra, tartalom teljesítményére.

✅ Könnyen konfigurálható és bővíthető

Google Tag Manager segítségével a nyomkövetés kód nélkül kezelhető.
Külső rendszerekhez integrálható (pl. CRM, hirdetési platformok).

✅ Cross-platform és multi-device mérés

Különböző eszközök közötti felhasználói útvonalak elemzése (pl. mobil, tablet, PC).
Felhasználói azonosítók vagy cookie-k segítségével követhető az egyéni viselkedés.

✅ Automatikus bot-szűrés és adatvalidáció

Google Analytics és más szolgáltatások automatikusan kiszűrik a bot-forgalmat.

🔹 Korlátok és hátrányok

⚠️ Adatvédelmi és cookie-használati korlátozások

Az EU GDPR, CCPA és más adatvédelmi szabályozások miatt a felhasználók engedélye nélkül nem mindig lehet adatokat gyűjteni.
Cookie Consent banner (pl. OneTrust) szükséges lehet az adatgyűjtéshez.

⚠️ Adblockerek és követésblokkolás

Egyes böngészők (pl. Firefox, Brave, Safari) blokkolják az analitikai scripteket.
Adblockerek letilthatják a nyomkövető JavaScript-kódokat, így az adatok hiányosak lehetnek.

⚠️ Kliensoldali megvalósítás miatt pontatlanságok

Ha a felhasználó gyorsan elhagyja az oldalt, a script nem biztos, hogy lefut.
Lassú internetkapcsolat esetén előfordulhat, hogy az adat nem kerül elküldésre.

⚠️ Növeli az oldal betöltési idejét

Ha nem megfelelően van optimalizálva, lassíthatja a weboldalt.
Egy rosszul beállított Google Tag Manager több száz millisekundumos késleltetést is okozhat.

⚠️ Nem követi a szerveroldali forgalmat

Nem lát API-hívásokat vagy szerveroldali interakciókat (pl. ha egy látogató egy mobilalkalmazáson keresztül nyit meg egy linket).

🔹 Page tagging vs. Logfile elemzés

Tulajdonság	Page Tagging (JavaScript alapú)	Logfile elemzés (Szerveroldali)
Adatforrás	Böngésző (kliensoldal)	Webszerver naplóállományai
Pontos adatgyűjtés	Cookie-k és JavaScript alapján	100%-ban minden kérés naplózódik
Botok felismerése	Automatikusan szűrve (de nem tökéletes)	Minden forgalom (botok is) látható
Felhasználói interakciók	Görgetések, kattintások, videómegtekintések mérhetők	Nem rögzíti az oldalhasználati interakciókat
Adblockerek hatása	Tiltott script esetén nincs adat	Nincs hatással rá
Adatvédelmi szabályozások	GDPR/CCPA kötelező cookie hozzájárulás	Nincs szükség cookie-kra
Működés mobileszközön	Minden modern eszköz támogatja	Mobilalkalmazásoknál nem használható
Nagyobb oldalakra ajánlott?	Igen, ha pontos felhasználói interakciókat kell mérni	Igen, ha teljes szerveroldali forgalmat kell látni

📌 Mikor érdemes page tagginget használni?
✔️ Ha részletes felhasználói viselkedést szeretnél elemezni (pl. kattintások, görgetések).
✔️ Ha könnyen vizualizálható adatokat szeretnél.
✔️ Ha kampányokat és konverziókat kell követni.

📌 Mikor érdemes logfile elemzést használni?
✔️ Ha teljes szerveroldali forgalmat kell látni (botok, API-hívások stb.).
✔️ Ha nem szeretnél a cookie- és adatvédelmi problémákkal foglalkozni.
✔️ Ha a weboldal teljesítményét vagy hibáit akarod elemezni.

🔹 Összegzés

A JavaScript alapú page tagging rendkívül részletes, dinamikus és könnyen konfigurálható megoldás, de adatvédelmi problémákat és adblocker hatásokat is figyelembe kell venni.
A logfile elemzés pontosabb és teljesebb forgalmi adatokat ad, de nem látja a felhasználói interakciókat.

Ha fontos a felhasználói interakciók részletes elemzése, akkor JavaScript alapú nyomkövetést érdemes használni. Ha viszont minden forgalmat elemezni szeretnél (pl. SEO vagy botfigyelés céljából), akkor a logfile analízis jobb választás.

Példa

A webanalitika célja, hogy adatokat gyűjtsön és elemezzen a felhasználói viselkedésről egy weboldalon. Két fő módszert különböztetünk meg:

JavaScript alapú Page Tagging (pl. Google Analytics, Matomo)
Szerveroldali Logfile elemzés (pl. ELK Stack, GoAccess)

Az alábbiakban egy példa segítségével bemutatom az egyes módszerek lehetőségeit és korlátait.

📌 Példa: Egy online könyvesbolt elemzése

Képzelj el egy online könyvesboltot, ahol célunk:

A látogatók viselkedésének megértése: Milyen könyveket néznek meg? Hányan vásárolnak?
A marketingkampányok hatékonyságának mérése: Melyik hirdetés hozza a legtöbb vevőt?
A technikai problémák felderítése: Lassú betöltési idő? Hibás oldalak?

A két módszer közötti különbséget úgy szemléltetem, hogy mindkét megközelítést alkalmazzuk a könyvesboltunknál.

1️⃣ JavaScript Alapú Page Tagging: Google Analytics Példája

📌 Hogyan működik?
A weboldal minden oldalára egy JavaScript kódot helyezünk el, amely adatokat küld a Google Analytics szerverére minden egyes látogatáskor.

✅ Lehetőségek (Előnyök)

✔ Felhasználói viselkedés követése

Milyen könyveket néznek meg, mennyi ideig maradnak az oldalon?
Milyen sorrendben navigálnak a felhasználók az oldalon?

✔ Konverziómérés

Hány látogatóból lesz vásárló?
Melyik forrásból érkező látogatók vásárolnak többet (Google kereső, Facebook hirdetés stb.)?

✔ Interakciók követése

Gombnyomások, görgetési mélység, videómegtekintések, kosárba helyezés stb.

✔ Valós idejű adatok és vizualizáció

Azonnal látható, ha például egy új marketingkampány elindul és látogatók érkeznek.

✔ Egyszerű integráció harmadik fél eszközeivel

Google Ads, Facebook Ads, e-mail marketing eszközök stb.

📌 Példa egy Google Analytics eseménykövetésre (JavaScript kóddal):
Ha azt akarjuk mérni, hányan kattintanak egy könyv vásárlás gombjára:

---html

<button onclick="gtag('event', 'purchase', {'event_category': 'Ecommerce', 'event_label': 'Book Purchase'});">
  Vásárlás
</button>

⚠️ Korlátok (Hátrányok)

❌ Adblockerek és böngésző korlátozások

Ha a felhasználó AdBlock-ot használ, vagy a Safari Intelligent Tracking Prevention aktív, a JavaScript kód nem fut le.

❌ Cookie Consent probléma (GDPR, CCPA)

Ha a látogató nem fogadja el a sütiket, nem mérhetünk adatokat.

❌ Kliensoldali függőség

Ha egy oldal lassan tölt be, a script nem biztos, hogy lefut, így elveszíthetünk adatokat.

❌ Botok és spam-forgalom

Google Analytics próbálja kiszűrni a robotokat, de nem mindig sikerül.

2️⃣ Logfile Elemzés: ELK Stack Példája

📌 Hogyan működik?
A könyvesboltunk szervere naplózza minden egyes kérés adatait (IP-cím, HTTP státuszkód, user-agent stb.). Ezeket az adatokat egy log elemző rendszerrel (pl. ELK Stack) elemezzük.

✅ Lehetőségek (Előnyök)

✔ 100%-ban pontos forgalmi adatok

Minden oldalbetöltés, kép, API-hívás naplózva van.
Nem számít, hogy a felhasználó blokkolja-e a JavaScriptet.

✔ SEO és technikai hibák felderítése

404-es hibák, lassú válaszidők, túl sok terhelés alatt álló oldalak azonosítása.

✔ Botok és rosszindulatú forgalom észlelése

Melyik IP-címek próbálják túlterhelni az oldalt?
Spam botok vagy webcrawlerek azonosítása.

✔ Nincs szükség sütikre vagy felhasználói hozzájárulásra

Minden adat a szerveren van, nem kell hozzá ügyféloldali engedély.

📌 Példa egy Apache log elemzésére egy ELK Stackben
Apache logfájl:

--- swift

192.168.1.1 - - [27/Feb/2025:10:00:00 +0000] "GET /konyvek/harry-potter HTTP/1.1" 200 5123

Kibana vizualizáció:

Legnépszerűbb URL-ek
HTTP státuszkódok eloszlása
IP-címek szerinti forgalomelemzés

⚠️ Korlátok (Hátrányok)

❌ Nem követi az interakciókat

Nem tudja mérni a kattintásokat, görgetéseket vagy kosárba helyezéseket.

❌ Nagy adatmennyiség, bonyolult feldolgozás

Nagyobb forgalmú weboldalak esetén az adatok gyorsan nőnek, skálázás szükséges.

❌ Nehézkes marketingkampány mérés

Nem látjuk pontosan, hogy egy felhasználó honnan érkezett (például egy hirdetésből).

📌 Összegzés: Melyiket válaszd?

Módszer	Lehetőségek	Korlátok
JavaScript alapú Page Tagging (Google Analytics)	Részletes felhasználói interakciók, marketing hatékonyság mérése, vizualizációk	Adblockerek blokkolhatják, adatvédelmi korlátok (GDPR), nem lát minden forgalmat
Logfile elemzés (ELK Stack)	100%-os adatpontosság, SEO és technikai hibák elemzése, nincs cookie-szabályozás	Nem méri az interakciókat, komplex beállítás, nagy adatmennyiséget kell kezelni

📌 Javaslat a könyvesboltnak:
🔹 Google Analytics → Vásárlói viselkedés és marketing hatékonyság elemzésére
🔹 Logfile elemzés (ELK Stack) → Technikai hibák és botforgalom monitorozására

🛠️ Konklúzió: Kombinált megközelítés a legjobb!

A JavaScript alapú page tagging és a logfile elemzés együtt adja a legpontosabb képet. A kettőt kombinálva láthatod nemcsak azt, hogy ki és mit csinál az oldalon, hanem azt is, hogy hogyan működik a weboldal technikailag.

IT, BI, DWH, DM, AI

Keresés ebben a blogban

Javascript és Web analitika alapjai

JavaScript tagek használata webanalitikában (Page Tagging)

🔹 Hogyan működik a JavaScript alapú nyomkövetés?

🔹 Előnyök (Miért jó a page tagging?)

🔹 Korlátok és hátrányok

🔹 Page tagging vs. Logfile elemzés

🔹 Összegzés

Példa

📌 Példa: Egy online könyvesbolt elemzése

1️⃣ JavaScript Alapú Page Tagging: Google Analytics Példája

✅ Lehetőségek (Előnyök)

⚠️ Korlátok (Hátrányok)

2️⃣ Logfile Elemzés: ELK Stack Példája

✅ Lehetőségek (Előnyök)

⚠️ Korlátok (Hátrányok)

📌 Összegzés: Melyiket válaszd?

🛠️ Konklúzió: Kombinált megközelítés a legjobb!

Megjegyzések

Megjegyzés küldése