Facebook Pixel und Datenschutz: So erstellst du eine Opt-Out-Möglichkeit für den Pixel

Oscar BraunertFacebook Werbung8 Kommentare

**Gastartikel von Oscar Braunert @ ovl.design**

Facebook bietet mit dem Pixel eine Möglichkeit, mit der Webseitenbetreiber ihre Werbekampagnen auf Facebook mit Daten (bspw. in Form von Retargeting-Listen oder Conversions) anreichern können.

Und wo Daten sind, ist auch Verantwortung.

Dieser Artikel versucht einen Ansatz zu bieten, wie man den Facebook Pixel unter Berücksichtigung datenschutzrechtlicher Bestimmungen korrekt einsetzen kann.

Die Grundlagen

Da ich kein Anwalt bin, garantiert dieser Artikel keine Rechtssicherheit. Als rechtliche Grundlage dieser Anleitung dient der Artikel von Thomas Schwenke. Ich werde auch nicht erklären, wie der Facebook Pixel an sich eingerichtet oder benutzt werden kann. Dafür gibt es die offizielle Dokumentation oder diesen Artikel von Florian.

Technisch konzentriert sich diese Anleitung auf den Browser, da Serverumgebungen zu vielfältig sind, um hier erschöpfend drauf eingehen zu können. Ich weise an gegebenen Stellen aber darauf hin, dass serverseitige Anpassungen möglich sind. Es ist praktisch, wenn du dich ein bisschen mit JavaScript auskennst. Ich werde mich aber bemühen, die Funktionsweise so voraussetzungslos wie möglich zu erklären. Den Code, aus dem die folgenden Snippets kommen, kannst du in seiner Gesamtheit hier einsehen.

Jetzt aber los.

Anmerkung: Eine einfache Möglichkeit, diese Anpassungen über den Google Tag Manager vorzunehmen, findest du am Ende des Artikels.

Der Opt-Out-Link

Der Opt-Out-Link ist das Herzstück der ganzen Geschichte. Dieser kann an zwei Orten stehen, dem Cookie-Banner oder der Datenschutzerklärung. So lange der sogenannte «erweiterte Abgleich»  –  also das Anreichern des Trackings mit Userinnen-Daten – nicht verwendet wird, ist es vollkommen ausreichend, ihn in der Datenschutzerklärung unterzubringen und im Cookie-Banner auf diese zu verweisen.

Das kann zum Beispiel so aussehen (wie es auch Christian Penseler in seinem Blog beschreibt):

Das Tracking durch den Facebook Pixel ist auf dieser Seite:
<script>
if (localStorage.getItem('opt-out')) {
  document.write('<span> deaktiviert. </span><button onclick="deleteOptOut()"> Tracking aktivieren</button>');
} else {     
  document.write('<span> aktiviert. </span><button onclick="setOptOut()">Tracking deaktivieren</button>');
}
function setOptOut() {
  localStorage.setItem('opt-out', 'true');
  window.location.reload(false);
}
function deleteOptOut() {
  localStorage.removeItem('opt-out');
  window.location.reload(false);
}
</script>

Wichtig ist, dass dieser Link in aller Regel selber im richtigen Template bzw. im Editor der Seite untergebracht und im Script zu Deaktivierung referenziert werden muss. Egal, ob man das Pixel-Script selber einbindet, oder – wie weiter unten gezeigt – einen Tag-Manager verwendet.

Erstellung einer Opt-Out-Möglichkeit für den Facebook Pixel

Ich habe eine einfache Seite gebaut, die anhand dieses Ansatzes funktioniert.

Auf der Seite gibt es einen Opt-Out-Link für den Facebook Pixel. Solange dieser nicht geklickt wurde, müssen keine Anpassungen vorgenommen werden. Der Pixel kann also wie in der Anleitung Facebook auf deiner Seite untergebracht werden.

Wenn die Userin allerdings auf den Link klickt, sind Anpassungen nötig.

Das Link-Element wird zunächst über einen QuerySelector bestimmt. Das macht es möglich, diesen im Script weiterzunutzen. Zum Beispiel können wir nun einen EventListener hinzufügen:

this.$optOutButton.addEventListener(‘click’, (e) =&gt; {
// Verhindern, dass der Link irgendwohin linkt
e.preventDefault()
// Eigene Funktion, um den Opt Out-Status zu setzen
this.optOutController()
})

(Zum Code bei Github).

Die Schreibweise (e) => {} ist eine Pfeilfunktion. In der Funktion bzw. in meinem Beispiel Methode passiert folgendes:

optOutController() {
if (this.usingStorage) { // A
FacebookPixelController.setStorage('opt-out') // B
}
FacebookPixelController.setCookie('opt-out') // C

if (window.hasOwnProperty('fbq')) {
FacebookPixelController.disableTrackingFunction() // D
}
}

(Zum Code bei Github).

// A  –  Beim Initialisieren der Klasse habe ich überprüft, ob es überhaupt möglich ist, den localStorage zu benutzen.

// B  – Aufruf einer Methode, die den localStorage mit dem Wert opt-out aktualisiert. Diese sieht wie folgt aus:

optOutController() {
if (this.usingStorage) { // A
FacebookPixelController.setStorage('opt-out') // B
}
FacebookPixelController.setCookie('opt-out') // C

if (window.hasOwnProperty('fbq')) {
FacebookPixelController.disableTrackingFunction() // D
}
}

(Zum Code bei Github).

Nach dem Aufruf dieser Methode steht im localStorage der Eintrag fb-pixel-status mit dem Wert opt-out zur Verfügung. Darauf komme ich gleich zurück.

// C Zusätzlich wird ein Cookie gesetzt. Dieser kann auf dem Server abgefragt werden, um das Tracking-Script gar nicht erst ins Template einzubinden, wenn die Userin nicht möchte, dass der Pixel eingesetzt wird.

setCookie(status) {
if (status === 'opt-in' || status === 'opt-out') {
const secure = this.options.secure ? 'secure' : ''
document.cookie = `${this.options.cookieName}=${status}; expires="Fri, 30 Jan 2071 23:00:00 GMT"; ${secure}; path=/`
} else {
console.error('Invalid state to set the status cookie. Use opt-out or opt-in.')
}
}

(Zum Code bei Github).

// D Facebook definiert eine Funktion namens fbq im globalen Scope. Die dient dazu, dass man mit fbq(‚track‘, ‚EventName‘) oder fbq(‚trackCustom‘, ‚EventName‘) Events tracken kann.

Wir können diese folgendermaßen löschen:

setCookie(status) {
if (status === 'opt-in' || status === 'opt-out') {
const secure = this.options.secure ? 'secure' : ''
document.cookie = `${this.options.cookieName}=${status}; expires="Fri, 30 Jan 2071 23:00:00 GMT"; ${secure}; path=/`
} else {
console.error('Invalid state to set the status cookie. Use opt-out or opt-in.')
}
}

(Zum Code bei Github).

Für eigene Event-Aufrufe kann man danach verhindern, dass die Userin getrackt wird und es Fehler gibt, indem man nachsieht, ob fbq definiert ist:

$testButton.addEventListener('click', (e) =&gt; {
e.preventDefault()
// In a real app there will probably be more logic to an input then just
// emitting an event. Therefore we check if fbq is defined
// to avoid exceptions after deactivating tracking
if (window.hasOwnProperty('fbq')) {
window.fbq('trackCustom', 'PixelOptOutTest')
}
})

(Zum Code bei Github).

Das heißt: Fast verhindern.

Denn seit einigen Monaten trackt Facebook automatische Events (z. B. mit Microdata).

Um alle Tracking-Aktivitäten zu unterbinden, muss die Seite neu geladen und darauf geachtet werden, dass die Scripte von Facebook nicht mehr eingebunden sind. In der Ankündigung, dass die automatischen Events existieren, erklärt Facebook, dass man sie deaktivieren kann. Zumindest in meinem Pixel Manager finde ich diese Option aber nicht.

Jetzt, da wir in der aktuellen Session keine eigenen Events mehr tracken, können wir anhand des Wertes im localStorage verhindern, dass das Tracking-Script bei einem erneuten Besuch oder Wechsel der Seite überhaupt geladen wird.

Zusätzlich wird überprüft, ob die Userin die Do Not Track-Option in ihrem Browser aktiviert hat.

Nach einer if-Abfrage dieser beiden Bedingungen, den Pixel zu benutzen, folgt der aus dem Pixel Manager kopierte Tracking-Code. Die Datei «https://connect.facebook.com/usw» ist das Script von Facebook, die darauf folgenden Funktionsaufrufe «fbq()» initialisieren das Tracking (‘init’) und tracken einen ersten PageView (‘track’).

<script data-pixel="fb">
  var optOutWish = function() {
    var doNotTrack = navigator.doNotTrack === '1';
    var hasOptedOut = localStorage.getItem('fb-pixel-status') === 'opt-out';
    return doNotTrack || hasOptedOut;
  }
  if (optOutWish()) {
    console.info('User prohibits tracking. Not embedding Facebook’s script.')
  } else {
    console.log('Embedding Facebook’s 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', '1944570812537922');
    fbq('track', 'PageView');
  }
</script>

(Zum Code bei Github).

Das Mozilla Developer Network stellt ein Tutorial zur Verfügung, dass den Umgang mit der Web Storage API ausgiebiger erklärt.

Wie oben schon erwähnt, können wir auch in unserem Server-Code nachsehen, ob der Cookie gesetzt wurde. PHP stellt dafür die Globale $_COOKIES zur Verfügung, express.js req.cookies. Wie das in deiner Server-Umgebung genau funktioniert, können dir die Docs deiner Scriptsprache oder deines Frameworks verraten.

Eine Implementierung in PHP, zum Beispiel im zum Beispiel im head-Element eines WordPress-Themes, könnte so aussehen (ein Beispiel, wie du den Code über den Google Tag Manager implementieren kannst, findest du weiter unten):

// footer.php

&nbsp;

<footer><!-- other footer content -->
<!--?php if (!$is_opt_out): ?-->
<script data-pixel="fb">
      // Retrieve value from localStorage
      var hasOptedOut = localStorage.getItem('fb-pixel-status') === 'opt-out'
      
      // Only let this code run if the user has not opted out
      if (!hasOptedOut) {
         // Pixel code
    }
    </script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=00000000000&amp;ev=PageView&amp;noscript=1">
</noscript>
<!--?php endif; ?--></footer>

(Zum Code bei Github).

Zusammenfassung der Anpassungen

Ich habe Klicks auf einen Opt-Out-Link registriert und nachfolgend den localStorage aktualisiert, um später den Status einsehen zu können.

Für serverseitige Optimierungen wurde ein Cookie gesetzt. Danach wurde die Facebook-Funktion fbq deaktiviert, um dem Wunsch der Userin nachzukommen.

Um sicherzugehen, dass die Scripte nicht geladen werden, wird das Laden des Scripts vom Ergebnis einer if-Abfrage abhängig gemacht.

Umsetzung mit dem Google Tag Manager

Vielleicht verwendest du den Google Tag Manager, um verschiedene Scripte in deine Seite einbinden zu können.

Es ist relativ einfach möglich, das angepasste Snippet mit dem Tag Manager einzubinden.

Klicke dafür innerhalb deines Google Tag Manager auf die Schaltfläche “Neues Tag”.

Nach dem Klick öffnet sich von rechts ein Menü, in dem du dieses Tag konfigurieren kannst.

Der erste Schritt, ist über die Tag-Konfiguration einen Typ auszuwählen. Google bietet eine ganze Reihe von vorgefertigten Optionen an, die uns hier aber nicht weiterbringen. Stattdessen wählen wir “Benutzerdefiniertes HTML” aus.

In der Tag-Konfiguration-Oberfläche erscheint nun ein Code-Editor, in den wir unser Snippet kopieren können.

Die Änderungen können nun gespeichert und veröffentlicht werden. Das Tag Manager-Script schreibt die eigenen Snippets (falls es nicht nur der Pixel ist) auf die eigene Seite. Es reicht natürlich nicht, diese Änderung nur für ein Script vorzunehmen. Jedes bereits bestehende oder in Zukunft hinzukommende Tag muss um die Opt-Out-Funktionalität ergänzt werden.

Verwendung von Tag Manager Triggern

Anstatt der if-Abfrage, mit der bis jetzt gearbeitet wurde, können auch Tag Manager Trigger benutzt werden, um den Code einzubinden. Diese haben den Vorteil, dass sie mit beliebig vielen Tags verbunden werden können und man die Original-Snippets von Facebook und anderen Anbieterinnen unverändert hinzufügen kann.

Hierfür muss zuerst eine Variable festgelegt werden. Eine Variable ist eine Funktion mit Rückgabewert. In Verbindung mit dem obigen Script kann sie so aussehen:

function() {
return localStorage.getItem('opt-out')
}

Diese Variable muss einem Trigger zugeordnet werden. Trigger sind tagmanagerisch für Vorkommnisse auf der Seite. Da bei allen Aufrufen der Seite der Tracking-Code eingebunden werden soll, ist Seitenaufruf hier der richtige Wert.

FB_Pixel_Optout ist der Name meiner vorher festgelegten Variable. Diese gibt true zurück, wenn doNotTrack oder der localStorage-Eintrag gesetzt sind. Daher muss geprüft werden, dass der Rückggabewert nicht “true” ist.

Der letzte Schritt ist, den Trigger mit den Tags zu verbinden, die auf ihn angewiesen sind. Das kann in der Verwaltung der nämlichen Tags erledigt werden.

Implementierung

Okay. Das ist also die Theorie. Aber wie setzt man das jetzt ein? Der Tag Manager kann dabei helfen, wenn die eigentliche Abfrage geschehen ist.

Diese Abfrage ist grundsätzlich an zwei Orten möglich: Der Datenschutzerklärung oder in einem Cookie-Banner. Die Abfrage im Cookie-Banner ist verpflichtend, wenn du den erweiterten Abgleich nutzt, also dein Tracking mit Userinnendaten anreicherst. Solltest du das nicht tun, reicht ein Button oder ein Link in der Datenschutzerklärung und im Cookie-Banner ein klarer Hinweis auf diese und die Möglichkeit, der Nutzung der Daten zu widersprechen.

Für die Funktionalität muss die Controller-Klasse oder ein ähnliches Script geladen werden (Zum Code bei Github).

Falls deine Seite ein Setup mit Tools wie RollupWebpack oder Gulp nutzt, kannst du die Datei natürlich auch in diesem deinem Bundle hinzufügen.

Wie man den Status des Opt-Outs überprüft, habe ich oben schon gezeigt. Man diese Abfrage natürlich auch nutzen, um den Status  –  zum Beispiel in der Datenschutzerklärung  –  abzufragen und das Verhalten des Buttons anzupassen. In grundlegender Form kann das so aussehen (Zum Code bei Github).

Hier genauer auf das Design einzugehen, würde den Rahmen sprechen. Auf econsultancy.com findest du einige gute Tipps, wie Opt-In- und Opt-Out-Lösungen realisiert werden können.

Noscript-Zusatz

Es mit relativ wenig Aufwand möglich, eine clientseitige Implementierung hinzubekommen. Aber: Nicht alle Clients haben JavaScript und auch auf Geräten, die JavaScript eigentlich unterstützen, kommt es immer wieder zu Fehlern. Man sollte sich deswegen nicht darauf verlassen, dass eine reine clientseitige Lösung wirklich sicher ist.

Eine Möglichkeit wäre zum Beispiel den Opt-Out-Link mit einem Query-String zu versehen und auf dem Server zu prüfen, ob dieser gesetzt ist.

<a href="”?fb-pixel-status=opt-out”">Opt out</a>

Es ist unsere Verantwortung als Web-Entwicklerinnen, dass unsere Implementierungen auch scheitern können und trotzdem  –  so weit wie möglich  –  funktionieren.

Diese Abfrage könnte in PHP so aussehen (Zum Code bei Github).

Nachtrag zum Tracking-Link

Wenn Facebook auf Englisch gestellt hast, schreibt Facebook die fbevents.js mit einer englischen Lokalisierung in den Code-Schnipsel

https://connect.facebook.net/en_US/fbevents.js

Es gibt auch eine deutsche Variante.

https://connect.facebook.net/de_DE/fbevents.js

Das deutsche Script ist ein bisschen kleiner. Wo genau der Unterschied ist, kann ich nicht feststellen. Wenn du auf Nummer sicher gehen willst, lädst du die deutsche Variante.

Obacht! Du musst dafür dein Facebook auf Deutsch stellen, da es ansonsten passieren kann, dass Facebook die genauere Konfiguration deines Pixels nicht laden kann.

Fazit

Meine Implementierung des Controllers steht auf GitHub zur Verfügung. Sie ist unter der MIT-Lizenz veröffentlicht. Du kannst sie also gerne als Grundlage weiterverwenden, umschreiben oder komplett umwerfen. Ich übernehme allerdings keinerlei Haftung, wenn du eins davon tust.

Wenn man nicht nur Events tracken möchte, sondern diese Hilfe der Funktion “Advanced Matching” des Facebook Pixels mit zusätzlichen Userinnen-Daten anreichern möchte, wird ein Opt-In für das Tracking benötigt. Wie du diese Opt-In-Variante umsetzen kannst, findest du hier.

Wer schreibt das hier?

Oscar Braunert

Twitter

Oscar gestaltet für Web und Print und schreibt nebenbei gerne Code. Sein Fokus liegt auf nutzbaren und performanten Interfaces, die sich auf die Nutzerinnen der Seite konzentrieren. Er ist typophil und hat ein Herz für Eulen.

BLEIB IMMER UP-TO-DATE & HOL DIR DIE BESTEN PRO-TIPPS

  • Hol dir jetzt meinen Newsletter & erhalte regelmäßig frischen Content, sowie die besten Pro-Tipps rund um Facebook Advertising
  • Als Bonus bekommst du meinen 7-teiligen Facebook Advertising Pro-Kurs & Tool-Guide gratis on top
  • Lerne in 7 Lektionen alles was du wissen musst, um mehr aus deinen Kampagnen herauszuholen

Mit deiner Eintragung zum Newsletter erhältst du regelmäßig frischen Content, sowie meinen Facebook Advertising Pro-Kurs & Tool-Guide GRATIS on top. Kein Spam, versprochen! Zu den Datenschutz-, Versand-, Analyse- und Widerrufshinweisen.

8 Comments on “Facebook Pixel und Datenschutz: So erstellst du eine Opt-Out-Möglichkeit für den Pixel”

  1. Schöner Artikel, aber leider muss ich sagen, dass ich nicht wirklich verstehe wie ich es umsetzen kann… Kannst Du hierzu nicht ein Video machen? 🙂

    Viele Grüße, Stefan

  2. Hallo, ist ein Opt-out nicht spätestens ab dem 25.05.2018 nicht „verboten“? Der Seiten Besuchen muss ja, bevor irgendwelche Daten an irgend wen gesendet werden, seine Zustimmung geben. Das ist ja mit einem Opt-out nicht möglich.

  3. Hey Oskar,
    schöner Beitrag! Opt-Out konnte ich bei mir integrieren, allerdings funktioniert er nicht auf der Subdomain.
    Hast Du einen Tipp wie ich es auf der Subdomain hinbekomme? Würde gerne die gleiche „Datenschutz“-Seite verwenden und nicht extra eine neue auf der Subdomain anlegen…

    Viele Grüße
    Nico

  4. Hi,
    ein sehr hilfreicher Artikel zu einer großen Herausforderung im Rahmen der DSGVO.
    Eine Frage dazu: Wenn ich das Facebook-Opt-Out über den Google Tag Manager ausspiele, dann kann doch
    // console.info(‚User prohibits tracking. Not embedding Facebook’s script.‘) //
    in der Entwicklerkonsole gar nicht angezeigt werden, da die Triggerkonfiguration das Feuern des HTML-Tags unterbindet. Oder verstehe ich da etwas falsch?

    Viele Grüße
    Benjamin

  5. Vielen Dank für den guten Überblick!
    Wie kann man prüfen ob der „erweiterte Abgleich“ beim Pixel aktiviert ist, bzw. wo man die Funktion deaktivieren kann?

    1. Hey Ellen,

      der erweiterte Abgleich des Facebook Pixels kann bei der Konfiguration des Pixels im Werbekonto oder durch Einstellungen in Plugins (bspw. WordPress Plugins) aktiviert werden. Inbesondere bei WordPress Plugins wird diese Funktion häufig unwissentlich aktiviert.

      Überprüfen ob diese Funktion aktiv ist kannst du entweder im Pixel Code, mit dem Facebook Pixel Helper Chrome Plugin oder am einfachsten in Facebook Analytics unter Pixel -> Debuggen von Events. Wenn dort auch E-Mail Adressen, Namen oder sonstige Bestellerdaten durch den Pixel erfasst werden, ist der erweiterte Abgleich aktiv (und sollte deaktiviert werden).

      Liebe Grüße!

  6. Hallo,

    ich hätte jetzt eine Frage bzgl. der Verwendung des Facebook-Pixels zum Bauen von Zielgruppen. Wenn ich mit dem Facebook-Pixel alle Aktivitäten auf meiner Seite aufzeichne, erfasse ich alle Nutzer. Wenn ein Nutzer nun heute das Tracking mit dem Pixel erlaubt, ist er in meiner Remarketing-Liste. Wenn er in einer Woche wieder auf meine Seite kommt, nun aber das Tracking nicht mehr erlaubt, ist er aber trotzdem noch in meiner Remarketing-Liste und bekommt meine Werbeanzeigen ausgespielt oder? Wenn ja, ist das DSGVO-technisch ein Problem oder kann ich den Pixel so verwenden?
    Danke und liebe Grüße
    Sandra

Hinterlasse deinen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.