Markus Baersch

Analytics · Beratung · Lösungen

Start » Blog » Serverside Tracking

18.11.2020

Serverseitiges Tracking mit dem Google Tag Manager beschränkt sich derzeit i. d. R. auf Google Analytics Clients und Tags. Dieser Beitrag zeigt, wie man die typische Trackinglücke schließt, die auf den meisten Websites besteht, wenn auf First Party Tracking mit dem serverseitigen Google Tag Manager Container ("Google Tag Server") umgestellt werden soll. Dabei kommen die jeweiligen Templates von Simo Ahava zum Einsatz. Dies ist nicht die einzige - und im Sinne der Reduktion eingehender Datenströme ggf. nicht die beste - Option, aber sie erfüllt ihren Zweck und basiert auf Tags, die man vermutlich mittelfristig nicht selbst warten oder weiterentwickeln muss.

Eine Vorbemerkung zur Datensammlung

Dieses Beispiel nutzt das clientseitige Tag von Simo, um Daten auf der Website im Browser zu erheben und an den Tag Server zu senden. Wer mein Blog verfolgt weiß, dass ich ein Freund von möglichst reduzierter Datensammlung im Browser bin... und natürlich könnte man alternativ auf dem Datenstrom einer Datensammlung über Analytics-Trackingcodes oder eine eigene Data Collection setzen. Da aber ohnehin für den konkreten Anwendungsfall von Facebook i. d. R. ein Basis-Script ausgespielt werden muss, welches sich um die Cookies und die Identifizierung des Besuchers kümmert und das nur bei Consent ausgespielt werden darf, ist eine separate Datensammlung, wie sie im Tag Template von Simo vorgesehen ist, sicher zu vertreten. Diese setzt allerdings "nur" dann ein Cookie, wenn es so definiert wurde und eine Facebook-Klick-Id beim Eintritt auf die Seite vorhanden ist.

Es sind also Anwendungsfälle denkbar, in denen man sich mit einer selbst gespeicherten fbclid, der Identifizierung über die Mailadresse oder andere Optionen der API stützen möchte / kann und dies dann auch im Rahmen einer eigenen Datensammlung. In diesem Beispiel soll uns aber das Cookie des Beispiel-Tags ausreichen - auch im Sinne einer möglichst geringen Komplexität des ohnehin aus mehreren Schritten bestehenden Vorgangs der Einrichtung.

Hinweis: Den hier beschriebenen Vorgang zeigt auch das Video zur Einrichtung der Conversions API und Nutzung im Tag Manager bei Youtube.

Schritt 1:
Einrichten des FB Pixels und der Conversions API

Wenn es nicht bereits ein Pixel gibt, zunächst in den Unternehmenseinstellungen der Facebook Business Suite ("Weitere Tools - Unternehmenseinstellungen") im Bereich "Datenquellen - Pixel" ein Pixel anlegen. Hier muss sichergestellt werden, dass der Benutzer "Conversions API System User" Zugriff auf das Pixel hat - anderenfalls wird später eine Fehlermeldung im serverseitigen GTM zurückkommen, wenn Daten per API übergeben werden sollen.

Anschließend nach Auswahl des Pixels den Events Manager über den Button "Im Events Manager öffnen" aktivieren. Dort unter "Test-Events" die Test ID notieren. Diese wird später bei der Einrichtung im Tag Manager verwendet.

Pixel einrichten

Danach unter "Einstellungen" im Bereich "Conversions API" die Pixel-ID notieren (kann per Klick in die Zwischenablage kopiert werden) und weiter unten im Bereich "Conversion API" einen API - Zugriffsschlüssel generieren.

API Key generieren

Im Einrichtungsassistenten die Option "Code manuell installieren" wählen, danach Pixel auswählen und auf der nächsten Seite die Schaltfläche "Zugriffsschlüssel generieren" anklicken. Der nach kurzer Zeit generierte Schlüssel kann per Klick in die Zwischenablage kopiert werden. Diesen API Key ebenfalls notieren für die Einrichtung des Trackings via Tag Server.

Nach Abschluss der API Einrichtung den Assistenten schließen und ggf. in den Einstellungen für den Echtbetrieb weiter unten schon die Traffic-Berechtigungen für die eigene Website eintragen. Für den Testbetrieb ist das aber nicht erforderlich.

Schritt 2:
Templates von Github herunterladen

Solange die Templates von Simo noch nicht in der Template Gallery bereitstehen, können diese bei Github gefunden werden.  Es werden insgesamt drei Templates benötigt:

In allen Ordnern findet sich jeweils eine Datei template.tpl, die lokal gespeichert werden muss. Wer sonst mit Github nichts am Hut hat, klickt die Datei an, wählt dann "Raw" als Ansicht und speichert dann die Seite auf dem eigenen Rechner. Dabei idealerweise jeweils passende und unterscheidbare Namen für die Datei wählen und darauf achten, dass die Dateiendung .tpl nicht noch durch ein .txt ergänzt wird, denn das stört später beim Import der Templates.

Schritt 3:
Serverseitigen Tag Manager Container einrichten

Mit den gerade gespeicherten Vorlagendateien für den serverseitigen Tag Manager werden nun neue Templates im GTM Container angelegt. Wer noch keinen Container hat, findet hier eine Anleitung zur Einrichtung und generelle Informationen zum Arbeiten mit Tag und Client-Templates.

Unter "Vorlagen" im Container je eine neue Client- und eine Tag-Vorlage anlegen und im Bearbeitungsdialog nach Klick auf "Neu" über das Drei-Punkte-Menü oben rechts den Punkt "Importieren" auswählen, um das passende Template für Client und  Tag einzulesen. Passt alles, lassen sich die Vorlagen speichern.

Beim Facebook Tag von Simo ist nach akt. Stand die API-Version nicht als Feld definiert, sondern steht direkt im Code. Das mag sich (sehr wahrscheinlich) noch ändern. Solange das so ist, ist die Versionsnummer hier ggf. an die aktuell gültige API Version anzupassen. Hier steht derzeit (November 2020) noch "8.0", aktuell ist aber Version 9.0. Daher die Angabe "const apiVersion = '8.0';" entsprechend anpassen und die akt. Versionsnummer angeben.

Tag Template anpassen

Mit diesen Vorlagen kann nun ein Client im serverside GTM Container erzeugt werden - und ein passendes Tag. Beim Client sind dabei keine besonderen Einstellungen erforderlich. Er dient dazu, die auf der Website gesammelten und an den Tag Server gesendeten Daten entgegenzunehmen und für Tags verständlich weiterzugeben.

Nun ein Tag unter Verwendung der neuen Tag Vorlage anlegen. Dort den kopierten API Key und die Test-ID in die Einstellungen eintragen. Damit das Tag auslöst, zudem einen Trigger erzeugen, der auf den FB-Client "hört", z. B. über die Bedingung des bei der Anlage verwendeten Client-Namens. Der ganze Vorgang der Anlage von Clients und Tags ist unter dem o. a. Beitrag im Detail beschrieben. Alle anderen Einstellungen wie die Pixel-ID etc. lassen wir wie im Tag voreingestellt aus den Daten bestimmen, die der Client empfangen hat.

Schritt 4:
Einrichtung im clientseitigen Tag Manager

Damit der Client Daten bekommt, ist nun das dritte Template an der Reihe. Dieses wird im Tag Manager Container verwendet, der ganz normal auf der Website eingebunden ist. Also nicht der gerade bearbeitete serverseitige Container, sondern der clientseitige "normale" Container. In diesem mögen derzeit bereits Facebook-Tags über das Template von Simo oder als Benutzerdefiniertes HTML ausgespielt werden, die nach erfolgreichem Test dann gegen die serverseitige Variante ersetzt werden können. Für den Test wird aber zunächst parallel ein weiteres Tag implementiert. Damit dies geschehen kann, muss zunächst auch im clientseitigen Container ein neues Template installiert werden.

Dazu unter "Vorlagen" wieder via "Neu" und den Import des dritten im Schritt 2 gespeicherten Template eine neue Vorlage anlegen. Bevor diese gespeichert wird, ist zwingend eine Anpassung erforderlich, damit das Tracking funktioniert:

Unter "Berechtigungen" muss bei diesem Template die passende URL des Endpunktes des eigenen Tag Servers angegeben werden. Ist der serverseitige GTM Container z. B. unter tracking.meinedomain.de zu erreichen, hier diese Domain eintragen; einschließlich führendem "https://" und abschließendem "/".

Mit diesem Template nun ein Tag einrichten, das auf der Website bei allen Seitenaufrufen feuert. Dabei die Pixel ID eintragen und "PageView" als Standard-Typ wählen. In den Einstellungen des Tags wird weiter unten dann wieder der Endpunkt des eigenen Tag Servers eingetragen, an den die Daten gesendet werden sollen. Dieser muss der im Template bei den Berechtigungen angegebenen URL entsprechen.

Tag Berechtigungen anpassen

Das neue Facebook Tag vom Typ "Facebook Pixel - Server-Side" kann man für den Testbetrieb auf "Alle Seiten" triggern, solange man es nur im Vorschaumodus selbst ausspielt. Bei einem Livebetrieb aber natürlich auf korrekte Einbindung gemäß Tracking-Consent achten, wenn ein Consent Manager im Einsatz ist!

Optional: E-Commerce

Ist ein Shop im Spiel, für den erweiterten Test oder Echtbetrieb ein weiteres Tag hinzufügen, das die E-Commerce-Datenschicht nutzt und entsprechend triggern, um E-Commerce-Events zu übertragen. Die Einstellungen entsprechen dem "normalen" Tag Template von Simo für den clientseitigen Einsatz, welches hier dann vermutlich schon im GTM verwendet wird.

Schritt 5:
Vorschau anwerfen und Testen

Um zu kontrollieren, ob alles korrekt funktioniert, nun den serverseitigen GTM in den Vorschaubetrieb versetzen. Danach ebenso mit dem clientseitigen GTM verfahren und über den dabei verwendeten Tag Assistant die Website aufrufen, auf der der clientseitige GTM eingebunden ist.

Bei Aufruf von Seiten auf der Test-Website sollte der Debugger des clientseitigen GTM nun das erfolgreiche und fehlerfreie Feuern des neuen Facebook-Tags anzeigen. Ist dem nicht so, wie oben angegeben die Domain prüfen, die als Endpunkt eingetragen wurde.

Passt alles, zeigt die Vorschau des serverseitigen GTM eingehende Requests. Diese werden vom FB Client verarbeitet und bei korrekt eingerichtetem Trigger wird das FB Tag gefeuert. Der Responsecode des Aufrufs aus dem Tag sollte "200" lauten. Bei einer 400 das Ergebnis des Requests prüfen. Hier findet sich i. d. R. eine Fehlermeldung, wenn z. B. die API Version veraltet ist, der Schlüssel nicht stimmt oder andere Probleme das Tracking verhindern.

Ist alles OK, zeigt der Events-Manager von Facebook die Test-Hits an.

Test Events im Events Manager kontrollieren

Ist alles durchgetestet (ggf. inkl. E-Commerce Events), kann die Test-ID aus dem FB Tag im GTM entfernt und alles veröffentlicht werden, wenn der Echtbetrieb starten soll. In diesem Fall kann dann das bisherige clientseitige direkte Tracking aus dem Browser an Facebook pausiert bzw. aus dem clientseitigen GTM entfernt werden. Als Ersatz dienen in diesem Fall nun die Requests, die an den eigenen Tag Server gehen und von dort aus per Conversion API an Facebook geliefert werden.

© 2001 - 2020 Markus Baersch