A Google Analytics beállítások mellett hasonlóan fontos a Facebook-ökoszisztémához való integráció is, így ebben a cikkünben a Facebook Pixel integrációját mutatjuk be a Google Tag Manager (GTM) eszközének segítségével.
Facebook Pixel létrehozása
Regisztráljunk be a Facebook Business oldalára, és a megfelelő profilunk alatt hozzunk létre egy új Pixel kódot: https://business.facebook.com/events_manager/ a Create a Pixel gombra kattintva.
1. ábra – Facebook Pixel: pixel létrehozása
A megnyíló layerben adjuk meg a Pixel nevét és a weboldal linkjét.
2. ábra – Facebook Pixel: adatok megadása
A Tovább (Continue) gombra kattintva válasszuk a Set Up Manually lehetőséget.
3. ábra – Facebook Pixel: beállítási lehetőségek
Mentés után megkapjuk a beillesztendő kódunkat.
4. ábra – Facebook Pixel: mérőkód
A megkapott mérőkódot másoljuk ki és mentsük el, hogy később könnyen elérjük (lehetőleg a jegyzettömbbe).
Nyissuk meg a GTM felületét, és hozzunk létre egy új taget:
Név: FBP – Page View – All
Típus: Custom HTML
HTML: Másoljuk be a Facebook oldalról elmentett kódot.
Trigger: Válasszuk ki az All Pages szűrőt.
Ha mindennel megvagyunk, akkor az alábbi adatokat kell látnunk:
5. ábra – Google Tag Manager: Facebook Pixel Tag
Ezzel elkészültünk az alap Google Analytics és Facebook Pixel kódok implementációjával.
Ha egy kicsit szépíteni szeretnénk az implementáción, akkor a emeljük ki a Facebook Pixel kódból az azonosítót (jelen esetben nálunk: 995742814162193), majd hozzunk létre egy új változót:
Variables – New
Név: FBP – ID
Típus: Constant
Value: 995742814162193
6. ábra – Google Tag Manager: Facebook Pixel változó
Ezután nyissuk meg a korábban elmentett Facebook Pixel kódunkat (Tag / FBP – Page View – All), és a HTML kódot az alábbiak szerint módosítsuk:
<!-- 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', '{{FBP - ID}}');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={{FBP - ID}}&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
A félkövérrel kiemelt részletek módosultak. Ezzel azt mondtuk meg a GTM-nek, hogy a megadott kódrészletek helyére futáskor illessze be a FBP – ID változó (ami most konstans) értékét.
Ha a GTM-ben bárhol találkozunk “{{ }}” formátumú szövegrészlettel, akkor azt tudjuk, hogy egy változó értéke.
Tesztelés és élesítés
Kód létrehozása után már csak a tesztelés és a GTM verzió publikálása maradt hátra. Ennek menetéről a korábban publikált Google Tag Manager: alapértelmezett mérések beállítása cikkünkben található részletes információ.
A sorozat előző cikkei:
- Bevezetés a Google Tag Manager világába
- Google Tag Manager: a reguláris kifejezések
- Google Tag Manager: mérési definíciók, kifejezések
- Google Tag Manager: fiók létrehozása lépésről lépésre
- Google Tag Manager: alapértelmezett mérések beállítása
A következőkben ezekről fogunk még írni:
- GTM e-kereskedelmi- és kibővített e-kereskedelmi mérés
- GTM események felvétele
- GTM USERID, egyedi dimenziók, metrikák beállítása, virtuális oldal mérés
- GTM Cookiebot beállítások
- GA speciális oldalak mérése
