Google Tag Manager (GTM) alapok, használata és beállítása
Google Marketing fiók része az Analytics mellet:
A Google Tag Manager (GTM) egy ingyenes eszköz, amely lehetővé teszi különböző nyomkövető kódok (tag-ek) pixelek és szkriptek egyszerű kezelését egyetlen felületen keresztül, anélkül, hogy közvetlenül módosítani kellene a weboldal forráskódját.
A GTM három fő komponensből áll:
Címkék (Tags) – A tényleges nyomkövető kódok (pl. Google Analytics, Facebook Pixel, Google Ads konverziókövetés stb.).
Váltók (Triggers) – Meghatározzák, hogy a címkék mikor és milyen körülmények között aktiválódjanak.
Változók (Variables) – Segítségükkel dinamikusan továbbíthatunk adatokat a címkék és váltók számára.
GTM beállítása és használata
Használathoz fiók létrehozása és konténer beállításra van szükség
- Lépj be a Google Tag Manager oldalára.
- Hozz létre egy új fiókot, majd válaszd ki a konténer típusát (Web, iOS, Android, AMP).
- A rendszer egy GTM kódot generál, amit be kell illeszteni a weboldalad <head> és <body> szakaszába.
Címkék létrehozása
- A GTM felületén válaszd a Címkék menüpontot és kattints az Új gombra.
- Válassz egy beépített vagy egyéni címkét (pl. Google Analytics 4, Google Ads).
- Állítsd be a címkéhez tartozó adatokat (pl. Google Analytics Measurement ID).
Váltózások konfigurálása
A címkéhez hozz létre egy váltózás, amely meghatározza, hogy a címke mikor fusson le (pl. minden oldalbetöltéskor, kattintás esetén, vagy egy adott eseménynél).
Változók beállítása
Beállíthatunk beépített változókat (pl. URL, kattintási események) vagy létrehozhatunk egyéni változókat (pl. JavaScript változók, adatréteg).
Tesztelés és közzététel
A GTM beépített Előnézet (Preview) módjával ellenőrizheted, hogy a címkék megfelelően működnek-e.
Ha minden rendben van, kattints a Közzététel (Submit) gombra, hogy az új beállítások élesben is működjenek.
Pixel beágyazás GTM-mel
A pixelalapú követőkódok olyan szolgáltatásokhoz használatosak, mint a Facebook Pixel, Google Ads Conversion Tracking, LinkedIn Insight Tag, stb. Ezek általában egy egyedi azonosítót és egy kis JavaScript vagy képkérelmet tartalmaznak.
Pixel beállítása GTM-ben
- Lépj be a GTM felületére, majd válaszd a Címkék (Tags) menüpontot.
- Hozz létre egy új címkét, majd válaszd ki a megfelelő típust, pl.:
- Facebook Pixel (Facebook Pixel beépített sablon segítségével)
- Google Ads Konverziókövetés
- Egyéni HTML (Custom HTML) címke, ha a pixelkódot manuálisan kell beilleszteni.
Másold be a szolgáltató által adott pixelkódot (általában egy <script> vagy egy <img> elem).
Állítsd be a váltót (Trigger), hogy a pixel mikor fusson le (pl. minden oldalbetöltéskor vagy adott eseményeknél, mint gombkattintás vagy űrlapkitöltés).
Haladó GTM funkciók
- Adatréteg (Data Layer) használata: Lehetővé teszi egyedi adatok átadását a GTM számára.
- Egyéni JavaScript és HTML kódok kezelése speciális követési igényekhez.
- Szerveroldali GTM a nagyobb adatvédelmi és teljesítmény-optimalizáció érdekében.
Adatréteg (Data Layer) használata a JavaScript kódokhoz
Egyedi JavaScript (JS) beágyazása GTM-mel
A GTM lehetővé teszi egyedi JavaScript kódok hozzáadását az Egyéni HTML (Custom HTML) címke segítségével. Ez akkor hasznos, ha:
- Egyedi nyomkövetési logikát akarsz megvalósítani.
- Egyedi eventeket küldenél Google Analytics vagy más rendszerek felé.
- Extra funkciókat akarsz beépíteni (pl. dinamikus adatküldés).
JS beágyazás lépései GTM-ben
- Hozz létre egy új Címkét (Tag) és válaszd az Egyéni HTML (Custom HTML) opciót.
- Írd vagy illeszd be a JavaScript kódot, pl.:
<script>
console.log("A GTM JavaScript sikeresen lefutott!");
</script>
- Állítsd be a váltót (Trigger), hogy a kód mikor fusson le.
- Pl. minden oldalbetöltéskor (Page View)
- Egy adott gombkattintáskor (Click Event)
- Egy egyedi esemény bekövetkeztekor
Pixel és JS kombinációja
<script>
fbq('track', 'Purchase', {value: 99.99, currency: 'USD'});
</script>
Google Analytics egyedi esemény küldése JS segítségével
<script>
gtag('event', 'form_submission', {
'event_category': 'Lead',
'event_label': 'Contact Form'
});
</script>
Szerveroldali Google Tag Manager (Server-Side GTM)
✅ Adatvédelem és biztonság:
A kliensoldali GTM-ben a nyomkövető szkriptek közvetlenül kommunikálnak a külső szolgáltatókkal (pl. Google Analytics, Facebook, TikTok).
SSGTM esetén a böngésző csak egy szerveredhez küld adatokat, amely aztán feldolgozza és továbbítja a megfelelő szolgáltatókhoz.
Ez megakadályozza, hogy harmadik felek közvetlenül gyűjtsenek adatokat a felhasználóról.
✅ Gyorsabb oldalbetöltés és jobb teljesítmény:
- Kevesebb külső szkript fut a böngészőben, ami csökkenti az oldalbetöltési időt.
- A szerveroldali feldolgozás optimalizálható, így csökken a böngésző és a felhasználói eszközök terhelése.
✅ Jobb adatintegritás:
- Kiszűrhetők a rosszindulatú botforgalmak és hamis események.
- Pontosabb adatok küldhetők az analitikai rendszereknek, mivel a szerver validálhatja az adatokat.
✅ Cookie-k és böngészőkorlátozások kezelése:
- A modern böngészők egyre inkább blokkolják a harmadik féltől származó sütiket (pl. Safari ITP, Firefox ETP, Chrome 2024-től).
- SSGTM segítségével saját sütiket állíthatsz be, amelyeket a böngészők kevésbé korlátoznak.
Hogyan működik a Szerveroldali GTM?
📌 Működési folyamat:
- A weboldal továbbra is kliensoldali GTM-et használ, de a címkék nem közvetlenül küldenek adatokat harmadik feleknek.
- Az eseményeket egy szerveroldali GTM konténerbe (GTM-SS) küldi el, amely általában Google Cloud App Engine vagy egy egyéni szerveren fut.
- A szerver feldolgozza az adatokat, módosíthatja, anonimizálhatja vagy szűrheti.
- A szerver továbbítja az adatokat a megfelelő szolgáltatásokhoz (Google Analytics, Facebook Pixel, Google Ads stb.).
Szerveroldali GTM beállítása
1️⃣ Szerveroldali konténer létrehozása
Lépj be a Google Tag Managerbe, és hozz létre egy új konténert.
Válaszd a Szerver (Server) típust.
2️⃣ Szerver hosztolása
Google Cloud App Engine (ajánlott) vagy saját szerveren futtatható.
Ha Google Cloudot választod:
- Létre kell hozni egy új Google Cloud projektet.
- Engedélyezni kell az App Engine-t.
- A GTM automatikusan beállítja a környezetet.
3️⃣ Címkék és váltók beállítása
A kliensoldali GTM helyett az adatok a szerveroldali GTM-hez érkeznek.
Az adatokat adatátalakító és validáló szabályokkal lehet kezelni.
4️⃣ Külső szolgáltatók integrálása
Beállíthatod, hogy a szerveroldali GTM milyen adatokat küldjön tovább (pl. Google Analytics 4, Facebook Pixel, TikTok, LinkedIn, stb.).
5️⃣ Tesztelés és optimalizálás
A GTM beépített Előnézet módjával ellenőrizheted az adatfolyamokat.
Google Cloud monitoring eszközeivel figyelheted az adatküldéseket.
Példák és gyakorlati felhasználás
📌 1️⃣ Google Analytics 4 szerveroldali nyomkövetés
Kiszűrheted a hamis eseményeket.
Nem kell közvetlenül a böngészőből küldeni az adatokat.
📌 2️⃣ Facebook szerveroldali eseményküldés (Conversions API)
Javítja az adatpontosságot, mivel nem függ a böngésző által blokkolt sütiktől.
Használható remarketing és konverziókövetés javítására.
📌 3️⃣ Botforgalom és adathamisítás szűrése
Mivel az adatok egy köztes szerveren mennek át, könnyebben azonosíthatók és kiszűrhetők a botforgalmak.
📌 4️⃣ GDPR és adatvédelem támogatása
Anonimizálhatod vagy maszkolhatod a felhasználói adatokat, mielőtt elküldenéd harmadik feleknek.
Lehetővé teszi az adatkezelési szabályok rugalmasabb betartását.
Költségek és hátrányok
⚠ Google Cloud használata esetén a szerveroldali GTM nem ingyenes!
Kis forgalmú oldalak esetén alacsony a költség (~10-20 USD/hó).
Nagyobb forgalmú oldalak esetén skálázási költségek merülhetnek fel.
⚠ Komplexebb beállítások
A szerveroldali GTM használata fejlettebb technikai tudást igényel.
Több időt vesz igénybe a beállítás és optimalizálás.
Összegzés – Mikor érdemes használni?
✅ Érdemes bevezetni, ha:
Fontos az adatvédelem és a GDPR/CCPA megfelelés.
Böngészők blokkolják a harmadik féltől származó sütiket.
Pontosabb követési adatokra van szükséged (pl. Facebook, GA4, Google Ads).
Gyorsabb oldalbetöltést szeretnél, mert csökkented a kliensoldali szkriptek számát.
🚫 Nem biztos, hogy szükséges, ha:
Kis forgalmú oldalról van szó, és nem okoznak gondot a böngészők adatkorlátozásai.
Nincs fejlesztői kapacitás a beállításokra.
Link:
Megjegyzések
Megjegyzés küldése