Früher verfolgte man das Surfverhalten von Website-Besucher noch mit kleinen Pixelgrafiken – daher auch die Bezeichung Tracking-Pixel. Heute handelt es sich vielmehr um Tracking-Codes auf JavaScript-Basis. Erste Berührungen damit bekommen Entwickler meist durch die Einbindung von Analytics-Systemen. Daneben nutzen aber auch weitere Systeme Tracking-Pixel, etwa Remarketing-Kampagnen in Adwords, die Besucher bei der Google-Suche wiedererkennen und gezielt Werbung einblenden. Die Werbepartner einer Site bringen ebenfalls ihre eigenen Evaluationssysteme inklusive Tracking-Codes mit – zum Leidwesen des Frontend-Engineers, der diese Pixelhölle implementieren muss.

Der Tracking-Code von Google Analytics ist noch einfach zu implementieren: Jede aufgerufene HTML-Seite muss einen Code enthalten, wozu der Entwickler meist nur eine Stelle im CMS anpassen muss. Andere Systeme erfordern dagegen pro Aktion einen anderen Tracking-Code – ganz zu schweigen von wirklich umfangreichen Tracking-Codes, wie etwa bei Adobe SiteCatalyst. Das Web-Analytics-Produkt lässt sich mit Google Analytics vergleichen, benötigt aber auf jeder Seite viele verschiedene Codezeilen. In jedem Fall können diese ganzen Tracking-Pixel schnell im Chaos enden, da die Entwickler viele unterschiedliche Pixel auf unterschiedlichen Seiten implementieren müssen.

Ein Tag-Manager (TM) schafft Abhilfe. Dabei handelt es sich um ein Content Management System für Tracking-Pixel. Die Funktionsweise ist simpel: Anstatt die vielen verschiedenen Tracking-Codes zu implementieren, reicht ein einziger Code – der des Tag-Managers. Beim Aufruf einer HTML-Seite führt der Browser den JavaScript-Codes des Tag-Managers aus, der dann je nach Parametern das richtige Tracking-Pixel lädt. Dies bietet drei wesentliche Vorteile:

Die JavaScript-Codes des TM sind meist kurz und lassen sich über ein CMS leicht ausgeben. Wer keinen TM nutzt, muss dagegen die unterschiedlichen Tracking-Pixel implementieren, was wie ein Fremdkörper im Website-Code wirkt. Ein TM ist zudem asynchron implementiert, stört also den Aufbau der Seite nicht.

Die Informationen der Analytics- und anderen Systeme sind irrelevant für den technischen Betrieb einer Site. Oft laufen sie nicht in Echtzeit und erfassen nur einen Bruchteil der Server-Zugriffe, da sie für Optimierungsanalysen oder die automatische Steuerung von Bannern, Adwords und Kampagnen dienen. Das Marketing-Team sollte die Codes daher direkt pflegen können.

Entwicklungsteams programmieren oft in Releases, Marketing-Teams brauchen dagegen oft „heute noch“ einen Tracking-Code auf einer Landing-Page. Mit einem Tag-Manager kann das Marketing unabhängig von der Entwicklung Tracking-Codes aktivieren oder deaktivieren.

Dazu gibt es – abgesehen vom initialen Aufwand für die Umstellung der Website – kaum Nachteile. Selbst in Zeiten von PRISM und anderen Überwachungsskandalen ist der Datenschutz kein Thema: Tracking-Pixel sind zwar ohnehin ein Dorn im Auge jedes Datenschützers. Doch ob etwa Google die Zugriffsdaten nur in Analytics speichert oder auch im Google Tag Manager (GTM), ist nüchtern betrachtet egal.

Der Google Tag Manager (GTM) ist ein einfacher Tag-Manager, reicht aber für viele Zwecke und Tracking-Codes aus. Den Dienst gibt es kostenlos unter google.com/tagmanager und ist – anders als viele der kürzlich geschlossenen Google-Dienste – zentral für Googles Cash-Cows Adwords und DoubleClick. Beide können ihr ganzes Potential erst mit dem so genannten Conversion-Tracking und den Remarketing-Tags ausspielen. Der GTM sorgt dafür, dass sich die entsprechenden Tracking-Pixel schneller einbauen und an der richtigen Stelle ausgeben lassen.

Der GTM bietet ein Web-Interface, das durch einen Google-Account gesichert ist und die Einstellung aller Tracking-Pixel, Zuordnungsregeln und Makros ermöglicht. Einfache Tracking-Codes lassen sich damit fast ohne Anleitung anlegen. Seit Google den GTM im Oktober 2012 veröffentlicht hat, haben die Google-Ingenieure das Tool kontinuierlich weiterentwickelt. Obwohl der GTM am besten mit Google-Diensten zusammenarbeitet, bietet das Interface zum einen freie Textfelder für beliebige Tracking-Pixel; zum anderen hinterlegt Google fertige Vorlagen im GTM, die der Website-Betreiber nur noch konfigurieren muss.

Der GTM fasst jede Webseite in einem Container zusammen, der sich von mehreren Nutzer bearbeiten lässt. Diese können pro Container sogar unterschiedliche Rechte erhalten, wie lesen, verändern oder veröffentlichen. Das macht den GTM auch für Agenturen interessant, die Webseiten unterschiedlicher Kunden betreuen. Außerdem haben die Container eine Versionsverwaltung: Änderungen lassen sich zuerst in einem Debug-Modus auf der Webseite testen, bevor das Marketing die neuen Tracking-Pixel für alle Besucher freigibt. Falls doch etwas schief geht, kann man so jederzeit wieder zu einer alten Version zurückkehren.

Bei der ersten Anmeldung legt der GTM einen neuen Account und Container für eine Website an. Dort kann der Nutzer sein erstes Tag hinzufügen. Alle Optionen von Google Analytics, die der User normalerweise programmieren muss, lassen sich im GTM-Web-Interface einfach konfigurieren.

Nachdem das Marketing die Konfigurationsparameter für Google Analytics
einstellt hat, kann es mithilfe der so genannten Rules angeben, wann GTM
ein Tag auslösen soll. Die Standard-Regel „All Pages“ löst es bei
jedem Aufruf aus. Die Regel-Blacklist bestimmt, wann der GTM ein Tag
nicht ausführt, auch wenn es mit der Hauptregel übereinstimmt. So lässt
sich ein Tracking-Code beispielsweise auf allen Seite einfügen, bis auf
eine oder zwei.

Makros haben gleich zwei Aufgaben: Zum einen speichern sie Werte, die an Tags gehen sollen. Zum anderen rufen sie Tags dynamisch mithilfe von JavaScript auf. Standardmäßig gibt es fünf Makros (event, referrer, url, url hostname und url path), die in Tags und Rules Verwendung finden. Im Quellcode eines Tags müssen zwei geschweifte Klammern den Namen des Makros umschließen: {{MakroName}}. GTM ersetzt den Platzhalter dort dann durch den Inhalt des Makros.

Eine Besonderheit hat der GTM noch: Wer etwa das E-Commerce-Tracking von Google Analytics nutzt, muss der Abschlussseite des Check-outs zwei Google Analytics-Tags hinzufügen – was nicht besonders intuitiv ist. Dazu legt der GTM-Nutzer zunächst eine URL-Regel an, die nur diese Adresse betrifft. Danach richtet er ein zweites Tag für Google Analytics mit den gleichen Einstellungen wie die des Haupt-Tags ein. In diesem Tag wird der „Tag Type“ von „Page View“ zu „Ecommerce“ geändert und die neue Regel, die nur die Abschlussseite betrifft, zugeordnet. Doch aufgepasst: Da der GTM eine Versionsverwaltung enthält, muss man Änderungen an Tags, Rules und Makros veröffentlichen, um sie auch auf der Website zu aktivieren.

Für die bisher vorgestellten Funktionen muss man den Quellcode der Webseite nicht anpassen – abgesehen vom Einbau des Tracking-Codes. Für besondere Ansprüche – wie dem Überschreiben von Standardwerten oder Event-Tracking – lassen sich viele weitere Daten übertragen oder modifizieren. Die Voraussetzung: Das JavaScript-Objekt „dataLayer“ ist entsprechend „befüllt“, bevor der GTM-Code geladen ist.

Die Variablennamen innerhalb des Objekts sind zwar frei wählbar, Google stellt aber eine Liste mit Namensempfehlungen zur Verfügung [1]. Wichtig zu beachten: Manche Tags benötigen bestimmte Namen, wie das E-Commerce-Tracking im Google-Analytics-Tag (Zum Beispiel „transactionId“ und „transactionTotal“). Der unten stehende Quellcode zeigt, wie zwei Variablen übergeben werden. Um eine dem dataLayer-Objekt übergebene Variable im GTM zur Verfügung zu
stellen, müssen Nutzer ein Makro vom Typ „Data Layer Variable“ anlegen und den
entsprechenden Namen im Feld „Data Layer Variable Name“ eingeben. Anschließend lassen sich
diese Daten an Tracking-Codes übergeben oder bei Eintreten der
jeweiligen Regel Tracking-Codes ausführen.

Das dataLayer-Objekt vereint alle Informationen, die die Tracking-Pixel
der Website benötigen. So entsteht eine saubere Trennung
zwischen Website-Code und den Tracking-Codes. Theoretisch ließen sich die
Inhalte von Tags und Attributen auch direkt aus dem DOM der Seite lesen.
Allerdings sollten Entwickler zwecks sauberen Codes davon absehen.

<body>
  <script>
    dataLayer = [{
      'pageCategory': 'signup',
      'visitorType': 'high-value'
    }];
  </script>
  <!-- Google Tag Manager -->
  ...
  <!-- End Google Tag Manager -->
  ...

Auch wenn der Google Tag Manager einfach zu bedienen ist, bietet er alle Optionen, die für die meisten Websites nötig sind. Durch das Konzept von Tags, Rules und Makros sowie dem dataLayer bietet
er große Flexibilität. Der GTM kann sehr viele Daten verarbeiten und an Tracking-Pixel weiterreichen. So ist es zum Beispiel auch möglich, auf JavaScript-Ereignisse zu reagieren. Praktisch auch, dass es die Tracking-Pixel-Verwaltung sogar schon für iOS- und Android-Apps gibt. Wer tiefer in die Thematik einsteigen möchte,
findet auf den Hilfeseiten [2] gute Informationen für die Bediener- und die Entwicklerseite.

Der Autor

Philip Hetjens ist Consultant bei Namics in Zürich. Mit seinem Informatik- und Marketing-Hintergrund betreut er Kunden zu den Themen Analytics, Adwords, Medienplanung und E-Mail-Marketing. Die Namics AG ist mit 400 Mitarbeitern eine der größten Web-Agenturen in der Schweiz.