Komplette Google Tag Manager (GTM) Einrichtung in 2024

Ich erkläre dir Schritt für Schritt wie du den Google Tag Manager (GTM) einrichten kannst.

Pankart UX & Webdesign - 3D Icon - Werkzeuge
Komplette Google Tag Manager (GTM) Einrichtung in 2024

Google Tag Manager Website öffnen

Besuche die offizielle Website des Google Tag Managers (GTM) in deinem Browser, indem du https://tagmanager.google.com/ öffnest.

Anmelden in deinem Google Konto

Melde dich mit dem Google Konto an, welches die Admin und Verwaltungsrechte für dein neues Google Tag Manager (GTM) Konto haben soll.

Google Tag Manager (GTM) Konto erstellen

Erstelle jetzt ein neues Google Tag Manager (GTM) Konto, indem du dem Konto einen Namen gibst (Kontoname) und das Land auswählst, in welchem sich der Hauptsitz des Unternehmens befindet, für welches in diesem Schritt ein Konto erstellt wird.

Du kannst optional die Checkbox „Daten anonym an Google und andere weitergeben“ auswählen, wenn du möchtest, dass Google anonym Daten für Benchmarking Zwecke sammelt.

Folgende Informationen werden von Google zu dieser Datensammlung gegeben:

„Aktivieren Sie das Benchmarking, indem Sie der anonymen Weitergabe Ihrer Website-Daten zustimmen. Dabei entfernt Google alle Informationen, durch die Ihre Website identifiziert werden könnte, kombiniert die Daten mit Hunderten von anderen anonymen Websites und stellt Gesamttrends im Benchmarking-Dienst dar.“

Google Tag Manager (GTM) Container erstellen

Im nächsten Schritt muss der Google Tag Manager (GTM) Container erstellt werden. In der Containerkonfiguration kannst du einen Containernamen wählen, welcher im besten Fall die Domain des Unternehmens sowie die Zielplattform enthält, damit man eine bessere Übersicht bei größeren Setups hat.

Wähle die Zielplattform, auf welcher der Google Tag Manager (GTM) später installiert werden soll. Folgende Zielplattformen stehen in diesem Schritt zur Verfügung:

  • Web
  • iOS
  • Android
  • AMP
  • Server

 

Wähle „Web“, wenn du den Google Tag Manager (GTM) auf einer Website installieren möchtest.

Hast du deine Auswahl getroffen musst du die Google Tag Manager (GTM) Nutzungsbedingungen bestätigen.

Google Tag Manager installieren

Jetzt kannst du den Google Tag Manager (GTM) installieren. Bei der ersten Einrichtung erscheint ein Popup Fenster, welche die Informationen für die Installation enthält. Solltest du das Fenster geschlossen haben, dann findest du diese Informationen unter Verwaltung > Google Tag Manager installieren.

Es müssen 2 Codes auf jeder einzelnen Seite der Website installiert werden jeweils im <head> und <body> Bereich des HTML Codes.

Der erste Code muss so weit oben wie möglich im <head> Bereich der Seite installiert werden und sieht so aus:

<!– Google Tag Manager –>
<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=
‚https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script‘,’dataLayer‘,‘GTM-XXXXXXXX‚);</script>
<!– End Google Tag Manager –>

Was macht dieser Code genau?

Dieser Code fügt den Google Tag Manager Container Code auf einer Webseite ein. Der Code lädt das Google Tag Manager Skript asynchron und initialisiert die DataLayer-Variable, die zur Übertragung von Daten zwischen dem Website-Code und dem Google Tag Manager Container verwendet wird.

Einbindung der DataLayer-Bibliothek:

  • w[l]=w[l]||[]: Diese Zeile initialisiert die globale Variable dataLayer, falls diese noch nicht existiert.
  • w[l].push({‚gtm.start‘: new Date().getTime(),event:’gtm.js‘}): Diese Zeile fügt ein neues Objekt mit zwei Eigenschaften an die dataLayer-Variable an:
    • ‚gtm.start‘: Enthält die aktuelle Zeit in Millisekunden, zu der das Google Tag Manager Skript geladen wurde.
    • ‚event‘: Hat den festen Wert ‚gtm.js‘, um das Laden des Skripts zu kennzeichnen.

Erstellen des Script-Elements:

  • var f=d.getElementsByTagName(s)[0]: Diese Zeile speichert das erste <script>-Element im Dokument in der Variable f.
  • j=d.createElement(s): Diese Zeile erstellt ein neues <script>-Element und speichert es in der Variable j.
  • dl=l!=’dataLayer‘?’&l=’+l:“;: Diese Zeile erstellt eine URL-Zeichenfolge (dl), die die DataLayer-ID (l) enthält, falls diese von „dataLayer“ abweicht.

Konfiguration des Script-Elements:

  • j.async=true: Diese Zeile setzt das async-Attribut des Script-Elements auf true, wodurch der Browser das Skript asynchron laden kann, ohne den Rest der Seite zu blockieren.
  • j.src=’https://www.googletagmanager.com/gtm.js?id=’+i+dl;: Diese Zeile legt die src-Eigenschaft des Script-Elements auf die URL des Google Tag Manager Skripts fest, wobei i die Container-ID des Google Tag Manager Containers und dl die zuvor erstellte URL-Zeichenfolge mit der DataLayer-ID ist.

Einfügen des Script-Elements:

  • f.parentNode.insertBefore(j,f): Diese Zeile fügt das neue Script-Element (j) vor dem ersten <script>-Element (f) im Dokument ein.

Der zweite Code sollte direkt nach dem eröffnenden <body> Tag auf jeder Seite eingefügt werden:

<!– Google Tag Manager (noscript) –>
<noscript><iframe src=“https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX
height=“0″ width=“0″ style=“display:none;visibility:hidden“></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Was macht dieser Code genau?

Dieser Code fügt ein unsichtbares <iframe>-Element auf einer Webseite ein, das den Google Tag Manager NoScript-Dienst aufruft, wenn JavaScript deaktiviert ist. Der NoScript-Dienst ermöglicht es, grundlegende Tracking-Daten auch von Besuchern zu erfassen, die JavaScript deaktiviert haben.

Erstellen des <iframe>-Elements:

  • <noscript>: Dieses Tag kennzeichnet den folgenden Codeblock als nur für Browser gedacht, die JavaScript deaktiviert haben.
  • <iframe src=“https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX“ height=“0″ width=“0″ style=“display:none;visibility:hidden“></iframe>: Diese Zeile erstellt ein <iframe>-Element mit folgenden Eigenschaften:
    • src: Legt die URL des Google Tag Manager NoScript-Dienstes fest, wobei GTM-XXXXXXXX durch die eigene Container-ID des Nutzers ersetzt werden muss.
    • height und width: Setzt die Höhe und Breite des Iframes auf 0 Pixel, wodurch es unsichtbar wird.
    • style: Legt die CSS-Eigenschaften display und visibility auf none fest, um das Iframe zusätzlich zu verbergen.

Zusätzliche Hinweise:

  • Die Verwendung des NoScript-Codes ist optional, aber empfehlenswert, um eine umfassendere Datenerfassung zu gewährleisten.
  • Der NoScript-Code kann mit zusätzlichen Parametern erweitert werden, um die Konfiguration des Google Tag Manager Containers anzupassen.

Google Tag Manager (GTM) Installation testen

Wenn du die beiden Codes auf deiner Website installiert hast, dann kannst du testen, ob du es richtig gemacht hast. Der Google Tag Manager (GTM) hat für diese Zwecke eine eigene Oberfläche – den Vorschaumodus bzw. Debug Modus.

Öffne den Arbeitsbereich im Google Tag Manager (GTM) und klicke danach rechts oben auf den Button „In Vorschau ansehen“.

Es öffnet sich ein Fenster, in welchem du die URL der Website eingeben kannst, auf welcher der Code eingebunden worden ist. Dieses Popup hat eine Checkbox, welche standardmäßig ausgewählt ist. Ist diese Checkbox aktiviert, dann wird die aufgerufene URL zusätzlich durch einen Debug Parameter ergänzt, welcher den Test zuverlässiger macht, jedoch bei manchen Seiten zu Fehlern führen kann.

Hast du eine Entscheidung getroffen kannst du auf „Connect“ klicken, was ebenfalls einen neuen Tab im Browser öffnet. Wurde der Google Tag Manager (GTM) Container richtig installiert, dann sieht man das rechts unten.

Wurde die Google Tag Manager Installation erkannt, dann hast du alle Schritte richtig gemacht. Du kannst den Google Tag Manager jetzt nach Belieben erweitern.

Kontakt

Ich freue mich auf deine Nachricht.