**Gastartikel von Thomas Thaler**
Alltag im Agenturgeschäft: Ein neues Performance-Marketing-Projekt steht vor der Türe und wir wollen vor dem Start den Facebook Pixel aktivieren: einerseits, um das Conversion Tracking für unsere zukünftigen Kampagnen zu ermöglichen, andererseits, um aus den Aktivitäten der Website-Besucher spannende Zielgruppen für das spätere Retargeting zu generieren. Wir schicken also an die (interne oder externe) IT-Abteilung des Kunden eine dringende Bitte, das rasch im HTML-Code des Webshops einzubauen.
Nun ja, rasch ist halt ein relatives Adjektiv. Für alle, die nun an dieser Stelle nicht einige Jahreszeiten verstreichen lassen wollen, hier eine kurze Anleitung, wie man dynamische Pixel Events auch als Nicht-Entwickler selbst implementiert. Um die gestresste IT nicht unnötig mit jedem Änderungswunsch zu nerven, werden wir dafür den Google Tag Manager (=GTM) einsetzen.
Mit dem GTM können wir Code Snippets wie Facebook Pixel Events über eine angenehme Benutzeroberfläche einbauen und konfigurieren, ohne dabei in den Quellcode der Website eingreifen zu müssen. Es muss lediglich einmal der GTM Code quasi als Platzhalter auf allen Seiten des Webshops eingebaut werden.
Im GTM können wir uns dann im Wesentlichen drei Dingen widmen:
Ein Tag ist jetzt genau so ein vorher angesprochenes JavaScript-Schnipsel. Man kann hier natürlich alles Mögliche programmieren – wir definieren aber im Wesentlichen, was wohin geschickt werden soll. Für die Google-Welt (Analytics, Adwords, etc.) sind wenig überraschend die meisten benötigten Tags bereits fix und fertig vordefiniert.
Für die Facebook-Welt kopieren wir uns den benötigten Code mit wenigen Klicks aus dem Events Manager, verwenden dafür aber bitte nicht das Event Setup Tool. Wir verwenden dafür immer einen Tag-Typen namens „Benutzerdefiniertes HTML“.
Wir legen uns im ersten Schritt also mal den Pixel Basiscode sowie (je nach Bedarf) die wichtigsten Pixel Standard Events (Search, AddToCart, InitiateCheckout, Purchase) in einzelnen Tags an. Damit sich auch noch Monate später jeder im GTM damit auskennt, verwenden wir gleich zu Beginn eine einheitliche Namens-Konvention.
Wir können außerdem fix einstellen, dass ein bestimmter Tag entweder beliebig oft (z. B. der Pixel Basiscode) oder nur genau einmal (z. B. das Pixel Event Purchase) gefeuert werden kann.
Mit einem Trigger können wir festlegen, wann ein bestimmter Tag ausgelöst werden soll. Man spricht in der Branche auch gerne vom Feuern eines Tags. In manchen Fällen brauchen wir auch noch Triggerausnahmen (auch blockierende Trigger genannt) – das sind Trigger, mit denen unter bestimmten Bedingungen verhindert werden kann, dass andere Trigger ausgelöst werden.
Häufig basieren Trigger auf:
- eine bestimmte (oder jede) Seite wurde aufgerufen,
- ein HTML-Element (meistens ein Button) wurde geklickt,
- ein HTML-Element wurde auf der Website sichtbar,
- ein Formular wurde gesendet,
- eine festgelegte Scroll-Tiefe wurde erreicht,
- eine definierte Zeit ist verstrichen,
- ein benutzerdefiniertes Ereignis (Event) wurde ausgelöst.
Jeder Trigger wird mit einem oder mehreren Tags verbunden. Erst danach ist er einsatzbereit.
Mit Variablen bauen wir nun eine Verbindung zwischen dem GTM und den (oft dynamischen) Informationen in unserem Webshop. Es gibt im GTM eine ganze Reihe davon – am wichtigsten sind wohl die sogenannten Datenschichtvariablen.
Die Datenschicht (=Data Layer) ist ein zwischengeschaltetes JavaScript-Objekt, in dem wir beliebig viele Schlüsselattribute unseres Webshops speichern können – quasi eine Schnittstelle zum GTM.
Einige, wie z. B. die URL der aktuellen Webseite, sind als integrierte Variablen schon vordefiniert – manch andere müssen wir händisch erstellen. Einmal befüllt können wir solche Variablen dann als veränderliche Werte in Tags verwenden – so z. B. den Value Parameter unseres Purchase Events. Im GTM werden Variablen grundsätzlich mit {{Variable}} direkt in den JavaScript Code eingefügt.
Zum Abschluss wird es leider etwas kompliziert: Wie kommen nun dynamische Elemente unseres Webshops über die Datenschicht in den GTM? Spätestens hier scheitert ja Facebooks automatisches Setup Tool.
Wir verwenden dafür das DOM (=Document Object Model) unserer Website. Das DOM ist die Schnittstelle zwischen HTML und dynamischem JavaScript. Alle Elemente werden zu Objekten einer Baumstruktur, die dynamisch aufgerufen, verändert, hinzugefügt und gelöscht werden können.
Variante 1: automatische DOM-Variablen
Der automatische Zugriff auf solche Objekte erfolgt im GTM entweder über die ID oder die CSS-Klasse.
Das funktioniert bei sauber programmierten Webshops in der Regel problemlos. Am schnellsten finden wir solche Referenzwerte, indem wir im Browser über dem gewünschten Feld die rechte Maustaste drücken und im Kontextmenü Untersuchen auswählen.
Blöderweise sind nicht alle Webshops sauber programmiert und der Variablentyp DOM-Element wird nicht in allen Fällen zeitgerecht aktualisiert. Es kann also durchaus vorkommen, dass ein Trigger bereits einen Tag feuert, bevor diese Variable aktualisiert wurde. Wir werden uns daher vermutlich noch etwas mehr Mühe machen müssen und Variante 2 einsetzen.
Variante 2: Wir befüllen die Datenschicht händisch
In einer perfekten Welt holen wir uns die gewünschte Information über die ID des Elements mittels der JavaScript-Funktion document.getElementById(“twotabsearchtextbox”);
In der Praxis fehlen sehr oft eindeutige Element-IDs im Quellcode. Wir hanteln uns daher zuerst im DOM-Baum bis zum gewünschten HTML-Element. Dafür verwenden wir die JavaScript-Funktion getElementsByTagName.
Danach nutzen wir die Funktion dataLayer.push, um den neuen Wert in unsere Datenschicht zu übertragen.
Im folgenden Beispiel wird der Inhalt des dritten Eingabefeldes des aktuellen Formulars in der Datenschichtvariable Vorname gespeichert. Achtung: JavaScript beginnt immer bei Null zu zählen. 😉
Auf die Datenschichtvariable Vorname wird dann in die GTM-Variable clientVorname verwiesen. Diese Variable können wir mit {{clientVorname}} in allen Tags verwenden.
Im letzten Beispiel schauen wir uns noch HTML-Tabellen an. Solche werden in sehr vielen Webshops verwendet. Die können wir “quick & dirty” abgrasen, auch wenn dabei jedem gelernten Programmierer die Grausbirnen aufsteigen.
Hier holen wir uns den Inhalt der fünften Zeile und zweiten Spalte der ersten Tabelle auf der Website in die Datenschichtvariable Buchungsumsatz.
Fazit
Nicht immer kann man als Agentur mit einem Webshop arbeiten, der über eine vollautomatische Facebook-Partnerintegration wie Shopify oder WooCommerce für WordPress verfügt. In solchen Fällen lohnt es sich, die Pixel-Integration doch händisch zu machen. Es stehen so wesentlich mehr Möglichkeiten offen als bei der Verwendung des Event Setup Tools von Facebook.
