Szerver oldali sütikezelés
Az utóbbi időben az Apple által bevezetett iOS változások miatt jelentősen csökkent a felhasználók viselkedéséről rendelkezésre álló adatok mennyisége. Ennek következtében folyamatosan romlik a Facebook és Google hirdetések teljesítménye, hiszen adatok hiányában az algoritmusok nem tudnak megfelelően működni.
A szerver oldali sütikezelés azonban sokkal több adat begyűjtését teszi lehetővé, ezzel segítve az algoritmusok hatékony működését. Ebben az anyagban lépésről-lépésre megmutatom a megvalósítás folyamatát.
Az anyagban szereplő folyamaton csupán egyszer kell végigmenned, és ha sikerült, többé nem kell vele foglalkoznod, folyamatosan sokkal több adatod fog érkezni. Annak érdekében, hogy könnyen el tudd végezni a beállításokat, minden lépést részletesen bemutatok, Neked csak le kell őket másolnod.
Ha a leírt lépéseken végighaladsz, akkor a Facebook és a Google Ads számára sokkal több adat áll majd rendelkezésre és ebből kifolyólag sokkal jobban teljesíthetnek a hirdetéseid.
A Sütikezelés
áttekintése
Ahhoz, hogy magabiztosan meg tudjuk valósítani a szerver oldali sütikezelést, fontos ismernünk a működésének részleteit. Ha Te ezt már ismered, akkor ezt a fejezetet nyugodtan ugord át, és folytasd a megvalósítás gyakorlati lépéseivel.
A régebbi módszer használatával a Facebook és a Google szerverei közvetlenül kommunikáltak a felhasználó böngészőjével, közvetlenül ezek a szolgáltatók gyűjtötték az adatokat.
Ebben a modellben az általuk használt sütik harmadik féltől származó sütiknek (third party cokkies) számítottak. Ezeket pedig az adblocker „kiszűrte”, illetve az iOS erősen korlátozta a használatukat, de a böngészők is egyre nagyobb arányban blokkolják ezeket a (harmadik féltől származó) sütiket.
A fent bemutatott modellben viszont ezek a sütik is „első féltől származó” sütiknek (first party cookies) számítanak. Ezzel az adatgyűjtést tulajdonképpen a Facebook és a Google helyett mi fogjuk végezni.
Az alábbi képen látható a folyamat leegyszerűsített ábrája.
Szerver oldali sütikezelés megvalósítása
lépésről - lépésre
1. lépés: Google Analytics tulajdon létrehozása
Ha még nincs Google Analytics fiókod, akkor először hozz létre egyet, ezt a linkre kattintva tudod megtenni.
A fiókon belül szükség lesz egy Google Analytics 4 (GA4) és egy Universal Analytics (UA) tulajdonra, ezért hozd létre ezeket. Ha már rendelkezel ilyen tulajdonokkal, akkor természetesen nem kell újakat létrehozni. Ha például van UA tulajdonod, akkor csak GA4 tulajdon létrehozása szükséges.
FONTOS! A megfelelő működéshez UA és GA4 tulajdon is szükséges, nem elegendő csak az egyik vagy csak a másik!
A regisztráció folyamatát és a tulajdonok létrehozásának menetét az alábbi elemekben találod.
A Google Analytics linkre kattintva az alábbi oldal fogad:
Kattints a „Mérés indítása” gombra a regisztrációhoz.
Nevezd el a fiókodat és a saját preferenciáid szerint állítsd az adatmegosztást.
A „következő” gombra kattintva tudod létrehozni a tulajdonokat. Ennek lépéseit a következő „Google Analytics 4 és Universal Analytics tulajdon létrehozása” részben találod.
Ha most hoztad létre az Analytics fiókot, akkor az első képet ugord át és folytasd a tulajdonok létrehozásával.
Ha már van fiókod, akkor az alábbi helyen tudsz új tulajdont létrehozni:
Kattints az „Adminisztrálás”-ra, majd a „Tulajdon létrehozása” Gombra.
Add meg a tulajdon nevét, a jelentés időzónáját és a pénznemet, majd kattints a „Speciális beállítások megjelenítése” gombra.
Kapcsold be az „Universal Analytics létrehozása” opciót, add meg a weboldalad url-jét és válaszd ki a „Google Analytics 4-tulajdon és Universal Analytics-tulajdon létrehozása” lehetőséget.
Saját vállalkozásodnak megfelelően add meg az iparági besorolást, a vállalkozás méretét, és hogy hogyan szeretnéd használni a Google analytics szolgáltatást. Ha nincs ötleted, hogy az utóbbi részben mit válassz ki, nyugodtan használd ugyanazt, amit én választottam, a későbbiekben ennek nem lesz jelentősége.
Fogadd el a szerződési feltételeket.
Ha mindent jól csináltál, akkor a következő képernyő fog fogadni:
Pirossal jelölve látod a mérési azonosítót, amire a későbbiekben szükség lesz, de ezzel most nem kell csinálnod semmit. A későbbiek során ezt bármikor meg tudod nézni.
Szintén pirossal jelölve látod az „Összekapcsolt webhelycímkék” szakaszt, ahol azt látod, hogy 1 címkével össze van kapcsolva a most létrehozott GA4 adatfolyam. Ez a másik címke pedig a Universal Analytics tulajdon.
Tehát mindkét tulajdon létrejött, itt további teendőnk nincs.
A most létrehozott tulajdonokat fogjuk beilleszteni a weboldalunkra, a Google Tag Manager használatával, a következő lépés tehát a Tag Manager beállítása lesz.
2. lépés: Google tag manager Tárolók létrehozása
A Google Tag Manager egy olyan eszköz, ami sok funkcióval rendelkezik, ezért széles körben felhasználható. Ebben az anyagban nem nézzük át minden funkcióját, csak az elvégzendő lépéseken haladunk végig.
A Google Tag Manager Használata címmel készült egy anyag, ami bemutatja az eszközt. Ha mélyebben érdekel a téma, akkor az említett anyagban találsz további részleteket.
FONTOS! Ha már használod a Google Tag Managert, akkor az alábbi folyamatot követve elveszhetnek a korábban létrehozott címkéid, ezért ha nem most használod először az eszközt, akkor légy körültekintő a lent leírt lépések követése során.
Ne felejtsd, hogy ha valami nem jól működik, akkor a Tag Managerben bármikor visszaállíthatod a tároló egy korábbi elmentett állapotát, így nem tudsz végzetes hibát véteni.
A Tag Manager beállítását 4 lépésre bontottam, ezeket római számmal jelölöm és I. II. III. és IV. lépésként hivatkozom rájuk:
A Google Tag Manager-ben nem szükséges regisztrálni, csak be kell jelentkezned egy Google fiókkal. Ha bejelentkeztél akkor a következő képernyő fogad:
Kattints a „Fiók létrehozása” gombra.
Add meg a fiók nevét, az országot és a tároló nevét. A tároló nevébe érdemes beleírni, hogy „web”, mert így jól megkülönböztethető lesz a szerver oldali tárolótól, amit mindjárt létrehozunk. A célplatformnál válaszd ki az „Internet” lehetőséget.
Fogadd el az ÁSZF-et.
A felugró ablakban találod a weboldalba illesztéshez szükséges kódrészletet. Erre csak később lesz szükségünk, ezért ezt az ablakot nyugodtan bezárhatod. A későbbiekben bármikor eléred ezt az információt a fenti képen pirossal jelölt helyre kattintva.
Ezzel létrejött a fiók és a webes tároló. Menj tovább a II. lépésre.
Miután elkészült a webes tároló, lehetőségünk van különböző címkék (tag-ek) létrehozására. A folyamat megkönnyítése érdekében én előre elkészítettem minden címkét, így ezt neked már nem kell megtenni, csupán le kell tölteni és importálni kell az általam elkészített konfigurációt.
Miután letöltötted a fájlt, importáld a webes tárolóba:
Lépj az ADMININISZTRÁLÁS -> TÁROLÓ IMPORTÁLÁSA menübe.
A „Tárolófájl kiválasztása” gombra kattintva add meg az előbb letöltött fájlt. A „Munkaterület kiválasztása” részben kattints a „Létező” gombra és válaszd ki a „Default workspace”-t. Az „importálási lehetőség kiválasztása” részben válaszd a „Felülírás” opciót.
Ha mindent jól csináltál, akkor ezt kell látnod az importálás befejeződése után:
A felső keretben az látszik, hogy 4 elem került hozzáadásra a tárolóhoz, az alsó keretben pedig fel vannak sorolva az új elemek.
A szerver tárolót a következő helyen tudod létrehozni:
Kattints a Tag manager ikonjára a bal felső sarokban, majd a pirossal jelölt 3 pontra és válaszd a „Tároló létrehozása” lehetőséget.
Add meg a tároló nevét. Praktikus olyan nevet választani, amiben szerepel a „szerver” szó, így később könnyen azonosítható a tároló. A „célplatform” részen válaszd a „Server” lehetőséget, majd kattint a „Létrehozás” gombra.
Kattints a fenti képen pirossal jelölt gombra, ekkor a következő kép fogad, ha még nincs számlázási fiókod.
Kattints a képen pirossal jelölt gombra. (Ha már van számlázási fiókod, akkor a következő néhány képet ugord át és lépj a számlázási fiók kiválasztása részhez.)
Fogadd el a felhasználási feltételeket, majd kattints az „AGREE AND CONTINUE” gombra.
Válaszd ki az országot és a vállalkozásodat legjobban „leíró” méretet, fogadd el a szerződési feltételeket és kattints a „CONTINUE” gombra.
Add meg a telefonszámod és kattints a „SEND CODE” gombra, majd add meg az SMS-ben kapott kódot.
Add meg a számlázási adataidat (ha a Google nem tölti ki), majd kattints a „START MY FREE TRIAL” gombra.
Válaszd ki a most létrehozott számlázási fiókot és kattints a fenti képen pirossal jelölt gombra.
Ezzel el is készült a szerver tároló és a szükséges szerver is. A felugró ablakot zárd be, a benne szereplő információkat bármikor újra megnézheted a fenti képen pirossal jelölt helyen, a tároló azonosítójára kattintva.
Miután elkészült a szerver oldali tároló, lehetőségünk van különböző címkék (tag-ek) létrehozására. A folyamat megkönnyítése érdekében én előre elkészítettem minden címkét, így ezt neked már nem kell megtenni, csupán le kell tölteni és importálni kell az általam elkészített konfigurációt.
Miután letöltötted a fájlt, importáld a szerver oldali tárolóba:
Lépj az ADMININISZTRÁLÁS -> TÁROLÓ IMPORTÁLÁSA menübe.
A „Tárolófájl kiválasztása” gombra kattintva add meg az előbb letöltött fájlt. A „Munkaterület kiválasztása” részben kattints a „Létező” gombra és válaszd ki a „Default workspace”-t. Az „importálási lehetőség kiválasztása” részben válaszd a „Felülírás” opciót.
Az importálás végeztével – a webes tárolónál már látott módon – látni fogod az újonnan hozzáadott elemeket.
A fenti lépések során tehát létrehoztuk a webes és a szerver oldali tárolókat és beimportáltuk a megfelelő címkéket.
Mivel minden fióknak egyedi azonosítója van, ezért az importálás végeztével még nem készültünk el teljesen, még a címkéket személyre kell szabni.
A tárolókon végzendő utolsó simításokat vagyis a konfigurálást először a szerver oldali tárolón, majd a webes tárolón hajtjuk végre.
3. lépés: Tag manager telepítése a weboldaladra
Következő lépésként telepítened kell a Google Tag Managert a weboldaladra. A telepítés menete webshop motoronként eltérő.
FONTOS! Ha korábban telepítetted az oldaladra a GA4 vagy az UA tulajdot a Google Tag Manager vagy valamilyen bővítmény (pl. PixelYourSite) segítségével, akkor azt távolítsd el, különben duplikált adatokat fogsz kapni, ami nagyon megtévesztő lehet.
WordPress esetén a Tag Manager beillesztését javasolt az Insert Headers and Footers nevű ingyenes bővítmény segítségével elvégezni.
Telepítés után a BEÁLLÍTÁSOK -> INSERT HEADERS AND FOOTERS menüben tudod megadni a Tag Manager kódrészleteit. (A kódrészleteket a Tag Managerben, a fejlécben az azonosítóra kattintva éred el)
Az alábbi bővítmény telepítésével tudod létrehozni az adatréteget – az adatréteg azért kell, hogy a Tag Manager meg tudja kapni a szükséges információkat (pl. vásárlás végösszege, megvásárolt termékek, stb):
A bővítmény telepítése után az alábbi 2 beállítást kell elvégezni:
A „Tag Manager ID” részt hagyd üresen, a „Container code part placement” részben pedig válaszd az „Off” lehetőséget. Így a bővítmény nem illeszti be újra az oldaladba a tag managert, csak a szükséges adatréteget hozza létre.
Miután ezt beállítottad, már csak a következőt kell tenned:
Az „Integration” fülön belül a „Woocommerce” lehetőségre kattintva pipáld be a fenti képen 3-as számmal jelölt „Track enhanced e-commerce” lehetőséet és mentsd el a változtatásokat.
Ha Shopify-t használsz, akkor a Shopify Plus előfizetéssel alapvetően elérhető a Google Tag Manager összekötés funkció.
Ha nem Shopify Plus előfizetésed van, akkor ezzel a bővítménnyel tudod hozzáadni a webshopodhoz a követőkódot.
Shoprenter esetén a BEÁLLÍTÁSOK – SEO ÉS ANALITIKA – TAG MANAGER fülön tudod beilleszteni a követőkódot, de a Shoprenter supportjának ezen az oldalán pontos leírást találsz róla.
Unas esetén a BEÁLLÍTÁSOK – KÜLSŐ KAPCSOLATOK – GOOGLE KAPCSOLATOK – GOOGLE TAG MANAGER menüben tudod beilleszteni a követőkódot, de az Unas blogjának ezen az oldalán pontos leírást találsz róla.
4. lépés: Szerver tároló konfigurálása
Ahogy az első fejezetben írtam, a szerver oldali sütikezelés lényege, hogy a sütiket ne harmadik féltől származó sütiként kezelje a felhasználó böngészője. Ehhez elengedhetetlen, hogy a sütiket a saját domain nevünkről továbbítsuk, tehát most be kell állítani a szerver domain nevét.
A Google Tag Managerben lépj be a szerver oldali tárolódba és válaszd az „Adminisztrálás” fület. A Google Cloud megnyitásához kattints az alábbi képen piros 3-as számmal jelölt ikonra.
A megnyíló Google Cloud bal oldali menüjében kattints az APP ENGINE -> SETTINGS menüpontra:
Itt pedig válaszd a „CUSTOM DOMAINS” fület és kattints az „ADD A CUSTOM DOMAIN” gombra:
A jobb átláthatóság érdekében a további teendőket – A Google tagolásának megfelelően – 3 részre bontom:
Miután rákattintottál az „ADD A CUSTOM DOMAIN” gombra, a következő képernyő fogad:
Itt kell megadnod a szerver domain nevét, majd kattints a „VERIFY” gombra.
A szerver neve legyen a fenti példának megfelelően gtm.domainem.hu. A tacitproject.hu esetében ez gtm.tacitproject.hu lenne.
Miután rákattintottál a gombra, a böngészőben egy új lapon megnyílik a „Webmester Központ”:
Válaszd az „Egyéb” lehetőséget a legördülő menüből és másold ki a 2-es számmal jelölt sort.
Egy új lapon lépj be a domain szolgáltatód cPanel felületére és válaszd a „Zone Editor”-t:
Kattints a megfelelő domain név sorában a kezelés gombra:
Itt a következő képernyő fogad majd:
Kattints a „Rekord Hozzáadása” gombra, majd a megjelenő felső sor első oszlopába gépeld be szerver nevét (vagy csak annyit, hogy gtm, a többit kiegészíti a rendszer), válaszd ki a TXT típust és a 4-es számmal jelölt mezőbe illeszd be azt a sort, amit az előbb kimásoltál. Végül kattints a mentés gombra. A cPanel-t még ne zárd be, hamarosan újra szükség lesz rá.
Ha elmentetted az új rekordot, akkor lépj vissza a „Webmester Központ” lapra és kattints az ellenőrzés gombra.
Az ellenőrzés végeztével lépj vissza a Google Cloud lapra és kattints a „REFRESH” gombra.
Ha minden rendben ment, akkor az oldal alján egy üzenet tájékoztat a sikeres ellenőrzésről. Kattints a „CONTINUE” gombra és folytasd a II. Domain átirányítása lépéssel.
Válaszd ki a gtm.domainem.hu domaint és kattints a „SAVE MAPPINGS” gombra, majd folytasd a III. További domain beállítások lépéssel.
A fenti képen pirossal jelölt 8 sort egyesével hozzá kell adni a cPanel felületén a domainhez. Ezt az előbbihez hasonló módon lehet megtenni:
Kattints a „Rekord Hozzáadása” gombra, majd a megjelenő új sor első mezőjébe gépeld be a szerver nevét (gtm.domainem.hu), válaszd ki a típust (az első 4 sor esetében „A”, míg az utolsó 4 sor esetében „AAAA”), végül a 4-es számmal jelölt mezőbe illeszd be az előző képen a „Data” oszlopban szereplő számokat, majd kattints a „Save Record” gombra.
Ezzel hozzá is adtuk az első sort. Ismételd ezeket a lépéseket a maradék 7 sorral is. Ha végeztél, akkor menj vissza a Google Cloud oldalra és kattints a „Done” gombra:
Végül a következő képernyő fogad:
Elkészültél a változtatásokkal, amik néhány órán belül életbe lépnek.
A beállítások végeztével ne felejtsük el aktiválni a kupont, amit a regisztráció során kaptunk (külön kérés nélkül). Ez 90 napig ingyenessé teszi számunkra a Google Cloud szolgáltatásainak igénybevételét, a 90 nap leteltével pedig a forgalom függvényében történik majd a számlázás.
A kupon aktiválására a legfelső sávban, melyre egy értesítés formájában emlékeztet a Google:
Utolsó lépésként véglegesítsük a szerver tárolón végrehajtott változtatásokat.
Nyisd meg a Google Analytics felületét és válaszd ki a korábban létrehozott GA4 tulajdont:
Lépj az ADMINISZTRÁLÁS -> ADATSTREAMEK menübe és másold ki a fenti képen 4-es számmal jelölt mérési azonosítót.
Ezek után nyisd meg a Google Tag Manager-t és válaszd a szerver oldali tárolót:
A bal oldali menüben kattints a „Címkék” menüpontra, majd válaszd a fenti képen 3-as számmal jelölt „Google Analytics GA4” címkét. A fenti képen 4-es számmal jelölt helyre másold be a korábban kimásolt GA4 mérési azonosítót, végül mentsd el a változásokat.
Kattints a jobb felső sarokban lévő „Küldés” gombra:
Majd kattints a „Közzététel „és a „Folytatás” gombokra:
5. lépés: Webes tároló konfigurálása
Ezek a címkék adatokat továbbítanak a Google Analytics 4 és az Universal Analytics számára, ezért a helyes működéshez meg kell adnunk a a megfelelő azonosítókat, aminek a pontos menetét az alábbiakban bemutatom:
Nyisd meg a Google Analytics felületét és válaszd ki a korábban létrehozott Universal Analytics tulajdont:
Lépj az ADMINISZTRÁLÁS->KÖVETÉSI ADATOK -> KÖVETŐKÓD menübe és másold ki a fenti képen 4-es számmal jelölt követési azonosítót.
Majd nyisd meg a Google Tag Manager-t és válaszd a webes tárolót:
A bal oldali menüben kattints a „Változók” menüpontra, majd a fenti képen 3-as számmal jelölt „Google Analytics – UA” változóra. A fenti képen 4-es számmal jelölt helyre másold be a korábban kimásolt Universal Analytics követési azonosítót, végül mentsd el a változásokat.
Nyisd meg a Google Analytics felületét és válaszd ki a korábban létrehozott GA4 tulajdont:
Lépj az ADMINISZTRÁLÁS -> ADATSTREAMEK menübe és másold ki a fenti képen 4-es számmal jelölt mérési azonosítót.
Ezek után nyisd meg a Google Tag Manager-t és válaszd a webes tárolót:
A bal oldali menüben kattints a „Címkék” menüpontra, majd válaszd a fenti képen 3-as számmal jelölt „Google Analytics GA4 – konfigurálás” címkét. A fenti képen 4-es számmal jelölt helyre másold be a korábban kimásolt GA4 mérési azonosítót, az 5-ös számmal jelölt helyre pedig gépeld be a nemrég létrehozott szerverhez tartozó domaint (gtm.domainem.hu). Végül mentsd el a változásokat.
Kattints a jobb felső sarokban lévő „Küldés” gombra:
Majd kattints a „Közzététel „és a „Folytatás” gombokra:
6. lépés: Címkék
Tesztelése
A címkék helyes működését a legegyszerűbben úgy tudod tesztelni, hogy megnyitod a Google Analytics felületén az oldaladhoz tartozó GA4 tulajdont és megnézed, hogy megérkeznek-e az adatok.
A bal oldali menüben kattints a „Valós idejű” menüpontra, majd inkognitó ablakból nyisd meg a weboldaladat. Néhány másodpercen belül az alábbi képen látható módon meg kell jelennie, hogy a weboldaladon egy aktív látogató tartózkodik.
Látszik, hogy a felhasználó (jelen esetben Te) az ország melyik régiójában tartózkodik, és hogy éppen melyik oldalt böngészi. Ha az inkognitó ablakban átlépsz a weboldalad egy másik aloldalára, akkor a fenti képen 3-as számmal jelölt helyen az oldalcím is ennek megfelelően változik, néhány másodperc elteltével.
Ha megnyitottad a weboldalad egy inkognitó ablakban és 1 perc elteltével sem jelenik meg a látogatásod a GA4 tulajdonban, akkor ellenőrizd a következő dolgokat:
• A megnyitott weboldalhoz tartozó GA4 tulajdont nézed?
• Ha van cache a weboldaladon, akkor ürítsd a cache-t.
• A GTM weboldalra telepítése során megfelelő azonosítót adtál meg?
• A tárolók konfigurálása során helyesen adtad meg a GA4 és a Universal Analytics követőkódjait?
• Mindkét tároló módosításait véglegesítetted? (Rákattintottál a jobb felső sarokban a „Küldés” gombra?
Összekapcsolás a facebook-kal
Az előző fejezetben minden szükséges beállítást elvégeztünk annak érdekében, hogy a Google Analytics-ben a lehető legtöbb adatot láthassuk. Következő lépésként beállítjuk, hogy ezek az adatok megérkezzenek a Facebook-hoz is.
Ez már sokkal egyszerűbb és gyorsabb folyamat lesz, mint az előző fejezetben. A jobb áttekinthetőség érdekében a folyamatot – A Facebookon végrehajtandó lépéseknek megfelelően – több részre tagolom.
Nyisd meg a Facebook Eseménykezelőjét.
Az Adatforrások között válaszd ki a használni kívánt képpontot. Kattints a „Beállítások” fülre és görgess le a „Konverziók API” szakaszig és kattints a „Partner kiválasztása” gombra.
A felugró ablakban válaszd a Google Címkekezelőt:
A megnyíló új lapon kattints a „Kezdés” gombra:
A felugró ablakban válaszd ki a Google fiókot, amit használtál a Címkék létrehozásánál, majd engedélyezt a „FB Pixel Installation” alkalmazás számára a kért hozzáféréseket:
Ezzel meg is tettük a kezdő lépéseket, folytasd a „Beállítások megadása” lépéssel.
Az első képernyőn kattints a „Tovább” gombra.
Válaszd ki a képpontot, amit használni szeretnél, majd kattints a „Tovább” gombra:
A következő oldalon ellenőrizned kell a fiók és a tárolók neveit:
A fiókot és a tárolókat automatikusan kiválasztja a Facebook, neked csak ellenőrizni kell, hogy jó elemeket választott-e ki.
A fenti képen 1-es és 3-as számmal jelölt helyen a tárolónak kell szerepelnie, amit nemrég hoztál létre a Google Tag Managerben. A 2-es szám a we-es tárolót jelöli, a 4-es pedig a szerver oldalit. Ha mindenhol a megfelelő elem van kiválasztva, kattints a „Tovább” gombra.
Ezzel minden szükséges beállítást megadtál, folytasd az „Erőforrások közzététele” lépéssel.
Mivel a Google Analytics 4 telepítését már korábban elvégeztük a tárolókban, ezért most csak be kell pipálnod a „Telepítve van” opciót. Ezután kattints a „Tovább” gombra.
A következő lépésben meg kell adni a Google Analytics 4 mérési azonosítót és a korábban létrehozott szerver nevét:
A GA4 mérési azonosítót helyét az előző fejezetben megbeszéltük, az ott leírt módon tudod most is előkeresni.
A szerver nevéhez azt írd, amilyen néven létrehoztad a szervert a Google Cloud szolgáltatásban (gtm.domainem.hu)
A fenti képen 3-as számmal jelölt legördülő listában pedig pipáld be az „Új általános eseményindító létrehozása” lehetőséget, majd kattints a „Tovább” gombra.
A következő oldalon nézd át a megjelenő adatokat, ellenőrizd a képpont helyességét:
Ha minden stimmel, akkor pipáld be fenti képen 1-es számmal jelölt lehetőséget és kattints a „Közzététel” gombra.
Ekkor a Facebook közzéteszi az új címkéket a Google Tag Managerben. Ez eltart egy rövid ideig, majd egy felugró ablakban értesít a folyamat befejeződéséről:
Kattints a „Kész”, majd a „Tovább” gombokra.
Ezzel befejeződött az erőforrások közzététele. Folytasd az „Integrációk módosítása” lépéssel”.
Az első képernyőn kattints a „Tovább” gombra:
A következő lépésben pipáld be az alábbi képen 1-es számmal jelölt lehetőséget, majd kattints a „Tovább” gombra:
Ezzel a végére értünk az integrációk módosítása szakasznak, folytasd a „Tesztelés” lépéssel.
Az első képernyőn kattints a „Tovább” gombra:
A következő képernyőn kapsz egy kódot a teszteléshez:
A fenti képen pirossal jelölt teszteseménykódot másold ki, majd illeszd be a Google Tag Managerben a következő helyre:
Lépj a szerver oldali tárolóba, a bal oldali menüben kattints a „Címkék” menüpontra és válaszd ki a fenti képen 3-as számmal jelölt „FB_CONVERSION_API…” nevű címkét.
A fenti képen 4-es számmal jelölt helyre illeszd be a korábban kimásolt teszteseménykódot, majd kattints a „Mentés” gombra.
Ezután kattints a bal felső sarokban a „Küldés” gombra.
A böngészőben lépj vissza a „Címkekezelő összekapcsolása a Facebookkal” lapra:
A „Bejövő események ellenőrzése” részben kattints a „Címke megnyitása” gombra (fenti képen pirossal jelölve). Ez nem egy címkét fog megnyitni, hanem az eseménykezelőn belül az „Események tesztelése” fület:
Add meg a weboldalad címét és kattints a „Webhely megnyitása” gombra, ekkor egy új lapon megnyílik a weboldalad. Kattints rá egy termékedre vagy szolgáltatásodra, tegyél kosárba egy terméket és nézd meg, hogy mi történik az események tesztelése lapon:
A fenti képen egyes számmal jelölt részen az látszik, hogy különböző eseményeket rögzít a képpont (pl. tartalom megtekintés, kosárba helyezés).
A 2-es számmal jelölt részen pedig az látszik, hogy a böngészőből és a szervertől is fogad adatokat a Facebook.
Illetve az is látszik, hogy azokat az eseményeket, amelyek a böngészőtől és a szervertől is megérkeztek deduplikálta, vagyis csak egyszer vette figyelembe, az eredmény nem tartalmaz majd duplikált forgalmat. Tehát minden helyesen működik.
Már csak el kell távolítani a Google Tag Managerből azt a teszteseménykódot, amit az előbb hozzáadtunk. Ebben segít a 4-gyel feljebbi kép. Ne felejtsd el a változásokat beküldeni.
Ha eltávolítottad a tesztesemény kódot, akkor kattints a „Tovább”, majd a Befejezés” gombra:
Tesztelés, hibajavítás
Ha idáig eljutottál, akkor valószínűleg sikeresen telepítetted a Tag Managert a weboldaladra, a forgalmi adatok pedig jól látszanak a Google Analytics-ben és a Facebookon is. Amit most ellenőrizni kell az az, hogy minden adat megfelelően kerül-e továbbításra (pl. a megvásárolt termékek listája, a vásárlás végösszege, stb).
Az adatok ellenőrzéséhez nyisd meg a Google Tag Manager-ben a webes tárolót és kattints a jobb felső sarokban az „Előnézet” gombra:
Ekkor egy új ablakban megnyílik a Google Tag Assistant. Itt add meg a weboldalad URL címét, ezután kattints a „Connect” gombra:
A weboldalad megnyílik egy új lapon, ha pedig visszalépsz a Tag Assistant lapra, akkor a következőt látod:
Kattints a „Continue” gombra, így eltűnik a felugró ablak és használhatóvá válik a Tag Assistant. A fenti képen 2-es számmal jelölt helyen látod, hogy milyen címkéket talált az Assistant az oldaladon (itt a GTM és a GA4 azonosítókat kell látnod).
A fenti képen 3-as számmal jelölt szakaszban pedig a megnyitott oldalakat látod és azt, hogy az adott oldalhoz kapcsolódóan milyen eseményeket továbbított a GTM.
Következő lépésként kattints az előbb megnyitott weboldaladra és adj le egy rendelést, majd lépj vissza a Tag Assistant lapra:
1: A bal oldali oszlopban (ahol az oldalmegtekintések és a hozzájuk tartozó események vannak) kattints az utolsó oldalmegtekintéshez tartozó utolsó eseményre.
2: Kattints a „Variables” fülre.
Ezen az oldalon tudod ellenőrizni, hogy a megfelelő adatokat küldi-e el a GTM. A fenti képen 3-as számmal jelölt részben a jó példákat látod, a 4-es számmal jelölt pedig egy rossz példa.
A következő sorokat kell ellenőrizned:
• Megvásárolt termékek: FB_C0NVERSIONS_API–Web-Variable-Custom_Data_ltems
• Megrendelés azonosító: FB_C0NVERSIONS_API–Web-Variable-Custom_Data_Transaction_ID
• Rendelés értéke: FB_C0NVERSIONS_API–Web-Variable-Custom_Data_Value
Ha a sorok végén azt látod, hogy „Undefined”, akkor javítanod kell a GTM változóit, erről részletes leírást találsz a következő, „Hibajavítás” című részben.
Lépj vissza a Google Tag Managerre:
A webes tárolóban a bal oldali menüben válaszd a „VÁLTOZÓK” menüpontot és a fenti képen 3-as számmal jelölt változók mindegyikénél végezd el az alábbi módosítást:
A fenti képen pirossal jelölt helyen cseréld le az eventModel szót ecommerce-re. Tehát a fenti példa esetében a jelölt helyen ennek kell szerepelnie:
ecommerce.currency
Ahogy néhány sorral feljebb említettem, a jelölt 4 helyen végezd el a cserét.
Teszteld le megint, hogy már rendben vannak-e a változók. Ha igen, akkor véglegesítsd a módosításokat a Tag Manager jobb felső sarkában található „Küldés” gombbal (ahogy ezt már többször mutattam az anyagban).
Ha még így sem működik jól, tehát a változóknál „undefined” feliratot látsz, akkor kérlek jelezd az info@tacitproject.hu-n és segítünk megoldani a problémát.
Az alábbi lerejtett részt ne töröld ki, amíg nincsenek visszajelzések az anyagról, mert még szükség lehet rá. Köszi! – Joci 2022 01. 09.
Az adatok ellenőrzéséhez nyisd meg a Google Tag Manager-ben a webes tárolót és kattints a jobb felső sarokban az „Előnézet” gombra:
Ekkor egy új ablakban megnyílig a Google Tag Assistant, itt add meg a weboldalad URL címét, ezután kattints a „Connect” gombra:
A weboldalad megnyílik egy új lapon, ha pedig visszalépsz a Tag Assistant lapra, akkor a következőt látod:
Kattints a „Continue” gombra, így eltűnik a felugró ablak és használhatóvá válik a Tag Assistant. A fenti képen 2-es számmal jelölt helyen látod, hogy milyen címkéket talált az Assistant az oldaladon (Itt a GTM és a GA4 azonosítókat kell látnod).
A fenti képen 3-as számmal jelölt szakaszban pedig a megnyitott oldalakat látod és azt, hogy az adott oldalhoz kapcsolódóan milyen eseményeket továbbított a GTM.
Következő lépésként kattints az előbb megnyitott weboldaladra és adj le egy rendelést, majd lépj vissza a Tag Assistant lapra:
1: A bal oldali oszlopban (ahol az oldalmegtekintések és a hozzájuk tartozó események vannak) kattints az utolsó oldalmegtekintéshez tartozó utolsó eseményre.
2: Kattints a „Variables” fülre.
Ezen az oldalon tudod ellenőrizni, hogy a megfelelő adatokat küldi-e el a GTM. A fenti képen 3-as számmal jelölt részben a jó példákat látod, a 4-es számmal jelölt pedig egy rossz példa.
A következő sorokat kell ellenőrizned:
• Megvásárolt termékek: FB_C0NVERSIONS_API–Web-Variable-Custom_Data_ltems
• Megrendelés azonosító: FB_C0NVERSIONS_API–Web-Variable-Custom_Data_Transaction_ID
• Rendelés értéke: FB_C0NVERSIONS_API–Web-Variable-Custom_Data_Value
Ha a sorok végén azt látod, hogy „Undefined”, akkor javítanod kell a GTM változóit, erről részletes leírást találsz a következő, „Hibajavítás” című részben.
A probémát az okozza, hogy különböző rendszerek különböző struktúrában továbbítják a szükséges adatokat, ezért az adatokra való hivatkozást kell javítani.
Bár elsőre bonyolultnak hangozhat, egy viszonylag egyszerű folyamatról van szó.
Tegyük fel, hogy a következőt látjuk:
Ez azt jelenti, hogy a megvásárolt termékek adataira helytelenül hivatkozik a GTM, ezért ezt javítani kell.
Maradj a Tag Assistant felületén és lépj át a Data Layer fülre:
A megjelenő kódban kell megkeresnünk a megfelelő elemet. Nézzük meg melyik változóval volt probléma:
FB_C0NVERSIONS_API–Web-Variable-Custom_Data_Items
A változónak a vége a legbeszédesebb, ezért ki is emeltem vastag betűvel. Ezt, vagyis az „items” szót kell megkeresnünk a fenti képen a kódban.
Ha megtaláltuk a megfelelő elemet, akkor már csak a hivatkozást kell javítanunk. Ehhez nézzük meg kicsit közelebbről a kódot:
Jól látszik, hogy bizonyos sorok beljebb kezdődnek, mások pedig még beljebb, ezzel jelzik a kód hierarchikus felépítését. (Ez kicsit olyan, mint a matrjoska baba – a kisebb elemek, a nagyobbakon belül helyezkednek el.)
A feladatunk megtalálni, hogy az előbb megtalált „items” elem melyik másik, nagyobb elemben van. Ezt úgy tudjuk megtenni, hogy megkeressük a felette lévő sorok közül a legközelebbi olyat, ami az „items” soránál kijjebb kezdődik. Ez a mi esetünkben a fenti képen 1-es számmal jelölt „ecommerce”.
A hivatkozás pedig a következő lesz:
ecommerce.items („ecommerce” elemen belül az „items” elem)
Ha ez megvan, akkor lépj a Tag Manager Webes tárolójába:
A bal oldali menüben kattints a „Változók” menüpontra, majd válaszd ki a megfelelő változót (ez a példa esetében a FB_C0NVERSIONS_API–Web-Variable-Custom_Data_Items), majd a fenti képen 4-es számmal jelölt helyen add meg az „Adatrétegbeli változó nevét” (ez a példa esetében ecommerce.items), végül mentsd el a változtatást.
Teszteld le megint, hogy már rendben vannak-e a változók. Ha igen, akkor véglegesítsd a módosításokat a Tag Manager jobb felső sarkában található „Küldés” gombbal (ahogy ezt már többször mutattam az anyagban).
Ha helyesen megjelennek az adatok, akkor a folyamat végére értél. Hamarosan sokkal több adatot fogsz látni a Facebookon és a Google Analytics felületén.
