Facebook-Pixel und Datenschutz

Demo eines rechtssicheren Einsatzes

Daten sammeln oder Userinnen respektieren? Mit ein bisschen Aufwand nicht unvereinbar.

Facebook bietet mit dem Pixel eine Möglichkeit, mit der Seitenbetreibende ihre Werbekampagnen auf Facebook anreichern können. Wo Daten sind, ist auch Verantwortung. Dieser Artikel versucht, einen Ansatz zu bieten, wie man den Pixel unter Berücksichtigung datenschutzrechtlicher Bestimmungen einsetzt.

Grundlagen

Dieser Artikel bietet, ich bin kein Anwalt, 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.

Im Folgenden erkläre ich, wie du den Pixel als Opt-Out- und Opt-In-Variante verwenden kannst. Als Beispiel für einen Tag Manager zeige ich, wie der Pixel-Code im Google Tag Manager angelegt und mit einem Trigger zum Opt-Out versehen werden kann.

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:

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:

Ich benutze hier die Klasse .js-fb-opt-out um einen Hook zu haben, mit dem ich in dem Script, das ich im Folgenden erklären werde, auf den Link zugreifen kann. Und zwar folgendermaßen:

Suche nach einem Element mit der Klasse `.js-fb-opt-out`. Das Pattern `.js-` dient hier als Hilfestellung um sicherzugehen, dass keine CSS-Styles mit dieser Klasse verknüpft sind.

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. Dabei ist es egal, ob man das Pixel-Script selber einbindet, oder — wie weiter unten gezeigt — einen Tag-Manager verwendet. Diese Dienste kümmern sich um

Level 1: Die Opt-Out-Variante

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

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

Wenn die Userin 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 weiterzubenutzen. Zum Beispiel können wir nun einen EventListener hinzufügen:

Die Schreibweise (e) => {} ist eine Pfeilfunktion.

In der Funktion bzw. in meinem Beispiel Methode passiert folgendes:

// 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:

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.

// 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 löschen:

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

Das Microdata-Event in der Übersicht des Pixel Helper Plugins

Das heißt: Fast verhindern. 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 zwar, 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’).

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 gucken, 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 head-Element eines Wordpress-Themes, könnte so aussehen:

Zusammenfassung Level 1

Wir haben 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.

Level 2: Die Opt-In-Variante

Wenn man nicht nur einzelne Events tracken möchte, sondern diese mit Userinnen-Daten anreichern, reicht es nicht, das Einverständnis der Userin vorauszusetzen und erst nachträglich zu fragen. Stattdessen muss die Userin explizit zustimmen, dass ihre Daten benutzt werden können.

Auch für diese Variante gibt es eine Demo.

Nach dem Laden der Seite ist der «Event testen»-Button nicht funktionsfähig. Um sicherzustellen, dass das so ist, passen wir die if-Abfrage im Click-Event aus dem obigen Beispiel an:

Um Facebooks eigene Events müssen wir uns in dem Fall keine Sorgen machen: Wir haben die Scripte von Facebook noch nicht geladen.

Ein Klick auf den Button ruft eine Methode auf, die dafür sorgt, dass die Scripte geladen werden und der Status der Seite aktualisiert:

Zeile 3 und 5 sind analog zum Opt-Out-Beispiel (nur, dass wir nun eben opt-in übergeben).

In Zeile 6 lasse ich mir das erzeugte Tracking-Script zurückgeben.

Ich setze die Quelle und die ID des Scriptes dynamisch über Optionen, die ich meiner Klasse übergeben habe.

Danach kann ich es dem <body>-Element hinzufügen. In der Demo kannst du das nachvollziehen, indem ein Eintrag im Log erstellt wird, oder du im Netzwerk-Tab deiner Dev Tools nachschaust (Firefox, Chrome). Solltest du das Chrome Pixel Helper-Plugin verwenden, wird der aktualisierte Status auch in diesem angezeigt.

Wenn du in der Demo erneut auf den «Event testen»-Button klickst, wird nun ein Event abgeschickt.

Es ist zwingend erforderlich, dass neben der Möglichkeit zum Opt-In auch die des Opt-Outs gegeben ist.

Auch hier sind, anhand des Cookies, wieder serverseitige Optimierungen möglich.

Zusammenfassung Level 2

Erst nach einer expliziten Zustimmung der Userin darf das Facebook-Tracking-Script geladen werden. Die Initialisierung des Tracking funktioniert automatisch, sobald man den von Facebook vorgegebenen Schnipsel zur Seite hinzufügt.

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 zunächst auf die Schaltfläche «Neues Tag». Nach dem Klick öffnet sich 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-Kofiguration-Oberfläche erscheint nun ein Code-Editor, in den wir unser Snippet kopieren können.

Der ausgefüllte Editor für ein benutzerdefiniertes Tag im Google Tag Manager

Die Änderungen können nun gespeichert und veröffentlicht werden. Das Tag Manager-Script schreibt die 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:

Abfrage des Opt-Out-Wertes als Google Tag Manager Variable

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_opt_out 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.

Der vorher angelegte Trigger als Ausnahme bei einem Tag, das den Facebook Pixel einbindet

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 Opt-Out-Button oder -Link in der Datenschutzerklärung und im Cookie-Banner ein klarer Hinweis auf diesen und die Möglichkeit, der Nutzung der Daten zu widersprechen.

Für die Funktionalität muss die Controller-Klasse oder ein ähnliches Script selbst geladen werden.

Falls deine Seite ein Setup mit Tools wie Rollup, Webpack 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:

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.

Appendix

Noscript

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/In-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:

Ende

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.

Dieser Artikel ist im Original als «Facebook Pixel und Datenschutz: So erstellst du eine Opt-Out-Möglichkeit für den Pixel» bei adsventure.de erschienen.

Bild

Code-Icon von Facebook, Vorhängeschloss von Smashicons.