7 stappen naar naamsbekendheid

Wilma Kaptein

Gepubliceerd op 06 september 2020

Meerdere Facebook pixels op één website installeren – Zo doe je dat

Leestijd 8 minuten

Je installeert meerdere Facebook pixels op één website door de basiscode van beide pixels onder elkaar te zetten in de Head sectie van je website. Dat kun je doen op verschillende manieren:
 
  1. Zelf de code te programmeren aan de achterkant van je website, tussen de openingstag en sluitingstag .
  2. Een plugin gebruiken voor de Facebook pixel code. Veel mensen hebben een wordpress website en gebruiken de standaard Facebook plugin. Met deze standaard Facebook plugin voor WordPress, kun je maar één pixel installeren. Gebruik daarom een plugin die een naam heeft als ‘Insert Headers and Footers‘. Daarmee kun je meerdere pixelcodes onder elkaar programmeren in je website.
  3. Via Google Tag Manager de beide Facebook pixels toevoegen als 2 losse tags.
 
 

Hoe pas je de basiscode van de Facebook pixel aan zodat beide pixels goed werken?

Om te voorkomen dat er een pageView of Lead of Purchase dubbel wordt geteld, verander je in de basiscode track naar trackSingle.
 
Toen je de pixel voor het eerst op je website ging zetten, vond je de code ervan in Advertentiebeheer > Gebeurtenisbeheer > Gegevensbronnen. Als jouw pixel eenmaal goed op je website staat, vind je de basiscode niet meer in Gebeurtenisbeheer. De basiscode vind je op deze pagina en is voor iedereen hetzelfde. Het verschil zit hem in de pixel ID die er in staat.
 
Zo ziet dat er dan uit.
 
Normaal staat er voor de pixel ID ‘track’ :
 
<script>
...base code...
fbq('init', '1234567890');
fbq('track', '1234567890');
</script>
 
En nu verander je de code van fbq ‘track’ naar ‘trackSingle’:
 
<script>
...base code...
  fbq('init', '1234567890');
  fbq('trackSingle', '1234567890');
</script>
 
 

Hoe zet je die twee pixelcodes dan onder elkaar?

Hoe zet je die codes dan onder elkaar, voeg ik me af, nadat ik de uitleg van Yan had gelezen. Na wat testen bleek dit te werken:
 
Daarvoor heb je 2 opties:
 

1. In de head of plugin zet je beide stukken codes voor elke pixel gewoon onder elkaar.

Zo:
 
<!– Facebook Pixel Code –>
<script>alles van pixel 1</script>
<noscript> <img height=”pixel-ID-1″/> </noscript>
<!– End Facebook Pixel Code –>
<!– Facebook Pixel Code –>
<script>alles van pixel 2</script>
<noscript> <img height=”pixel-ID-2″/> </noscript>
<!– End Facebook Pixel Code –>
 
 
Je hebt dan wel veel dubbele code en dat is wat overbodig. Hoe je het ook korter kunt opschrijven en coderen, beschrijf ik hieronder.
 

2. Je voegt de ‘init’ code van de tweede pixel toe aan de basiscode van de eerste pixel

Zo zet je beide fbq ‘init’ codes onder elkaar in de basiscode. Je voegt dus de paars gekleurde code toe aan de basiscode van jouw pixel:
 
<!-- 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', '{pixel-ID-1}');
fbq('init', '{pixel-ID-2}');
fbq('trackSingle', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={pixel-ID-1}&ev=PageView&noscript=1"/>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={pixel-ID-2}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
 

3. Nog makkelijker: Google Tag Manager

Als je Google Tag Manager gebruikt, richt je daar 2 pixels in. Julian heeft helder beschreven hoe je dat doet:
 
Als je al een Facebook Pixel hebt ingericht, zet je daarin de extra code met de nieuwe pixel ID. Heb je nog niet eerder een Facebook Pixel op je website gezet? Ga dan zo te werk:
 
  • Maak dan een nieuwe tag aan.
  • Kies voor een Custom HTML Tag configuratie.
  • Kopieer de basiscode die je van Facebook in Gebeurtenisbeheer hebt gekregen en plak die in het lege veld.
  • Kies als Trigger voor All Pages.
  • Sla je tag op.
Omwille van het voorbeeld heb ik in plaats van de 15-cijferige id ‘PIXEL-ID-1’ en ‘PIXEL-ID-2’ geschreven op de plek van de pixel ID’s.
 
Zo zet je met google tag manager meerdere facebook pixels op je website
Maak dan een tweede gebeurtenis tag om de pageviews te tracken:
 
  • Kies voor een Custom HTML Tag configuratie.
  • Plak in het lege veld de pageview tracking code:  fbq(‘trackSingle’, ‘PageView’);
  • Kies als Trigger voor All Pages.
  • Sla je tag op.

 

Custom html in google tag manager
Je codes staat nu goed genoeg. Test of ze werken met de volgende stap.
 
 
 

Test de code voordat je hem implementeert

Voordat je een code op je website zet, wil je natuurlijk weten of hij goed werkt. Daarvoor heeft Google Tag Manager de preview modus.
 
  • Klik rechtsboven op de knop ‘Preview’ (staat naar ‘submit’).
  • Open in een andere tab van dezelfde browser je website.
  • Onderaan zie je nu een code balk (die ziet je klant niet) met daarin de tags die afgevuurd worden.
Als het goed is zie je daarin de basiscode van de pixel en de eventcode voor de trackSingle PageView:
 
 
Dit is wat je ziet als je de code van google tag manager gaat testen

Als je codes inderdaad goed staan, zie je ook dat Facebook data eruit terugkrijgt. Dat kun je de checken met de Chrome Extension Facebook Pixel Helper:

 

De chrome extensie facebook pixel helper laat zien welke events vuren op je website
Check, check, dubbelcheck. Alles staat goed, dus implementeer de code maar op je website! Tik in Google Tag Manager op ‘Submit’, zing je mooiste liedje en tadaa! je Facebook pixel en die van je partner worden nu beide afgevuurd op je website.
 
 
 

Hoe zorg je ervoor dat een conversie niet dubbel geteld wordt?

Door trackSingle voor de pixel ID te zetten, voorkom je een dubbele registratie van een event op je webpagina. Daarom pas je de code aan zoals ik hierboven beschreef.
 
 

Over de schrijver

Wilma Kaptein

Wilma Kaptein is marketingcoach voor duurzame ondernemers die een continue stroom klanten willen op een manier die wél werkt en bij hen past.

Ze wil de wereld verbeteren, mooier en duurzamer maken. Door bedrijven te laten groeien die dááraan werken. Deze doorpakkers met visie helpt ze via de PowerBoost om met duurzame marketing makkelijker de leukste klanten aan te trekken, je kernboodschap helder over te brengen, campagnes authentiek én winstgevend te maken en de website overtuigend. Zodat je marketing effectief is en continu klanten oplevert.

Wilma werkt vanuit overtuigingspsychologie, neuromarketing en growth hacking. Samen met jou zorgt ze ervoor dat je veel meer resultaat en effect krijgt van wat je doet.

Hoe maak je de wereld mooier met je bedrijf?

Hoe maak je de wereld mooier met je bedrijf?

Leestijd 7 minutenDuurzaam ondernemen, hoe doe je dat? De wereld een beetje mooier maken, dat wil ik ook. Daarom help ik ondernemers om hun marketing op een duurzame manier te doen: 'fair marketing'. Wat is fair marketing en waarom werkt dat zoveel beter?   Fair...

Blog jezelf bovenin google

Blog jezelf bovenin Google

Leestijd 7 minutenNiet. Te. Vinden. Ik googlede met een uitgebreide, specifieke zoekopdracht en toch kwam de meest relevante website niet naar boven. Hoe is dat bij jou?Weet jij waar je klanten op zoeken?En weet jij op welke zoekopdrachten jij wél gevonden wordt? Dat...

Loop geen omzet mis!
Met deze groeitips krijg je continu klanten.