Anzeige
Anzeige
Software & Entwicklung
Artikel merken

Content Management System für Tracking-Codes: Google Tag Manager

Immer mehr Tracking-Codes verfolgen heute das Surf-Verhalten der Besucher auf Websites: Die einen füttern so das Analytics-System, andere die Kampagnensteuerung von Adwords, Facebook und vielem mehr. Das kostenlose CMS für Tracking-Codes „Google Tag Manager“ hilft dabei, bei dem Tracking-Chaos die Übersicht zu behalten.

7 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Vorteile eines Tag-Managements

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:

Anzeige
Anzeige

Aufgeräumter Code und saubere Implementierung

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.

Anzeige
Anzeige

Marketing-Instrumente

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.

Release-Zyklus-Unabhängigkeit

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.

Anzeige
Anzeige

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.

Über das Interface des GTM kann das Marketing neue Accounts und Container einfach anlegen. Es dient als zentrale Anlaufstelle für Marketing-Verantwortliche.
Über das Interface des GTM kann das Marketing neue Accounts und Container einfach anlegen. Es dient als zentrale Anlaufstelle für Marketing-Verantwortliche.

Google Tag Manager konkret

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.

Anzeige
Anzeige
Die Containerübersicht des Google Tag Manager zeigt alle Tags, Rules und Macros für eine Webseite. Eine getrennte Verwaltung verschiedener Tracking-Codes ist somit nicht mehr nötig.
Die Containerübersicht des Google Tag Manager zeigt alle Tags, Rules und Macros für eine Webseite. Eine getrennte Verwaltung verschiedener Tracking-Codes ist somit nicht mehr nötig.

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.

Rules, Tags und Makros

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.

Anzeige
Anzeige
Die Einrichtung des Google Tag Manager ist sehr einfach: Um ein Google-Analytics-Tracking im GTM aufzusetzen, muss der Programmierer nur die Web Property ID und eine Firing Rule im Web-Interface einstellen.
Die Einrichtung des Google Tag Manager ist sehr einfach: Um ein Google-Analytics-Tracking im GTM aufzusetzen, muss der Programmierer nur die Web Property ID und eine Firing Rule im Web-Interface einstellen.

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.

Für das E-Commerce-Tracking mit Google Analytics muss das Marketing den „Tag Type“ umstellen, den Tag nur auf der Check-out-Site aufrufen und im Quellcode der Site das dataLayer-Objekt befüllen.
Für das E-Commerce-Tracking mit Google Analytics muss das Marketing den „Tag Type“ umstellen, den Tag nur auf der Check-out-Site aufrufen und im Quellcode der Site das dataLayer-Objekt befüllen.

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.

Das dataLayer-Objekt

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.

Anzeige
Anzeige

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.

Übergabe der zwei Variablen „pageCatagory“ und „VisitorType“ an das dataLayer-Objekt
<body>
  <script>
    dataLayer = [{
      'pageCategory': 'signup',
      'visitorType': 'high-value'
    }];
  </script>
  <!-- Google Tag Manager -->
  ...
  <!-- End Google Tag Manager -->
  ...

Listing 1

Fazit

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige