Google Tag Manager Használata Kezdőknek 2024

Written by: roihacks.hu
Utolsó módosítás:

Az online marketinggel foglalkozó szakemberek talán legjobban a Google Tag Manager gyakorlati használatól félnek, hiszen az egyik legnépszerűbb olyan technikai marketing eszközről van szó, ahol már gyakran kódokat kell kezelni, vagy olyan ijesztő szavakat hallhatunk, mint JavaScript, CSS, vagy éppen HTML.

Noha a Google Tag Manager tényleg nem az az eszköz, amit már egy rövid egyórás tanfolyam után is tudunk használni, ettől független mindenképp érdemes a kezdeti félelmen túltenni magunkat, mert amennyiben már kezdő vagy haladó szinten elsajátítjuk a használatát (és amúgy nem kell hozzá programozni tudni), az egyik leghatékonyabb marketing eszköz kerül a kezünkbe. Ami ráadásul a piacon is értékes tudást ad, hiszen  kevesen értenek jól hozzá.

Ebben a cikkben egy általános áttekintést és bevezetőt szeretnénk nyújtani a Google Tag Manager használatáról, valamint kitérünk egy-egy fontosabb résztémára is röviden. Terveink között szerepel, hogy minden fejezetről egy külön cikkben számolunk be. Ahol már a cikk elkészült ott jelezzük ezt, és a linkre kattintva, még mélyebben foglalkozunk az adott témakörrel.

Amennyiben Google Tag Managerrel kell valamilyen problémát megoldanod, de pontosan nem tudod, hogy azt hogyan kell, és profiktól szeretnél tanácsot kérni, akkor itt tudod felvenni velünk a kapcsolatot, akár tanácsadásról akár konkrét implementációs problémáról van szó.

Mi az a Google Tag Manager (Google Címkezelő)?

A Google Tag Manager (magyar nevén Google Címkekezelő, angol rövidítéssel pedig GTM) egy olyan ingyenes Google marketing eszköz, ami révén könnyen tudsz analitikai és marketing tag-eket (címkéket), azaz követőkódókat, pixeleket a weboldaladon elhelyezni és ezeket a tag-eket menedzselni anélkül, hogy a tényleges weboldalkódhoz hozzányúlnál. (azaz mindenféle fejlesztői tudás sem kell hozzá).

Google Tag Manager - Google Címkekezelő

Gyakorlati példán keresztül bemutatva, ez azt jelenti, hogy például a Facebook Pixel vagy a Google Analytics kódját nem közvetlenül a weboldal kódjából illesztjük be, hanem a Google Tag Manageren keresztül engedjük ki ezeket a követőkódokat.

Ez különösen hasznos lehet, ha az említett marketing kódoknál jelentős testreszabásokat végeztünk, és például a Facebook Pixel esetében nemcsak simán az oldalbetöltéseket mérjük, hanem egyéb Pixel esetményeket.

Másik nagy előnye, hogyha mi már kellően elsajátítottuk a Tag Manager használatát, akkor nem kell minden egyes módosításnál vagy új marketing címke telepítésénél a belsős fejlesztőnket, vagy rosszabb esetben egy túlszámlázó külső fejlesztőt zaklatni, hogy azt a kétperces feladatot csinálja meg nekünk.

Szintén a Google Tag Manager egyik nagy előnye, hogy például a Preview and Debug móddal (magyarul Előnézet móddal), a marketing tag-ek publikálása előtt tudjuk tesztelni az oldalon, hogy megfelelően sikerült az adott GTM tag-et konfigurálnunk, és tényleg azt csinája az adott tag, amit mi szeretnénk.

Google Tag Manager vs Google Analytics

Talán a leggyakrabban a Google Tag Manager és a Google Analytics közötti különbséget nem szokták a kezdő online marketing-esek megérteni.

A Google Analytics a Google webanalitikai szoftvere, amelynek segítségével a weboldalunk vagy a mobilappunk felhasználóiról tudhatunk meg sok információt.

A Google Tag Manager egy címkekezelő megoldás, amivel például a Google Analytics-et is lehet a weboldalunkon implementálni, és például különösen hasznos ha Google Analytics Event-eket (Eseményeket), vagy éppen Custom Dimension-öket szeretnénk a Google Analytics-en belül implementálni.

Természetesen lehet a Google Analytics-et Google Tag Manager nélkül is implementálni, de ha nemcsak a vanilla szoftvert szeretnénk használni, hanem ki akarjuk a Google Analytics-ben lévő hatalmas potenciált aknázni, akkor a Google Tag Manageren keresztül érdemes a Google Analytics-et telepíteni a weboldalunkra.

Viszont a Google Tag Manager nemcsak arra van, hogy a Google Analytics-et telepítsük a weboldalunkra, hanem számos egyéb marketing tag-et, pixelkódot tudunk vele az oldalunkon elhelyezni. A számos alkalmazási lehetőséget, amire a GTM használhatható pár fejezettel később olvashatod.

Google Tag Manager első lépések

Mielőtt pár konkrét példát mutatnánk arra, hogy hogyan tudjuk Google Tag Managerben lévő hatalmas potenciált hasznosítani, érdemes pár szót szólni az első lépésekről, amiket mindenkinek meg kell tennie, amennyiben a Google Tag Managert szeretné használni.

Amennyiben használni szeretnénk a GTM-et, gyakorlatilag két nem túl bonyolult lépésen kell keresztül mennünk:

  1. Létre kell hoznunk egy Google Tag Manager fiókot és tárolót
  2. Majd a Google Tag Manager alapkódot el kell helyeznünk a weboldalunk head és body részében,
  3. Publikálnunk kell az oldalra a Container első verzióját, ha még akkor is, ha semmilyen GTM tag-et nem implementáltunk, tehát a container teljesen üres.

Noha ezek önmagában nem túl bonyolult dolgok, de mivel azért nem teljesen triviálisak ezek a folyamatok, külön blogbejegyezésekben foglalkoztunk velük:

  • Google Tag Manager fiók létrehozása és bekötése
  • Google Tag Manager bekötése WordPress oldalra
  • Google Tag Manager telepítése Shopify weboldalra

Google Tag Manager alkalmazási lehetőségek

Amint a Google Tag Manager megfelelően telepítettük a weboldalunkra, egyből megnyílik számos alkalmazási lehetőség, amiket mostantól mind a Google Tag Manageren keresztül meg tudunk valósítani, anélkül hogy hozzáférnénk a weboldalunk kódjáról. A következőkben pár ilyen alkalmazás lehetőségre térek ki a Google Címkekezelő kapcsán.

Universal Analytics implementáció GTM segítésével

Amint létrehoztuk a Google Tag Manager fiókot és a kódrészletet megfelelően elhelyeztük az oldalon, a legtöbben általában arra használják GTM-et, hogy a Google Analytics haladóbb szintű beállításokat itt elvégezzék.

Szóval a sima oldalmegtekintések mérése mellett a Google Analytics mélyebb insightjaihoz szükséges Eseményeket (Eventeket) vagy a webshopos vásárlói útakban nagy segítséget nyújtó Továbbfejlesztett Elektronikus Kereskedelmi modult (Enhanced Ecommerce Module-t) is meg lehet valósítani Tag Manageren keresztül.

Google Analytics 4 implementáció GTM segítésével

Mint már hallhattál róla, 2020. októberétől már nem a Universal Analytics, hanem a Google Analytics 4 az új default verziója a Google Analytics-nek. Itt nemcsak a felhasználói felület változik, hanem sok esetben az alapvető működési mechanizmus. Egy dolog azonban változatlan, hogy továbbra is leginkább Tag Manageren keresztül ajánlott a Google Analytics 4 Eventeket és az Ecommerce modult bekötését és beállítását megvalósítani.

Facebook Pixel telepítése Google Tag Managerrel

Fontos még a Facebook Pixel  Tag Managerrel történő implementációját is kiemelni, hiszen ezzel arra is rá tudunk mutatni, hogy a Google Tag Manager természetesen nemcsak a Google termékek telepítésére és beállítására használható hanem bármilyen marketing tag-re és analitikai eszköznek a bekötésére.

Például Facebook Pixel esetében is teljes implementációt tudunk végezni Google Tag Manageren keresztül, így bármilyen Facebook Pixel standard eseményt, egyéni eseményt létre tudunk hozni Google Tag Manageren, például Egyéni HTML módszerrel, de akár már Template Tag-ek is rendelkezésre állnak, amik az egész folyamatot eléggé egyszerűvé teszik.

Számos egyéb lehetőség Google Tag Manager alkalmazására

De a GTM alkalmazási lehetőségeinek listája tényleg szinte végtelen, így a következőkben ide írok párat. Sokat ezek közül a fenti Google Analytics-szel lehet amúgy implementálni. Amennyiben egy-egy lehetőség jobban érdekel, írd meg kommentben, és ha közérdekűnek találom, lehet egy külön bejegyzést is írok róla a blogra:

  • Google Ads konverziókövetés implementáció
  • Google Ads remarketing tag bekötése
  • mobilalkalmazások mérése
  • fájl letöltések mérése
  • gombok, linkkattintások mérése
  • az oldalon való aktivitás, engagment mérése (pl. oldalon töltött idő, görgetés)
  • Formok, és ehhez kapcsolódó dolgok mérése
  • dinamikus remarketing rendszerek implementációja (Facebook, Google)
  • Affiliate eladások mérése
  • Videók, videólejátszások mérése
  • Cookieban történő mérések implementációja
  • 404-es oldalak mérése
  • A felhasználóról, vagy a használt böngészőről való információk gyűjtése
  • SEO alkalmazási lehetőségek
  • Chatalkalmazások, kommentek mérése
  • Számos marketing és analikai tag implementációja:
    • Twitter Universal
    • Adroll intellignes képpont
    • Criteo
    • Google Ads call tracking
    • Crazy Egg
    • Hotjar Tracking code
    • Linkedin Insight
    • Pinterest tag
    • Quora tag
    • Twitter univerzális webhelycímke

És a sort még folytathatnénk. A fenti felsorolás megmutatja, hogy ha már egy alaptudásunk van a Google Tag Managerről, akkor rendkívül hasznos dolgokat fogunk sokszor fejlesztői segítség nélkül az oldalunkon megcsinálni.

Google Címkekezelő fő koncepciók

Eddig láthattuk, hogy a Google Tag Manager igencsak hasznos marketing eszköz, ami eléggé megkönnyíti mind a marketingesek, mind a fejlesztők munkáját. Egy kezdőcikk a GTM-ről viszont nem lenne teljes, ha a Google Tag Manager működése kapcsán a legfontosabb alkotóelemekről egy kicsit nem beszélnénk, amik a GTM működési mechanizmusának az alapját adják.

Ez a négy alapösszetevő a következő:

  • A Google Tag Manager tagek (címkék)
  • A Google Tag Manager trigger-ök (aktiválási szabályok)
  • A Google Tag Manager variable-ök (változók)
  • A Google Tag Manager dataLayer (adatréteg)

Amennyiben ezek használatáról többet szeretnél tudni a cikken írtakon felül, akkor egyrészt csekkold le a többi GTM-es cikkünket, ahol gyakorlati példákon keresztül mutatjuk be, hogy ezek az alapelemek hogyan működnek, és mi a funkciójuk.

Másrészt, ha szeretnél róluk mondjuk egy külön cikkben olvasni itt a ROIhacks.hu-n, azt kommentben a cikk alatt jelezd kérlek.

Google Tag Manager Tagek (Google Címkekezelő Címkék)

A Google Tag Manager tag-ek, vagy magyar fordítást használva Google Tag Manager címkék azok a JavaScript kódszegmensek vagy pixelek (képpontok), amiket általában egy harmadik féltől származnak vagy magunk hozunk létre, és amik mérési vagy marketing információkat küldenek a weboldaladról egy adott marketing vagy webanalitikai eszköznek.

Ilyen tag például Google Analytics oldalmegtekintés (Page View) tagje, de az összes Google Analytics Esemény beállítását is  Analytics Event tag-ekkel tudjuk a weboldalon megvalósítani.

Google Tag Manager tagek - Címkekezelő címkék

A Google Tag Manageren belül vannak előrekonfigurált tag-ek, mint például az eddig említett Google Analytics tag-ek, a Google Ads remarketing kódja, a Google Optimize kódja, de a Hotjar, a Twitter vagy a Linkedin követőkódját is ilyen előrekonfigurált tag-ek segítségével helyezhetjük el az oldalon.

Ezeken felül mi is létrehozhatunk bármilyen HTML tag-et, ahova elhelyezhetjük a saját kódrészletünket, ami azt csinálja, amit mi az adott javascript kódrészletben mi meghatároztunk neki. Például mivel a Facebook Pixel-nek nincs hivatalos előrekonfigurált tag-je, amennyiben a FB Pixel Eseményeket GTM-mel akarjuk a weboldalunkra bekötni, akkor ilyen Egyéni HTML címkéket (Custom HTML tag-eket) kell létrehoznunk.

Google Tag Manager Trigger-ök (Google Címkekezelő Aktiválási Szabályok)

Azt, hogy ezek a Tag-ek a Google Tag Manageren mikor aktiválódjanak, azt a Google Tag Manager Triggerekkel, vagy a magyar kifejezést használva, a Google Tag Manager Aktiválási szabályaival határozhatjuk meg.

Például, ha egy bizonyos marketing tag-et minden oldal betöltődésnél szeretnénk, hogy működésbe lépjen, akkor egy All Page View Trigger akitválási szabályt kell az adott tag-hez hozzárendelnünk.

De a trigger-ök is számos lehetőséget nyújtanak, így aktiválhatunk egy adott GTM tag-et példuál:

  • ha az URL megegyezik vagy tartalmaz egy adott szöveget
  • ha egy gombra kattintottunk, ami egy maghatározott szöveget tartalmaz
  • ha elindítunk, megállítunk egy videót
  • vannak görgetés és idő alapú triggerek is.
  • ha a felhasználó egy bizonyos felületet lát a képernyőn
  • a felhasználó beküldött egy formot
  • de bármilyen egyéni esemény alapján is készíthetünk szabályokat.

Google Tag Manager akitiválási szabályok - triggerek

Természetesen ezeket a szabályokat kombinálni is lehet egymással, így tényleg nincs olyan eset, amit a Google Tag Manager aktiválási szabályokkal nem tudnánk lefedni.

Google Tag Manager Variable-ök (Google Címkekezelő változók)

A harmadik nagy összetevő a GTM-ben, a Google Tag Manager Variable-ök, vagyis a Google Címkekezelő Változó. A Google hivatalos definíciója szerint a GTM változó egy olyan érték elnevezett helyőrzője, amely nem állandó, például termék neve, érték vagy dátum.

Közérthetőbben megfogalmazva, amikor egy adott Tag Manager Címke a Trigger alapján aktiválódik, akkor az adott rendszernek a Google Tag Manager Tag átad adatokat, és hogy ezek az adatok pontosan mik, azt általában a Google Tag Manager Változók által felvett értékek adják meg.

Többféle változó típus van, alapjában véve, vannak az előre beépített Tag Manager Változók (Built-in Variables), de maga a felhasználó is létrehozhat a saját igényei alapján Felhasználó által definiált Változókat (User Defined Variables).

A Google Tag Manager előre beépített Változóit is általában be kell kapcsolni mielőtt használni tudnánk őket Tag-eknél vagy Trigger-eknél, de vannak olyan amik egy új GTM Container létrehozásánál is egyből elérhetők. Pár példa az előre beépített Google Tag Manager Variable-ökre:

  • Kattintások (Clicks): Kattintáselem, Kattintás URL, kattintás Szöveg, stb.
  • Hibák (errors): Hibaüzenet, hiba URL, stb
  • Oldalak,
  • Előzmények
  • Görgetés
  • Videók,
  • Láthatóság

A Built-in Variable-ök mellett pedig saját Változókat is létre tudunk hozni a Google Tag Manager Continerünkben, ezeket nevezik User Defined Variable-öknek. Az GTM változó típusokat hozhatjuk létre mi is

  • Adatréteg változó (dataLayer variable – részleteket lásd később)
  • egyéni JavasScript változó (Custom JavaScript variable)
  • Automatikus esemény változó (Auto-event Variable)
  • Cookie változó
  • DOM-elem változó

A Google Tag Manager dataLayer (Google Címkekezelő adatréteg)

A már előző fejezetben említett Google Tag Manager adatréteg, angolul dataLayer adataiból változókat is lehet létrehozni, ezeket nevezzük dataLayer változóknak. De mi is az a dataLayer?

A Google Tag Manager dataLayer egy olyan JavaScript object, ami az adatok ideiglenes tárolására használható, és amely révén a Google Tag Managernek információt tudunk átadni. Így mind Egyéni Eseményeket, mind Változókat át tudunk adni a Google Tag Managernek a dataLayeren keresztül.

Egy példán keresztül bemutatva, ha egy felhasználó a kosarába tesz valamit, akkor a kosárba tevéssel kapcsolatos információkat (a felhasználó kosárba tett valamit, milyen terméket tett kosárba, milyen értékben), mind a dataLayeren keresztül küldenénk be, amit aztán a Google Tag Manager-ben változókként ki tudunk olvasni, ha dataLayer Variable-öket hozunk létre.

A dataLayer-be beküldhetünk információkat plugin használatával, például a WordPress esetén  a Google Tag Manager for WordPress pluginnal. Amennyiben egy saját fejlesztésű rendszerünk van, akkor a fejlesztőnket kell megkérni, hogy küldje be a dataLayer adatokat.

Google Tag Manager megtanulása, anyagok, források

Ha először olvastál a fenti koncepciókról, akkor talán elbizonytalanodták, hogy tényleg jó ötlet-e megtanulni a Google Tag Managert. Még egyszer megismételnénk, hogy bár az első sikerélmény tényleg nehezebben jön, mint más marketingeszközöknél, már egy kezdő, középhaladó tudással is elég hasznos dolgokat fogunk tudni önállóan megcsinálni a GTM-mel, szóval érdemes belevágni a megtanulásába.

Ha mégis inkább az egész Google Tag Manager implementáció kiszerveznéd, vagy csak tanácsra van szükséged, akkor itt tudod velünk felvenni a kapcsolatot.

Mindenképp csekkold le az ebben a cikkben is többször linkelt GTM-es blogposztjainkat, hiszen azok mélyebben belemennek egy-egy konkrét alkalmazási lehetőségbe.

Emellett ajánlok pár angol nyelvű blogot és Youtube csatornát a témában, ahol a Google Tag Manager nemzetközi szakértőitől lehet igazán elmélyülni egy Google Tag Manager témakörben:-egy

De a legfontosabb, hogy amint lehet próbáljuk meg első GTM címkéinket létrehozni, akár egy dummy weboldalon, mivel a tényleges tagek, triggerek, és változók beállítása az egyetlen hatékony módja a Google Tag Manager megtanulásának. A folyamatos próbálkozás, és hibázás során leszünk képesek a Google Címkekezelő működési elvének elsajátítására

Gyakran Ismételt Kérdések – Google Tag Manager

Kell-e tudni programmozni, kódokkal foglalkozni, hogy a Google Tag Managert használhassuk?

Egyáltalán nem szükséges. Bár vannak olyan alkalmazási lehetőség, ahol JavaScript tudás szükséges bizonyos problémák megoldásához, de általában kattintható funkciókkal rendelkezik a Google Tag Manager, amihez nem szükséges fejlesztői, programozói tudás.

Mi a különbség a Google Tag Manager és Google Analytics között?

A Google Analytics a Google webanalitikai szoftvere, amelynek segítségével a weboldalunk vagy a mobilappunk felhasználóiról tudhatunk meg sok információt.
A Google Tag Manager egy címkekezelő megoldás, amivel például a Google Analytics-et is lehet a weboldalunkon implementálni, de nem feltétlenül kell vele, lehet natívan is az oldal kódjába elhelyezni. A Google Tag Manager számos egyéb analitikai és marketingszoftver kódjának kezelésére, tehát nem csak Google Analytics és Google termékek kódjainak a kezelésére és beállítására szolgál.