DigitalWatchBlog

Analytics / Tag Manager

Tutorial: Google Tag Manager einrichten

Der Google Tag Manager (GTM) ist ein Tool, welches das Einbinden von Tracking-Codes und Scripts auf der Website vereinfacht. Dabei bildet das Tool eine Zwischenschicht zwischen der Website und den Analyse Tools. Der GTM muss nicht zwingend mit einem Google Analytics Konto verbunden sein. Es können auch weitere Tracking-Tools wie Piwik etc. eingebunden werden. In diesem Tutorial zeige ich jedoch, wie mit Hilfe des GTM Google Analytics auf der Website eingebunden werden kann.

Doch bevor ich mit der Anleitung starte, noch paar Worte dazu, für wen der Google Tag Manager sinnvoll ist. Google selbst beschreibt im Supportbereich, dass der GTM insbesondere bei Fällen der Fall ist, wo mehrere Tracking-Tools im Einsatz sind. Um so Zeit und Aufwand bei der Implementierung direkt auf der Website zu sparen. Jedoch kann mit dem GTM bedeutend mehr gemacht werden, als nur Tracking-Codes einzurichten.

Der GTM ist ähnlich wie Google Analytics aufgebaut. Dabei gibt es ein Konto, bei dem mehrere Container angelegt werden können. Analog zu Google Analytics sind Container ähnlich wie Properties. In jedem Container können anschliessend Tags, Triggers und Variablen angelegt werden.

Tags bezeichnen die JavaScript-Codes oder Tracking-Pixel, die für das Erfassen von Daten angelegt werden können.
Trigger sind Regeln, die entscheiden, ob ein Tag gefeuert, also ausgelöst wird, oder nicht. Der GTM hat bereits eine Vielzahl von Triggern, die integriert sind. Jedoch können auch neue Trigger auf Basis von JavaScript integriert werden.
Variablen stellen die Daten bereit, mit denen Tags und Trigger arbeiten. So ist zum Beispiel die URL der aktuellen Seite in einer Variablen abgelegt. Es können eine Vielzahl von Variablen angelegt werden, die später in Google Analytics oder anderen Tool übergeben werden können.

Vereinfacht heisst dass:
Tags bestimmen, was erfasst werden soll
Trigger entscheiden, wann erfasst werden soll
– und Variablen enthalten die Daten, die in Tags und Trigger genutzt werden.

Zudem arbeitet der GTM mit einem DataLayer, der als Informationsspeicher dient, mit dem per JavaScript Daten an GTM übergeben und anschliessend in Tags und Triggern genutzt werden können.

Schritt für Schritt den Google Tag Manager einrichten

1. Konto einrichten

Als erstes muss im Google Tag Manager ein Konto eingerichtet werden. Dazu müssen wir uns unter tagmanager.google.com zuerst anmelden, sofern noch nicht passiert. Anschliessend kann ein neues Konto erstellt werden. Dabei kann der Kontoname frei gewählt werden. In GTM Account können mehrere Konten angelegt werden. Arbeitest du in einer Agentur, so muss für jeden Kunden ein neues Konto erstellt werden. In einem Unternehmen kann das Konto beispielsweise die Website beinhalten.

Anmerkung: Auch im GTM gibt es eine Nutzerverwaltung, analog zum Google Analytics Account. Dabei können einzelne Konten aber auch Container in den einzelnen Konten an anderen Nutzer freigegeben werden.

Im nebenstehenden PrintScreen hab ich ein Konto namens “DigitalWatchBlog” für die Website “www.digitalwatchblog.ch” erstellt. Jetzt kann noch der Verwendungsort ausgewählt werden. Der GTM kann nicht nur in Websites, sondern auch in Apps und AMP-Sites verwendet werden. Wir erstellen jedoch einen Container für die Website.

Mittels Klick auf “Erstellen” werden die Nutzungsbedingungen von GTM angezeigt, welche mittels “Ja” bestätigt werden sollen.

Anschliessend gelangst du direkt in dein Dashboard, wo dir der Tracking-Code von GTM angezeigt wird, welcher du einmalig auf der Website hinzufügen musst.

2. Tracking-Code vom Google Tag Manager einbauen

Den angezeigten Tracking-Code kopierst du in die Zwischenablage. So kannst du den Code entweder selbst auf der Website einbauen, oder  sendest den Code dem Programmierer für den Einbau. Es gibt, gegenüber von Google Analytics, zwei Tracking-Codes, die eingebaut werden müssen. Einerseits das Script, welches direkt vor dem schliessenden head-Tag (</head) eingebaut werden soll. Sowie der zweite Code, welcher direkt nach dem öffnenden body-Tag (<body>) eingebaut werden muss.

Der GTM Tag und der Google Analytics Tag können parallel in der Website eingebunden werden. Sobald wir jedoch im Container den Google Analytics Tag erstellt haben, muss der Tracking-Code von Google Analytics auf der Website entfernt werden. Da es sonst zu Doppelzählungen kommt.

Ich arbeite sehr gerne mit WordPress. Daher zeige ich, wie der GTM-Code in einer WordPress-Installation hinzugefügt werden kann. Dazu gibt es zwei Möglichkeiten.

  1. Du installierst das Plugin “DuracellTomi’s Google Tag Manager for WordPress” auf deiner WordPress-Installation und musst anschliessend nur noch unter Einstellungen -> Google Tag Manager dein GTM ID eintragen. Die GTM-ID findest du in deinem Tracking-Script. Die GTM-ID beginnt immer mit GTM, gefolgt von einem Bindestrich und sieben Zahlen oder Buchstaben. (bspw: GTM-1A2B3C4).
    Hast du das gemacht, so ist deine WordPress-Seite bereit für die Verwendung im Google Tag Manager.
  2. Du öffnest in WordPress unter Design-> Editor dein Theme in der Script-Ansicht und wählst das Template header.php aus. Dort suchst du nach </head> und kopierst das erste Script vor dem </head> Tag ein. Anschliessend suchst du den <body> Tag und kopierst das zweite Script direkt nach dem <body> Tag ein. Mit einem Klick auf “Datei aktualisieren” ist nun dein GTM Tag korrekt integriert.
    Kleiner Hinweis am Rande: Kopiere das ganze Script inkl. den Kommentaren, damit du es später auch schnell wieder findest, falls sich was ändern sollte am Script.
    Im Bild rechts findest du das eingefügte Script in WordPress.

Nun sollte dein Workspace im Google Tag Manager wie folgt aussehen.

3. Konstante Variable einrichten

Damit wir künftig neue Tags schneller erstellen können, erstellen wir dazu eine konstante Variable. Dazu klickst du in deinem Workspace auf Variable und bei benutzerdefinierten Variable auf “NEU”. Nun öffnet sich ein neues Fenster. Hier kannst du zuerst die Variable umbenennen. Ich nenne die Variable “Google Analytics ID”.  Mit Klick auf den Baustein in der Mitte des Fensters öffnet sich rechts eine Auswahl mit verschiedenen Arten von Variablen. Hier suchst du nach “Konstant” und klickst diese wiederum an.

Nun kannst du die Variable konfigurieren. In unserem Fall, müssen wir lediglich einen Wert eintragen. Öffne dazu dein Google Analytics Account und gehe unter Verwaltung auf deine Property und kopiere die Tracking ID.

Diese Tracking ID kannst du nun im GTM im Feld “Wert” einfügen

.

Mittels klick auf “Speichern” oben rechts ist nun die konstante Variable erstellt.

4. Google Analytics Tag erstellen

Nun klicken wir in der Seitenleiste links auf den Menupunkt “Tags”.  Aktuell sollten bei Euch noch keine Tags integriert sein. Mittels Klick auf “Neu” können wir nun den ersten Tag erstellen.

Es öffnet sich das Tag-Fenster. Hier kann wiederum der Name für den Tag hinterlegt werden. In meinem Beispiel habe ich den Tag “Google Analytics Tracking” genannt. Anschliessend klickst du im Feld “Tag-Konfiguration” auf das Icon. Es öffnet sich nun rechts wiederum eine Auswahl. Diesmal jedoch mit den verschiedenen vordefinierten Tags. Wähle in der Auswahl “Universal Analytics” aus. Nun siehst du die Auswahl in der Tag-Konfiguration sowie einem Feld, der Tracking ID.
Da wir bereits eine konstante Variable mit der Tracking ID erstellt haben, kannst du mittels Klick auf das Symbol neben dem Textfeld “Tracking ID” nach der Variable “Google Analytics ID” suchen und diese auswählen.

Nun kann noch der Tracking-Typ definiert werden. Da wir Google Analytics bei Seitenaufrufen eingesetzt haben wollen, wähle hier den Typ “Seitenaufrufe”. Für was die weiteren Typen sind, werde ich in späteren Tutorials noch genauer erklären.

Damit nun der Tag abgefeuert, also ausgelöst werden kann, muss noch ein Trigger gewählt werden. Hierzu klickst du im Feld “Trigger” auf das Icon. Es öffnet sich nun eine Auswahl von möglichen Triggern. Wenn alles korrekt lief bis jetzt, solltest du einen Trigger namens “All Pages” haben. Diesen wählst du aus.

Nun sollte die Einstellung identisch mit dem untenstehenden Bild sein. Damit der Tag gespeichert wird, klicke oben rechts noch auf “Speichern”.

Der Tag ist nun gespeichert, aber noch nicht aktiv. Nun sehen wir, dass wir einen Tag haben, welcher als Trigger “all pages” hat.

Mit Klick auf “Arbeitsbereich” oben im blauen Menu kommen wir zurück in den Workspace.

5. Tag testen

Der Tag ist nun gespeichert, aber noch nicht aktiv. Bevor wir den Tag veröffentlichen, prüfen wir, ob dieser korrekt funktioniert. 

Dazu kannst du oben rechts auf das Dropdown-Menu bei “Veröffentlichen” klicken und anschliessend den Button “Vorschau” klicken.

Nun ist die Vorschau aktiviert.

Damit du nun den Tag prüfen kannst, öffne im Browser einen neuen Tab und gehe auf deine Seite. Nun wird sich auf deiner Seite im unteren Bereich der Tag Manager öffnen.
Dabei siehst du, welche Events in GTM ausgelöst  (nicht zu verwechseln mit Events aus Google Analytics) und welche Tags abgefeuert wurden.

In der Vorschau siehst du links die Events, welche vom Google Tag Manager ausgelöst wurden, und im rechten Feld, welche Tags abgefeuert wurden. Mit dieser Ansicht werden wir in den weiteren Tutorials noch viel arbeiten. Du siehst im Menu neben Tags noch die Punkte “Variables” und “Data Layer”. Hier kannst du nachschauen, welche Variablen verfügbar sind und welche Informationen im Data Layer ersichtlich sind.

6. Tag veröffentlichen

Wird das Tag wie oben im Bild ersichtlich korrekt abgefeuert, wechsle im Browser zum Google Tag Manager, klicke auf “Vorschaumodus beenden”. Nun kannst du deinen Tag veröffentlichen. Klicke dabei auf den Button “Veröffentlichen” oben rechts.

Es werden dir nun die Änderungen angezeigt, die du veröffentlichen wirst. Hast du das Tutorial eins zu eins durchgespielt, so gibt es zwei Änderungen. Einerseits die konstante Variable und andererseits das Google Analytics Tracking Tag. Bestätige die Veröffentlichung mit Klick auf den blauen Button “veröffentlichen”. Nun kommt noch ein Feld, bei dem du die Containerversion beschriften und beschreiben kannst. Dies dient dazu, dass du jederzeit erkennst, bei welcher Veröffentlichung du was angepasst hast. Es ist auch sehr sinnvoll dies einzusetzen, wenn mehrere Personen im Google Tag Manager arbeiten.

Nun ist das Google Analytics Tracking-Script live. Jetzt musst du unbedingt das bestehende Google Analytics Script, sofern vorhanden, aus deiner Website entfernen. Ansonsten werden alle Besucher doppelt gezählt. Du siehst im Workspace jeweils, welche Version aktuell live ist im grünen Feld.

Und so hast du bereits deinen ersten Tag über den Google Tag Manager auf der Website integriert.

Hast du Fragen zum Google Tag Manager oder dieser Anleitung, dann schreib es in die Kommentare und ich werde zeitnah Antworten.

Share me....Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestBuffer this pageShare on TumblrEmail this to someone

Kommentiere den Beitrag