So fügst du den Facebook Pixel in WordPress ein [DSGVO konform]

Von Jonas Tietgen in Technik

Facebook Pixel in WordPress einbinden Headbild

Facebook Ads sind mittlerweile zu der am besten steuerbaren Werbung geworden, die man buchen kann. Die klare Zielgruppendefinition für gewisse Anzeigen zusammen mit der Möglichkeit, Websitebesucher einer gewissen Seite mit spezifischen Ads zu bespielen ist aus Marketing-Sicht einfach genial!

Ein kleines WordPress Hindernis beim Einsatz der Facebook Ads in stellt uns der für das Nachverfolgen der Seitenbesucher und Conversions (Zielvorhaben/Handlungen) nötige Facebook Pixel in den Weg. Denn um Seitenbesucher mit Ads zu bespielen, müssen sie natürlich zunächst mal mit diesem „Pixel“ getrackt werden.

Zudem möchte man die Werbung ja nicht nur an die Besucher ausspielen, sondern auch messen können, welche Anzeigen erfolgreich sind. Das erreicht man bei Facebook Ads mit den Standard- und Custom-Conversions. Für beide benötigt man den Facebook Pixel auf der eigenen WordPress Website.

Du benötigst also sowohl für das Ausspielen von Werbung an deine Seitenbesucher, als auch für das Tracking von Conversions den Facebook Pixel auf deiner WordPress Website!

In diesem Artikel zeige ich dir mehrere DSGVO konforme Möglichkeiten, den Facebook Pixel Code in deine WordPress Website einzufügen.

Wieso du den Facebook Pixel auf deiner Website brauchst

Das hat mehrere Gründe, wie schon in der Einleitung geschrieben.

Zunächst einmal haben deine Ads eine sehr viel höhere Erfolgsrate, wenn du sie an Menschen ausspielst, die bereits auf deiner Website waren, dich somit also kennen. Um diese Leute zu erreichen, musst du sie über den Facebook Pixel auf deiner Website „einfangen“.

Wenn du den Erfolg deiner Ad-Kampagnen anhand von Zahlen festmachen möchtest (und nichts anderes zählt), dann benötigst du den Facebook Pixel, um die sogenannten Conversions, also die durchgeführten Handlungen und Zielvorhaben, zu verfolgen.

Was ist der Facebook Pixel eigentlich?

Nein, es ist kein grafischer Pixel, der irgendwo auf deiner Seite als einzelner Punkt erscheint 😉

Der Facebook Pixel ist nichts anderes als ein mehrzeiliger Code, ähnlich zu dem Google Analytics Tracking-Code. Und so sieht der Facebook Pixel aus:

<!-- 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', 'XXXXXXXXXXXXXXXX');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Der Facebook Pixel und die DSGVO

Der Facebook Pixel sammelt Daten des Websitebesuchers, schickt sie an Dritte (Facebook) und setzt zudem Cookies.

All das sorgt locker dafür, damit der Pixel lebenslänglich im DSGVO Gefängnis verschwindet.

Doch natürlich gibt es auch einen Weg, das Tracking für deine Facebook Ads DSGVO konform einzusetzen: Das Opt-In.

(Wenn du noch kein Opt-In für deine Cookies, Tracking und externe Medien eingebaut hast, zeige ich dir in dieser Anleitung, wie du mit Borlabs Cookie genau das machen kannst)

Opt-In bedeutet, dass der Websitebesucher dem Tracking aktiv zustimmt. Du kennst ja die Banner, die mittlerweile beim ersten Aufruf fast jeder Website erscheinen und versuchen, dir irgendetwas über Cookies zu erzählen.

Opt-In für Tracking & Facebook Pixel wegen DSGVO Beispiel
Ein klassisches Opt-In Banner beim ersten Aufruf meiner Website. Erstellt mit Borlabs Cookie*.

Genau das sind die Opt-In Banner. Sie blockieren sämtliches Tracking und das Setzen von Cookies, bis der Websitebesucher bei diesem Banner dem Tracking zustimmt.

Zusätzlich muss die Verwendung des Facebook Pixels in deiner Datenschutzerklärung beschrieben werden. Genau wie das Opt-In ist auch diese Maßnahme Pflicht!

Erste Urteile und weitere rechtliche Infos zum Facebook Pixel findest du hier bei e-recht24.

Natürlich zeige ich dir hier in diesem Artikel, wie du den Facebook Pixel DSGVO konform in deine Website einbindest.

Erstelle deinen Facebook Pixel

Zunächst einmal musst du deinen Facebook Pixel erstellen, damit du den Code von Facebook zur Verfügung gestellt bekommst. Pro Werbekonto kann nur ein Pixel erstellt werden, der im Anschluss auch nur noch bearbeitet, nicht mehr gelöscht werden kann!

Auch wenn du mehrere Websites besitzt, die du mit Facebook Ads bespielen möchtest, nutzt du für alle gemeinsam den selben Facebook Pixel.

  1. Rufe die Einstellungsseite für den Facebook Pixel im Werbeanzeigenmanager auf
  2. Wenn du noch keinen Pixel erstellt hast, klicke auf „Pixel erstellen“ und gib ihm einen Namen (nur für dich sichtbar)
  3. Natürlich musst du nun noch die Nutzerbedingungen akzeptieren
  4. Bestätige nun mit dem Klick auf „Pixel erstellen“

So, schon hast du deinen Facebook Pixel erstellt und kannst damit loslegen, ihn in WordPress einzufügen!

So bindest du den Facebook Pixel in WordPress ein

Viele Wege führen nach Rom (oder in diesem Fall zu Facebook).

Es gibt mehrere Möglichkeiten, den Facebook Pixel einzufügen. Ich zeige dir hier die sinnvollsten und einfachsten Varianten.

Egal, wie du den Pixel letztlich einfügst, wichtig ist das Opt-In & der Text in der Datenschutzerklärung auf deiner Website!

[Meine Empfehlung] Einfügen mit dem Plugin „Borlabs Cookie

Borlabs Cookie Bild
Borlabs Cookie läuft auch hier auf der Website, um das Opt-In umzusetzen

Wenn du die Kombination aus toller Darstellung und einfacher Umsetzung suchst, bist du bei dem deutschen Plugin Borlabs Cookie* richtig.

Dieses Plugin sorgt für das Opt-In Banner und lässt dich nicht nur den Facebook Pixel datenschutzkonform einfügen, sondern auch sämtliche anderen Tracking-Codes und externen Verbindungen.

Ich nutze Borlabs Cookie hier auf dieser Website. Meiner Meinung nach sind die größten Vorteile:

  • trotz vieler Einstellungsmöglichkeiten einfach einzurichten
  • eine sehr ausführliche, leicht verständliche Dokumentation
  • deutsches Plugin, deutscher Support, deutscher Programmierer
  • komplett übersetzbar mir WPML
  • Statistiken über Opt-Ins

Du musst in das Plugin 39€ (inkl. MwSt.) investieren und bekommst zusätzlich ein Jahr Support & Updates.

Alle Infos zum Plugin und die Möglichkeit zum Kauf findest du hier*.

Einrichtung des Facebook Pixels in Borlabs Cookie

  1. Installiere und aktiviere Borlabs Cookie*
  2. Navigiere zu „Borlabs Cookie“ -> „Lizenz“ und gib deinen Lizenzschlüssel ein
  3. Klicke auf „Cookies“ -> „Markting“ -> Neu hinzufügen
  4. Wähle nun bei „Service“ den „Facebook Pixel“ aus
  5. Achte darauf, dass der Status auf „An“ steht
  6. Hinterlege bei „Zusätzliche Einstellungen“ deine Facebook Pixel-ID und speichere
  7. Gehe zu den „Cookie Gruppen“ und stelle sicher, dass „Marketing“ bei „Status“ aktiv ist

Borlabs Cookie grundsätzliche Einstellungen

Einstellungen in Borlabs Cookie
Die Einstellungen der Opt-In Box (Cookie-Box) in Borlabs Cookie. (Keine Sorge, du musst hier kaum etwas machen)

Zusätzlich zum Einbau des Facebook Pixels (und deiner anderen Tracking-Codes), musst du das Plugin noch fertig konfigurieren. Grundsätzlich kannst du die von Haus aus hinterlegten Einstellungen beibehalten, außer du möchtest etwas ändern.

Mache dir keine Sorgen, weil es so viele Einstellungen gibt. Wie schon geschrieben, kannst du erst einmal die Grundeinstellungen übernehmen und solltest nur die Dinge anpassen, die du ändern möchtest.

Zudem gibt es im Plugin selber, neben dein Einstellungen, nützliche Tipps und Erklärungen!

Prüfe unter „Cookie Box“, ob die Darstellung des Opt-Ins zu deiner Zufriedenheit eingestellt ist. Du kannst hier die Farben, Texte und beispielsweise dein Logo ändern. Vergiss hier nicht, den Link zu den Datenschutz- und Impressumseiten zu hinterlegen.

Wenn du Borlabs Cookie scharf schalten möchtest, kannst du das in der ersten Einstellung bei „Cookie Box“ -> „Cookie Box anzeigen“ machen. Stelle hier den Schieberegler einfach auf „An“.

Das hier ist keine komplette Anleitung zur Einrichtung von Borlabs Cookie. Hierfür schaust du am besten in die Borlabs Cookie Anleitung.

Einfügen über das Plugin „Pixelmate*

Wenn du noch kein Plugin für das Opt-In nutzt, empfehle ich dir das oben vorgestellte Borlabs Cookie.

Wenn du Pixelmate bereits besitzt, zeige ich dir gerne, wie du den Facebook Pixel hier schnell und einfach einbaust.

  1. Navigiere zu „DSGVO Pixelmate“ -> „Facebook Pixel“
  2. Aktiviere die Checkbox bei „Facebook Pixel aktivieren“
  3. Hinterlege bei „Facebook Pixel ID“ deine Pixel ID
  4. Optional: Klicke auf „Individuelle Nachricht schreiben“, um den Text für den Facebook Pixel in der Cookie-Box zu ändern.
  5. Speichere deine Änderungen auf der rechten Seite ab
  6. Stelle sicher, dass du unter „DSGVO Pixelmate“ deine Datenschutz- und Impressumsseite hinterlegt hast

Einfügen über die header.php Datei

WICHTIG
Du musst natürlich auch beim manuellen Einfügen des Codes ein Opt-In für den Nutzer bereitstellen. Das kannst du anschließend entweder über ein Plugin wie Borlabs Cookie oder Pixelmate realisieren (dann kannst du aber auch direkt die oben genannten Mehoden nutzen), mit einem externen Tool oder mit einem eigenen JavaScript Code.

Bei dieser Methode fügst du den Facebook Pixel Code direkt in der Header-Datei deines Themes ein.

Da die header.php Datei beim Update deines Themes überschrieben wird, empfehle ich dir dringend, diese Methode nur in Kombination mit einem Child Theme zu nutzen!

Wenn du dein Theme wechselst, musst du auch den Code erneut in die header.php hinterlegen, auch wenn du ein Child Theme genutzt hast.

Facebook Pixel Code in header.php einfügen
So fügst du den Facebook Pixel manuell in die header.php Datei ein.
  1. Rufe die Einstellungsseite für den Facebook Pixel auf
  2. Klicke bei deinem Pixel oben rechts auf „Details“
  3. Nun findest du oben rechts einen Button „Einrichten“ und im sich daraufhin öffnenden Fenster den Link „Code manuell selbst einrichten“
  4. Kopiere den im Abschnitt „2“ stehenden Code (einfach darauf klicken)
  5. Navigiere mit Hilfe des Editors in WordPress („Design“ -> „Editor“) oder einem FTP Programm zu deinem Child Theme (wp-content -> themes -> XY Child) und öffne die header.php Datei
  6. Suche nach dem schließenden </head> Tag
  7. Füge den Pixel direkt vor dem </head> Tag ein
  8. Speichere die Datei

So testest du, ob der Facebook Pixel funktioniert

Nach dem Einfügen solltest du natürlich überprüfen, ob der Pixel korrekt eingebunden ist. Am einfachsten funktioniert das mit dem Facebook Pixel Helper Add-On für Google Chrome.

Facebook Pixel Helper Add-On

Hast du es installiert, findest du oben rechts in Chrome ein neues Icon. Klicke es einfach an und in dem kleinen Fenster sollte dir nun angezeigt werden „One pixel found on…„.

Nach ein paar Tagen solltest du zudem in der Pixelübersicht auf Facebook schauen, ob Aktivität verzeichnet wurde. Dadurch kannst du sicher sein, dass die getrackten Besucher auch wirklich bei Facebook ankommen.

Facebook Pixel Aktivitätsübersicht
Wenn der Facebook Pixel Aktivitäten verzeichnet, wirst du sie in dieser Art angezeigt werden

Lass mich an deinem Vorgehen teilhaben und schreibe in die Kommentare, wie du den Facebook Pixel auf deiner Website eingebunden hast.

Lass deine Meinung da!


  1. Tolle Anleitung, Jonas. Die hätte ich schon vor ein paar Wochen gebraucht. 😉
    Ich baue alle Pixel inzwischen mit dem Plugin Tracking Code Manager ein. Das hat gleichzeitig den Vorteil, dass der viele Code nicht die Ladezeit verlängert.
    Viele Grüße aus Berlin
    Roswitha

  2. Hmmm… und der Datenschutz? Angesichts des aktuellen Hypes um die DSGVO wäre es cool, wenn du zumindest erklären würdest, worauf man achten muss, wenn man das Pixel rechtlich korrekt einbinden will.

    LG
    Jenny

    1. Moin Jenny,

      aktuell kenne ich nur eine ganz ordentlich aussehende Lösung zum Opt-In des Pixels. Ich habe das natürlich im Artikel ergänzt und werde ihn up-to-date halten, sobald es eine ordentliche Lösung gibt!

      Grüße
      Jonas

  3. Hallo Jonas,

    du schreibst, dass ein Pixel auch auf mehreren Webseiten eingebunden werden kann. Sind die Daten dann in der Statistik getrennt? Oder werden die PageViews aller Seiten zusammengeworfen (was natürlich sehr ungünstig wäre)?

    Viele Grüße
    Katharina

    1. Moin Katharina,

      nein, die Statistiken sind nicht getrennt. Du kannst aber natürlich Custom Conversions und eigene Zielgruppen anhand der URL erstellen.
      Wenn du es klar trennen möchtest, müsstest du über den Werbeanzeigenmanager ein neues Konto erstellen.

      Grüße
      Jonas

  4. Hallo, Habe gerade Deinen Bericht gelesen weil ich das Problem habe wenn ich den Pixel von Facebook im Header eingebettet habe funktioniert mein Google analytics nicht mehr. Habe dann versucht den Google code im Footer reinzutun, Hilft auch nicht. Ich dachte ich würde bei Dir die Lösung finden. Leider nicht, muss wohl weitersuchen. Oder gibt es gar keine Lösung, kann man nur eines von beidem benutzten?? Gruss Hans

    1. Moin Hans,

      ich würde dir eine ganz einfache Lösung vorschlagen:
      Da du aufgrund der DSGVO sowieso ein Opt-Out oder Opt-In einbauen musst, nutze am besten das Plugin „Pixelmate*„. Damit kannst du ganz einfach Google Analytics und Facebook Pixel einbinden, während gleichzeitig ein Opt-In / Opt-Out erstellt wird.

      Viele Grüße
      Jonas

  5. Vielen Dank für diese kleine Anleitung!
    Eine Frage habe ich allerdimgs noch:
    Ich habe den FB Pixel über das „Facebook Pixel“ Plug in instaliert.
    Ist es mit diesem Plugin auch so dass der Pixel auf allen Seiten funktioniert, oder muss ich ggf. zusätzlich auch noch mit dem Header Footer Plugin wie oben beschrieben arbeiten?

    1. Moin Sascha,

      in der Regel wird der Code automatisch auf allen Seiten eingebaut, ansonsten macht das Plugin auch keinen Sinn 🙂
      Du kannst das mit dem Facebook Pixel Helper Browser-Addon testen.

      Grüße
      Jonas

  6. Hallo Jonas,
    nun habe ich das Plugin hochgeladen und dort das facebook-Pixel eingetragen. Beim Test in Facebook Pixel Helper steht „No pixels found on . Ad and tracking blockers can prevent pixel fires.“
    Nun habe ich die pixel-Id ebenso in Pixelmate eingegeben, aber daselbe Ergebnis.

  7. Hallo Jonas,
    vielen Dank für den Artikel – gut, dass ich nochmal geschaut habe. Der Facebook-Pixel war schon mal auf meiner Seite… bis sie neu aufgesetzt wurde… habe ihn soeben in Pixelmate ergänzt. Da war bis eben nur Google Analytics drin. Warum auch immer.
    Liebe Grüße,
    Anja

  8. Danke für diesen ausführlichen Artikel! Leider hat das Einbauen des Pixels mit Borlabs nicht funktioniert. Der Pixel Helper zeigt den Pixel nicht an und in meinem Cookie-Banner fehlt der Punkt „Marketing“ komplett, obwohl ich ihn im Backend aktiviert habe. Ich mache mich jetzt auf die Fehlersuche, bin aber guter Hoffnung, dass ich es noch irgendwie gewuppt bekomme. Dein Artikel war auf jeden Fall ein sehr hilfreicher Einstieg 🙂

  9. Hei Jonas,

    stimmt! In einer Nacht-und-Nebel-Aktion (die Sache hat mir keine Ruhe gelassen) habe ich den Fehler gefunden. Schuld waren Autoptimize und/oder Cachify. Ich habe beide deaktiviert, meine Angaben in Borlabs noch mal bestätigt und dann lief der Pixel plötzlich. Ohne Deinen Artikel hätte ich für diesen ganzen Prozess des Einrichtens wahrscheinlich fünfmal so lange gebraucht … Danke!

    Viele Grüße

    Jane

  10. Hey Jonas, cool und … ich bin verwirrt. Heißt das, dass ich den Pixel nur in Borlabs einfügen muss und dann nicht noch im Header?
    Ich bin gespannt auf deine Antwort.
    Viele Grüße
    Susa

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}