A Facebook Pixel (magyarul Facebook Képpont) bekötésére és beállítására a legjobb módszer a Google Tag Manager (magyarul Google Címkekezelő) használata, hiszen egy felületen az összes Pixel Esemény bekötését elvégezhetjük, tesztelhetjük a Facebook Képpont implementációnkat is, valamint a FB Pixel események egyes beállításait is a GTM-ben módosíthatjuk.
Ebben a Facebook Pixel Google Tag Manager útmutatóban két módszert is bemutatunk, hogyan tudod a Facebook Pixelt az oldalon elhelyezni Google Tag Managerrel.
Ez arra is lehetőséget fog adni, hogy haladóbb FB Pixel eseményeket is bekössük a qwboldalra, hogy ezáltal a Facebook Pixel igazán hasznos adatokat tudjon a Facebook számára beküldeni az oldaladon történő felhasználói eseményekről, ami a hirdetési algoritmust is segíteni fogja, hogy a leginkább releváns embereknek mutassa meg a Facebook és Instagram hirdetéseidet.
A cikkben kitérünk az alábbiakra:
- miért a Google Tag Managerben való implementáció a legjobb a Facebook Pixelkód elhelyezésére és a Pixel események beállítására
- hogyan ne installáljuk a Facebook Pixelt Google Tag Managerrel
- a Facebook Pixel alapkód bekötése és beállítása a Google Tag Manager Custom HTML (Egyéni HTML) módszerével (lépésről lépésre)
- a Facebook Képpont bekötése és beállítása Google Címkekezelő segítségével a Facebook Pixel Custom Template módszerrel (szintén lépésről lépésre megmutatva)
- a következő lépések miután a facebook Pixel alapkódot elhelyeztük Google Tag Managerrel.
Ez egy elég részletes útmutató lesz, így kezdő hirdetőknek, akiknek nincs nagy tapasztalatuk Google Tag Managerrel lehetnek olyan részek, amik nehezen érthetők első olvasásra, így kérdés esetén ne habozz azt feltenni a komment szekcióban.
Amennyiben professzionális segítségre van szükségef a Facebook Pixel Google Tag Managerrel való beállításában, mi is tudunk segíteni. Különösen akkor, ha nemcsak a cikkben bemutatott egyszerú PageView Pixel Event, hanem bonyolultabb Standard vagy Egyéni Facebook Eseményeket is be akarsz kötni az oldalra. Itt felveheted velünk a kapcsolatot a Facebook Pixel tanácsadás és implementáció kapcsán is.
Tartalomjegyzék
Hogyan tudjuk bekötni a Facebook Pixel a weboldalunkra?
A Facebook Pixel bekötésének és a FB Pixel események beállításának három fő módja van.
A Facebook Pixel kód manuális elhelyezése a weboldal <head> részében.
A legegyszerűbb módja a Facebook Képpont bekötésének, ha egyszerűen a Facebook Pixel alapkódot egyszerűen bemásoljuk a weboldalunk head részébe.
Ez a módszer akkor lehet igazán jó, ha csak az egyszerű PageView eseményt akarjuk beállítani, hiszen ez az eseménye minden egyes oldalbetöltésénél aktiválódik az oldalon. Amennyiben komplexebb Pixel Alapeseményeket vagy Egyéni eseményeket is szeretnék mérni, akkor már egy fejlesztő segítségére lesz szükséged ebben az esetben.
Facebook Képpont bekötése Partner Integrációval
A második lehetőség a Facebook Pixel bekötésére, ha azt a Facebook által támogatott Partner Integrációval tesszük meg. Ez akkor jöhet szóba, ha valamilyen népszerű CMS-t (pl. WordPress), vagy e-commerce platformot (pl. Shopify) használsz, hiszen csak limitált számú rendszert támogat a Facebook.
Igazából ezt a módszert sem ajánljuk, mivel noha a Facebook Pixel bekötésének és beállításának egy elég egyszerű módszerét teszi lehetővé, szinte teljesen lehetetlenné teszi azt, hogy az általunk kívánt Pixel eseményeket is bekössük, amit az alap partnet integrációval nem telepítettünk az oldalt.
Facebook Pixel Google Tag Managerrel való bekötése
Szemben az előző két módszerrel, a Facebook Pixel Google Tag Managerrel való bekötése és testreszabása lehetővé teszi, hogy a FB Pixel implementációt a számodra kívánt módon tudd végig vinni. Teljes szabadságot élvezel, hogy milyen Facebook Alapeseményeket hozol létre, és Facebook Egyéni Események létrehozása is meglehetősen könnyen megy, így bármilyen mikro vagy makro konverziót könnyen trackelhetsz a Facebook Pixellel, amit felhasználhatsz profi Facebook Egyéni Célközönségek, Hasonmás Célközönségek vagy éppen konverziós kampányok létrehozásánál.
Szintén nagy előnye a Google Tag Managerrel való bekötésnek, hogy ebben az esetben, amennyiben a GTM dataLayer-ünk (adatrétegünk) megfelelő adatokat már beküld, akkor fejlesztői segítségre és erőforrásra sincs szükségünk, magunk elvégezhetjük a teljes Facebook Pixel implementációt.
Ezek mellett még szintén a Facebook Pixel Google Címkekezelővel való implementációja mellett szól, hogy a GTM Preview &Debug (Előnézet) módja segítségével tesztelhetjük az implementációnkat mielőtt a Facebook Pixel eseményeket és kódokat publikálnánk az élő weboldalra.
Hogyan ne kössük be a Facebook Képpontot Google Tag Managerrel?
Fontos megemlíteni, hogy hogyan nem kéne a Facebook Pixelt implementálnod Google Tag Managerrel segítségével. Nem ajánljuk a Facebook Pixelt a FB-os partner Integráció segítségével bekötni.
Azt említettük, hogy a Partner Integráció is egy metódus arra, hogy a Facebook pixel követőkódot elhelyezzük a weboldalunkon, azonban egy kevésbé ajánlott módszer különösen nem a Google Tag Manager esetén.
GTM Partner Integráció esetén a Facebook kiveszi a kezedből az irányítást, maga elvgézi a Facebook Pixel alapkód implementációt, majd a Facebook Eseménybeállító segítségével, vagy az automatikus Pixel esemény felismerő segítségével azonban pontatlan adatméréshez vezethet.
Így összességében azt javasoljuk, hogy ne Partner Integrációval, hanem a következő fejezetekben általunk bemutatott módszer valamelyikével kössük be az oldalra a Facebook Pixel kódját.
2 módszer a Facebook Pixel alapkód elhelyezésére Google Tag Managerrel
Ahogy már említettük, alapvetően két módszer van arra, hogy a Facebook Pixelt bekössük, és a Pixel Eventeket implementáljunk a weboldalon Google Tag Managerrel. Az csak a személyes preferenciádon múlik, hogy a kettő közül melyiket választod.
Ez a két módszer a Google Tag Manager Egyéni HTML Címke (Custom HTLM Tag) módszer, vagy az Egyéni Sablon módszer, amit Simo Ahava GTM Pixel Sablonának a felhasználásával tudsz implementálni.
A következőkben mindkét módszert lépésről lépésre mutatunk be.
Természetesen mindkét módszernél alapkövetelmény, hogy már létre legyen hozva egy Google Címkekezelő fiók és tároló a weboldalad számára, és az az oldalra telepítve is legyen. Más beállítás azonban nem szükséges. Amennyiben még nincs a Google Tag Manager fiókod létrehozva, akkor olvasd el a fent linkelt cikkünket, ami egy jó bevezetést nyújt a Google Tag Managerhez.
Amúgy meg mindent innentől kezdve lépésről lépésre, képernyőfotók segítségével fogunk bemutatni, szóval nincs hozzá szükséges semmilyen előismeret.
A Facebook Pixel bekötés és beállítás Google Tag Managerben való implementálása Egyéni HTML címke módszerrel
Az első módszer az Egyéni HTML módszerrel való Facebook Pixel bekötés, ami révén a Facebook által megadott Facebook Pixel alapkódot, ami egy JavaScript kódrészlet, a Google Tag Manager segítségével mint egy HTML kód hozzáadjuk az oldalhoz.
A lényeg a lényeg, hogy a Pixelalapkód elhelyezésének lépései az alábbiak:
- Nyisd meg a Google Címkekezelő fiókod, válaszd ki a megfelelő fiókot és Google Tag Manager tárolót, amennyiben többhöz van hozzáférésed
- A képernyő bal oldalán, kattints a ’Címkék’-re, majd az ’Új’ gombra (ha angolul használod, ez a Tags fül)
- A bekúszó ablakon kattintsunk a ’Címke konfigurálása’ felületre
- A jobb oldalon megjelenő felületen pedig kicsit legörgetve, válasszuk az Egyéni HTML címke lehetőséget
- Rögtön el is nevezhetjük a GTM tag-et a bal felső sarokban, pl. ’FB Pixel – PageView Event’. Ez lesz ugyanis a FB Pixel eseményünk neve, ha az alapkódot elhelyezzük az oldalon.
- A HTML dobozba, ami egyelőre most mér üres, másold be azt a Pixel kódot, amit akkor kaptál, amikor létrehoztad a Facebook Képpontot. (vagy hozd létre most, ha még nem hoztad létre). Amennyiben nem tudod, hogy a FB Pixel kód van, akkor másold be oda az alábbi kódot:
<!– Facebook Pixel Code –>
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,’script’,
‘https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘init’, ‘2374223216200198‘);
fbq(‘track’, ‘PageView’);
</script>
<noscript><img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=2374271216200198&ev=PageView&noscript=1″
/></noscript>
<!– End Facebook Pixel Code –>
- Nagyon fontos, hogy a pirossal jelölt részek, ahol a Facebook Pixel azonosító található meg, oda a saját Facebook Pixel ID-dat másold be. Ezt szintén a Facebook Vállalkozáskezelőben a Facebook Eseménykezelő eszközre navigálva találhatod meg.
- A HTML címke speciális beállításaiban a Címke aktiválási lehetőségei-nél állítsd át arra, hogy ’Oldalanként egyszer’ aktiválódjon a címke.
- Végül, de nem utolsó sorban az aktiválási szabályoknál állítsd be azt, hogy ’Minden oldal’ esetén aktiválódjon.
- Ellenőrizd, hogy mindent megfelelően beállítottál, majd Elmentheted a Címkét a jobb felső sarokban lévő ’Mentés’ gombbal.
- A Tag Manager Előnézetével (angolul Preview and Debug mode), tesztelheted, hogy a Pageview Pixel Esemény megfelelően aktiválódik az összes weboldalon. Amennyiben igen, akkor a publikálhatod a GTM Címkét, és mostantól a Facebook Pixel minden oldalon aktiválódni fog az oldalbetöltődéseknél.
A Facebook Képpont bekötése Google Címkekezelővel Facebook Pixel GTM Sablon használatával
Ha úgy gondolod, hogy az előző megoldás túl bonyolult volt számodra, akkor próbálkozhatsz helyette ezzel a Facebook Pixel Google Tag Manager Sablon Címke megoldással. Mindössze annyi kell hozzá, hogy előtte installálod Simo Ahava Facebook Pixel Sablonját.
Lépésről lépésre így néz ki a folyamat:
- Ismét nyisd meg a Google Tag Manager accountodat és containeredet, ha még nem tettél volna így. Először kattints a bal oldalon lévő ’Sablonok’ gombra.
- A Címkesablonok résznél kattints a ’Keresés a Gallériában’ fülre és keress rá arra, hogy ’facebook’
- Itt látni fogsz egy Facebook Pixel nevű sablont, amit ’gtm-templates-simo-ahava’ készített. Kattints rá, majd kattints a ’Hozzáadás a munkaterülethez’ gombra, majd erősítsd meg, hogy tényleg hozzáakarod a template-et adni a workspace-edhez.
- Mivel a Facebook Pixel Sablont a GTM-hez hozzáadtuk, most a Címke részre mehetünk, majd az ’Új’ gombra és a ’Címke konfigurálása’ gombra kattinthatunk.
- A bal oldalon megjelenő címketípusok közül, vagy keressük meg az imént telepített Facebook Pixel Címke Sablonunkat, vagy rá is kereshetünk, hogy ’facebook’ és meg fogjuk találni. Kattintsunk rá erre.
- A bal felső sarokban nevezzük el a GTM Címkénket, pl. ‘Facebook Pixel – PageView’-nak.
- Először adjuk hozzá a Facebook Pixel azonosítónkat a Facebook Pixel ID részhez. Az első módszernél leírtak azt, hogy találhatod meg ezt a Pixel azonosítót.
- Az Event Name résznél válaszd a Standard rádiógombot, majd a PageView Pixel Event-et, ahogy a képen is látható.
- Mivel itt a Facebook Képpont alapkódról van szó, minden egyebet az alapbeállításon vagy éppen üresen hagyhatunk.
- Ahogy az előtő metódusnál, itt is állítsuk be az Aktiváló szabályt, ami természetesen a ’Minden oldal’ trigger lesz, hiszen azt szeretnénk, hogy minden oldalon aktiválódjon a Facebook Pixelünk.
- Amennyiben mindennel megvagy, kattints a ’Mentés’ gombra a GTM Tag elmentéséhez a bal felső sarokban.
- Ahogy az előző módszernél is említettük A Tag Manager Előnézetével (angolul Preview and Debug mode) tesztelheted, hogy a Pageview Pixel Esemény megfelelően aktiválódik az összes weboldalon. Amennyiben igen, akkor a publikálhatod a Címkezelő Címkét, és mostantól a Facebook Képpont minden oldalon aktiválódni fog az oldal betöltődéseknél.
Gratulálunk, ha mindent jól csináltál, akkor a Facebook Pixel Google Tag Managerrel való telepítése sikeres volt és most már a Facebook Pixel a Google Tag Manageren keresztül lesz képes a weboldalon történő felhasználói interakciókat mérni.
A Facebook Pixel Események tesztelése és javítása
Noha a Google Tag Manager Preview és Debug módja elég jó arra, hogy megnézzük, hogy a Facebook Pixel GTM-en keresztül való bekötése megfelelő, vannak egyéb megoldások annak ellenőrzésére, hogy ez a PageView Pixel esemény megfelelően küldi-e az adatokat. Ezeket fogjuk most röviden megemlíteni.
A Facebook maga is több megoldást kínál erre a problémára a Facebook Eseménykezelőn (Events Manager)-en keresztül, amit a Facebook Vállalkozáskezelőn keresztül tudsz elérni.
Itt amennyiben az Adatforrások aloldalra navigálsz, akkor alapvetően három fül is van, ahol információt szerezhetsz T egyes Facebook Pixel Eseményekről. Ez az Áttekintés, a Diagnosztika, valamint az Események tesztelése fül.
Emellett a Facebook Analytics-ben is van egy aloldal, ahol elég sok infót tudhatsz meg a jelenleg az oldalon aktív Facebook Pixel eseményekről.
Amennyiben több részletre vagy kíváncsi, hogy ezek az ingyenes eszközök hogyan működnek, akkor mindenképpen olvasd el a bejegyzésünket a Facebook Pixel Eseményekről is, ahol részletesebben megmutatjuk, hogy milyen infókat adnak ezek az eszközök a Facebook Képpontod Eseményeikről, így a cikkben bemutatott Facebook Pageview Event-ről is.
Ha nincs hozzáférésed egy adott Facebook Vállalkozáskezelőhöz, vagy pedig csak gyorsan szeretnéd látni, hogy egy adott Pixel Event megfelelően működik-e, akkor használhatod erre a Facebook Pixel Helper Chrome kiegészítőt is.
Ehhez csak annyit kell tenned, hogy installálod a Chrome kiegészítőt és innentől kezdve bármilyen weboldalról legyen szó, ha a FB Pixel rajta van az oldalukon, akkor láthatod, hogy milyen Pixel Alapesemények vagy éppen Egyéni Események vagy Egyéni Konverziók aktiválódnak az oldalon, amikor épp azt te böngészed.
A Pixel Helper azt is meg fogja mutatni, hogy az adott Pixel esemény, amit éppen triggereltél az oldalon, az megfelelően működik, vagy éppen valami hibája. Ha észleli a Facebook Pixel Helper, hogy valami nem kóser, arról vagy egy Figyelmeztetés vagy Errort is kidob, és jelzi, hogy mit lát Pixel implementációs hibának, így egyből megnézheted Google Tag Manager-ben, hogy mi okozza jelenleg a hibát.
Segítség kérése Facebook Pixel bekötéshez és Pixel események implementációjához
Bármelyik Facebook Pixel Google Tag Manager implementációs módszert választottad, amennyiben elakadtál már az egyszerű PageView eseménnyel, vagy nem tudod, hogyan kéne a többi fontos Pixel Alapeseményt meg Egyéni Eseményt bekötni az oldalra, mi szívesen tudunk professzionális segítséget nyújtani, és akár az elejétől a végéig elvégezzük helyetted a teljes implementációt.
Itt tudod velünk felvenni a kapcsolatot, amennyiben szeretnéd igénybe venni a Facebook Pixelhez kapcsolódó szolgáltatásainkat.
A következő lépések a Facebook Képpont alakód Tag Managerrel való telepítése után
A Facebook Pixel Google Tag Managerrel való elhelyezése valójában csak az első lépés a megfelelő Facebook Pixel implementációban. Mostantól az oldallátogatásokat fogod tudni követni és az adatokat visszaküldeni a Facebooknak a PageView esemény segítségével, azonban a már többször említett Pixel Alapesemények (Standard Events) és Egyéni Események (Custom Events) bekötése is szükséges ahhoz, ha a felhasználói akciókat, mikro és makrokonverziókat szeretnénk az oldalon mérni, azokból közönségeket létrehozni, vagy éppen a Facebook hirdetési kampányokat az adott konverziókra optimalizálni.
Amennyiben többet szeretnél megtudni ezekről a Facebook Pixel Eseményekről, ajánljuk az alábbi cikkeket:
- Facebook Pixel Alapesemények (Standard Events) útmutató és használata kezdőknek
- Facebook Pixel Egyéni Események (Custom Events) útmutató és használata kezdőknek
Összefoglalás – Facebook Pixel Google Tag Managerrel való elhelyezése a weboldalon
Ok, akkor nagyjából ennyi. A cikkben bemutatott két módszer valamelyikével tudod a weboldalon implementálni a Facebook Pixel mérést a Google Tag Managerrel.
Amennyiben elakadtál a Facebook Pixel implementációval a beállítások bármilyen részénél, vagy éppen nem akarod most csak emiatt megtanulni a Google Tag Managert, akkor itt veheted fel velünk a kapcsolatot, és megnézzük, hogy tudunk-e segíteni.