Google Tag Manager: DataLayer einrichten & Google Analytics ausliefern

Mit Hilfe des kostenlosen Google-Tag-Managers (GTM) lassen sich beliebige Tags – zum Beispiel JavaScript-Tags zur Einbindung weiterer Tools –  nach nahezu beliebigen Regeln auf verschiedenen Unterseiten einer Website ausspielen, ohne dass hierfür in den  HTML-Code der Seite eingegriffen werden muss.

Dabei kann man beliebige Daten übergeben, die zur Aussteuerung von Tags oder für Targeting und die Personalisierung von Inhalten genutzt werden können.

Insgesamt ist der Google-Tag-Manager ein extrem mächtiges – aber (leider) noch recht selten genutztes Werkzeug. Die Vorteile und ein paar Anwendungsbeispiele möchten wir Dir in dieser Tutorialserie näher bringen.

Was sind die Vorteile?

Die konsequente Nutzung von Tag-Management bietet gleich mehrere Vorteile. Die wichtigsten sind:

Mehr Übersichtlichkeit und Kontrolle

Je mehr externe Tools zum Einsatz kommen, desto mehr verliert man die Übersicht, wo welches Tool oder Snippet eingebaut wurde. Die Änderungen an den Datei müssen oft nach Updates neu eingepflegt werden.

Die Oberfläche des Google Tag Managers bietet eine Übersicht aller integrierten Tags und macht es leicht, neue hinzuzufügen oder bestehende zu deaktivieren. Ohne erneuten Zugriff auf Server und ohne Änderungen an bestehenden Dateien.

Bessere Aussteuerung

Oftmals sollen verschiedene Tags unter bestimmten Bedingungen ausgespielt oder angepasst werden. Hierfür ist dann oft eine individuelle Programmierung erforderlich.

Der Google-Tag-Manager ermöglicht die Aussteuerung anhand von definierbaren Regeln – ohne umfangreiche Programmierkenntnisse.

(Oft) bessere Ladezeiten

Viele Tags sind so eingebaut, dass sie immer geladen werden – egal, ob die Funktion beim aktuellen Seitenaufruf benötigt wird oder nicht.

Mit dem Google-Tag-Manager kann man Tags nur dort ausspielen, wo Sie wirklich benötigt werden. Außerdem sorgt der technische Aufbau des Google-Tag-Managers dafür, dass weniger performante Tools hiervon profitieren (Details folgen weiter unten).

Versionierung und Fehlersuche

Wenn viele Tags von Drittanbietern in die Website eingebaut werden passieren schnell Fehler. Die können dazu führen, dass Teile der Website nicht mehr richtig funktionieren.

Der Google Tag Manager bietet die Möglichkeit, neue Konfigurationen ausgiebig zu testen. Wenn nichts mehr geht, kann man einfach auf eine frühere, noch funktionierende Version zurückwechseln.

Wie fange ich an?

Zur Implementierung des Google-Tag-Managers muss lediglich einmalig ein JavaScript-Tag in den HTML-Code der Website eingebaut werden. Hierüber können dann beliebige weitere Tags nachgeladen werden. Die weitere Konfiguration erfolgt dabei online über einen Browser, weitere technische Eingriffe in den HTML-Code der Seite sind nicht mehr notwendig.

Google-Tag-Manager einrichten

Zunächst meldest Du dich mit Deinem Google-Konto unter https://www.google.com/intl/de/tagmanager/ an, um den Tag-Manager für das eigene Google-Konto zu aktivieren.

Im ersten Schritt nach der Anmeldung legst Du ein neues Google-Tag-Manager-Konto an. Der Name hierfür kann frei vergeben werden.

Zu einem Konto können später weitere Nutzer hinzugefügt werden, die Einstellungen vornehmen können. Es bietet sich an, für getrennte Projekte auch getrennte Konten im Google-Tag-Manager anzulegen. So bist Du später flexibler, wenn weitere Nutzer hinzukommen sollten.

Zu jedem Google-Tag-Manager-Konto gehört mindestens ein Container, in dem später die auszuliefernden Tags zusammengefasst werden. Theoretisch können auch mehrere verschiedene Container innerhalb eines Projekts eingerichtet werden, was jedoch zunächst nicht notwendig ist.

Dann musst Du noch auswählen, wo der Container verwendet werden soll. In unserem Fall ist die richtige Einstellung “Web” für Website. Die Auswahlmöglichkeiten “iOS” und “Android” wären für die Auslieferung von Tags innerhalb von Apps bestimmt.

Beim Klick auf “Erstellen” wird Dir nach kurzer Zeit ein Fenster mit dem JavaScript-Code angezeigt, den Du für die Einbindung des Google-Tag-Managers in Deine Website benötigst.

Den angezeigten Installations-Tag fügst Du nun direkt nach dem öffnenden body-Tag (!) in deinen HTML-Code ein. Achte dabei darauf, dass der Tag auf allen Unterseite (!) der Website ausgespielt wird.

Die Integration des Google-Tag-Managers wäre mit dem Einbau des Tags im Prinzip abgeschlossen. Allerdings ist der Google-Tag-Manager mit der derzeitigen Installation noch ohne jede Funktion.

Um dies zu ändern, lassen wir Google Analytics über den Tag-Manager ausliefern. Vorher aber bereiten wir den Tag-Manager darauf vor, später die Auslieferung von Tags nach komplexeren Regeln steuern zu können. Hierzu integrieren wir einen so genannten Data-Layer.

Data-Layer vorbereiten

Mit Hilfe eines Data-Layers können Informationen von der Website an den Google-Tag-Manager übergeben werden, auf die andere Tags dann zugreifen können. Anwendungsbeispiele sind Regeln zur Steuerung der Auslieferung von Inhalten – etwa anhand der Zugehörigkeit eines Nutzers zu einer im Data-Layer übergebenen Benutzergruppe.

Um einen – zunächst leeren – Data-Layer zu integrieren, füge ein leeres Javascript-Object namens “dataLayer” vor (!) dem JavaScript-Code des Google-Tag-Managers, aber nach dem öffnenden body-Tag, ein.

Das ganze sieht dann etwa so aus

<script>
dataLayer = [{}];
</script>

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id='GTM-XXXXXX'"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- Ende Google Tag Manager -->

Die Integration des Data-Layers für eine spätere Verwendung ist damit zunächst abgeschlossen.

Google Analytics mit GTM ausliefern

Der nächste Schritt ist die Auslieferung von Google Analytics (Universal) über den Tag-Manager. Wichtig: Bitte entferne zuvor den bisherigen Google Analytics-Code aus Deiner Webseite, da die erhobenen Daten sonst verfälscht werden. Bei komplexeren Integrationen von Google Analytics kläre bitte zunächst, welche weiteren Anpassung erforderlich sein könnten.

Als erstes muss in der Tag-Manager-Oberfläche die ID der gewünschten Property aus Google Analytics hinterlegt werden.

Google Analytics Property-ID als Variable anlegen

Da diese Property-ID zukünftig öfters benötigt werden wird (zum Beispiel beim Tracking von Events), bietet es sich an, im Tag-Manager eine Variable zu hinterlegen, in der die Property-ID gespeichert wird. Hierzu wählst Du im Oberbereich “Container” links in der Navigation den Punkt “Variablen” und dann unten auf der Seite “Neu” im Bereich “Benutzerdefinierte Variablen”.

Als erstes brauchen wir einen Namen für die Variable, unter dem diese später systemweit angesprochen werden kann – im Beispiel wird “GA-ID” verwendet. Als Typ der benutzerdefinierten Variable wählen wir “Konstant” aus. Nach einem Klick auf “Weiter” geben gibst Du als Wert Deine Property-ID ein (Format: UA-123456-XX, Wie finde ich die Property-ID) und bestätigst mit “Variable erstellen”.

Anschließend sollte, sofern alles geklappt hat, unter “Benutzerdefinierte Variablen” folgendes Bild zu sehen sein.

Du kannst nun bei der Erstellung von Tags, die auf Google Analytics basieren, die hier hinterlegte Property-ID nutzen, ohne diese jedes mal neu eingeben zu müssen.

Google Analytics Tag erstellen

Der nächste Schritt ist das Anlegen des eigentlichen Tags für die Auslieferung von Google Analytics. Hierzu wählen wir links in der Navigation “Tags” und klicken dann auf “Neu”.

Zunächst vergeben Sie einen aussagekräftigen Namen für den Tag, hier “Google Analytics ausliefern”. Als Produkt wählen Sie “Google Analytics” und als Tag-Typ “Universal Analytics” (Was ist “Universal Analytics”?).

Nach einem Klick auf “weiter” öffnen sich weitere Optionen zur Konfiguration des Tag, den wir gerade erstellen. Im Feld “Tracking-ID” geben wir die den Namen der zuvor für die Property-ID festgelegten Variable in doppelt geschweiften Klammern am – im Beispiel also {{GA-ID}}. Mit einem Klick auf das + hinter dem Eingabefeld kannst Du die von Dir angelegte Variable auch per DropDown auswählen.

Als Erfassungstyp wählen wir “Seitenaufruf” aus – welche Seitenaufrufe hier ein- oder ausgeschlossen werden sollen, können wir später festlegen.

Für die Verwendung von Google Analytics in Deutschland muss zudem die IP-Adresse der Nutzer anonymisiert werden. Hierzu gehen wir in den Bereich “Festzulegende Felder” und klicken auf “Feld hinzufügen”. Als Feldname hinterlegst Du nun “anonymizeIp” und als Wert “true”.

Im nächsten Schritt können wir festlegen, wann der Tag ausgelöst werden soll – oder welche Ausnahme es bei der Auslösung des Tags geben soll.

Da in diesem Fall der Tag für Google Analytics bei allen Seitenaufrufen ausgelöst werden soll, wählen wir “Alle Seiten” aus und klicken anschließend auf Tag erstellen.

Der neu angelegte Tag sollte nun in der Liste Ihrer Tags erscheinen.

Änderungen veröffentlichen und testen

Oben rechts siehst Du nun einen roten Button mit der Aufschrift “Veröffentlichen”. Änderungen im Google-Tag-Manager werden in verschiedene Versionen gespeichert und können einfach getestet und rückgängig gemacht werden. Damit eine Änderung auch auf der Website ausgespielt wird, müssen die Änderungen zuvor veröffentlicht werden!

Nach dem Klick auf “Veröffentlichen” wird eine Zusammenfassung der Änderungen zur Vorversion angezeigt. Hier musst Du die Veröffentlichung erneut bestätigen.

Wenn Ihre Tag-Konfiguration keine Fehler enthält, solltest Du folgende Bestätigungsmeldung erhalten. Von diesem Moment an wird der Google-Tag-Manager bei jedem Aufruf Deiner Website automatisch den Tag zur Einbindung von Google Analytics ausspielen.

Um zu testen, ob das Tracking in Google Analytics  ordnungsgemäß funktioniert, wechseln wir nun in die Oberfläche von Google Analytics. Wir wählen links in der Navigation “Echtzeit” und dann “Übersicht”. Wenn Du nun, am besten mit einem anderen Browser (oder im Inkognitomodus), Deine Website besuchst, sollte der Besuch hier erfasst werden. Bitte achte darauf, dass keine Browser-Plugins wie AdBlocker, Ghostery oder andere Privacy-Plugins das Tracking von Google Analytics stören.

Fragen über Fragen

Einfluss des Tag-Managers auf die Geschwindigkeit der Website

Im ersten Moment drängt sich die Frage auf, ob die Website nicht langsamer wird, wenn ein weiteres Tool eingefügt wird, dass auf den ersten Blick “nichts anderes” tut, als weitere Tools zu laden.

Nein, oftmals wird die gefühlte Ladezeit der Website sogar verkürzt.

Tags, die über den Google-Tag-Manager eingebunden werden, werden asynchron geladen. Das bedeutet, sie werden erst geladen, wenn der Aufbau der restlichen Seitenelemente im Browser abgeschlossen ist. So wird der Aufbau der Website nicht durch Ladezeiten der eingebundenen Tag blockiert und der Benutzer bekommt schneller ein Ergebnis zu sehen.

Viele Tools werden in der Standardeinbindung (leider immer noch) synchron geladen, blockieren also den Aufbau der Seite im Browser während sie geladen werden. Dies kann je nach Internetverbindung, Qualität der Programmierung und Position des Tags im HTML-Code zu deutlichen Verzögerungen führen. Bindet man synchron ladende Tags nun über den Google-Tag-Manager ein, werden sie hierdurch asynchron geladen und sie blockieren den Aufbau der Website nicht mehr.

In vielen Fällen wird die Einbindung über den Google-Tag-Manager also zu einer Verbesserung der (gefühlten) Ladezeiten führen. Dies – und die weiteren Vorteile des Tag-Managements über die Weboberfläche – überwiegt deutlich den minimalen und nicht spürbaren Geschwindigkeitsnachteil bei einer doppelt-asynchronen Einbindung von Tags.

Datenschutz bei Verwendung des Google-Tag-Managers in Deutschland

Der Google-Tag-Manager selbst erfasst keine personenbezogenen Daten und verwendet auch keine Cookies. Insofern ist datenschutzrechtlich beim Einsatz des Google-Tag-Managers in Deutschland wohl keine Information hierzu in der Datenschutzerklärung erforderlich.

Allerdings ist zu beachten, dass die mit Hilfe des Google-Tag-Managers ausgelieferten Tools oftmals personenbezogene Daten erfassen und somit entsprechende Informationspflichten bestehen können.

Wie gehts weiter?

Nachdem nun Google Analytics über den Tag Manager ausgeliefert wird, fängt der spannende Teil eigentlich erst so richtig an, aber dazu mehr im zweiten Teil. 🙂