**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):
[code]Das Tracking durch den Facebook Pixel ist auf dieser Seite:
[/code]
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:
[code]this.$optOutButton.addEventListener(‘click’, (e) => {
// Verhindern, dass der Link irgendwohin linkt
e.preventDefault()
// Eigene Funktion, um den Opt Out-Status zu setzen
this.optOutController()
})[/code]
(Zum Code bei Github).
Die Schreibweise (e) => {} ist eine Pfeilfunktion. In der Funktion bzw. in meinem Beispiel Methode passiert folgendes:
[code]optOutController() {
if (this.usingStorage) { // A
FacebookPixelController.setStorage(‘opt-out’) // B
}
FacebookPixelController.setCookie(‘opt-out’) // C
if (window.hasOwnProperty(‘fbq’)) {
FacebookPixelController.disableTrackingFunction() // D
}
}[/code]
(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:
[code]optOutController() {
if (this.usingStorage) { // A
FacebookPixelController.setStorage(‘opt-out’) // B
}
FacebookPixelController.setCookie(‘opt-out’) // C
if (window.hasOwnProperty(‘fbq’)) {
FacebookPixelController.disableTrackingFunction() // D
}
}[/code]
(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.
[code]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.’)
}
}[/code]
(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:
[code]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.’)
}
}[/code]
(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:
[code]$testButton.addEventListener(‘click’, (e) => {
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’)
}
})[/code]
(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’).
[code][/code]
(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):
[code]// footer.php
[/code]
(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:
[code]function() {
return localStorage.getItem(‘opt-out’)
}[/code]
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 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 (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.
[code]Opt out[/code]
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.
