Zum Inhalt springen
sGTM.space

Google Tag Manager auf deiner Website installieren (Web-Container)

Mit dem Google Tag Manager (GTM) fügst du Tracking-Tags hinzu und änderst sie, ohne für jede Änderung den Code deiner Website anzufassen. Du installierst einmal ein kleines Snippet, danach verwaltest du GA4, Werbepixel und andere Tags in der GTM-Oberfläche. In dieser Lektion legst du den Web-Container an, installierst ihn, sendest dein erstes eigenes Event und veröffentlichst eine Version. Alle weiteren Lektionen bauen auf diesem Container auf.

Einsteiger 8 Min. Lesezeit

Das lernst du

  • Ein GTM-Konto und einen Web-Container für deine Website anlegen.
  • Das Head-Snippet und das noscript-Snippet im Body richtig einbauen.
  • Ein eigenes Event in den dataLayer schreiben und im Preview-Modus sehen.
  • Eine Container-Version einreichen und veröffentlichen und verstehen, wozu Workspaces und Versionen da sind.

Bevor du startest

  • Ein Google-Konto.
  • Zugriff auf das Template oder CMS deiner Website, damit du Code auf jeder Seite einfügen kannst.

01 Konto und Web-Container anlegen

Ein GTM-Konto entspricht meist einem Unternehmen. Darin legst du pro Website einen Container an (und später einen eigenen Server-Container, um den es in Lektion 2 geht).

  1. 1 Öffne tagmanager.google.com und klicke auf Create Account.
  2. 2 Gib einen Account Name (dein Unternehmen) und dein Country ein.
  3. 3 Trage unter Container Setup deine Domain als Container name ein, zum Beispiel www.example.com.
  4. 4 Wähle Web als Target platform und klicke auf Create.
  5. 5 Akzeptiere die Nutzungsbedingungen des Google Tag Manager.

GTM zeigt dann den Dialog Install Google Tag Manager mit zwei Snippets. Deine Container-ID hat das Format GTM-XXXXXXX und steht in beiden.

02 Die beiden Snippets einfügen

Füge das erste Snippet so weit oben wie möglich im <head> jeder Seite ein. Es lädt GTM asynchron und blockiert das Rendern also nicht.

html 
<!-- 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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Füge das zweite Snippet direkt nach dem öffnenden <body>-Tag ein. Es ist ein Fallback für Browser mit deaktiviertem JavaScript.

html 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • Setze in beiden Snippets deine eigene Container-ID ein, nicht GTM-XXXXXXX.
  • Platziere die Snippets in einer gemeinsamen Layout- oder Theme-Datei, damit sie auf jeder Seite erscheinen und nicht nur auf der Startseite.
  • Viele CMS (WordPress-Plugins, Shopify, Webflow) haben ein Feld für die GTM-ID. Nutze entweder das Feld oder die Snippets, nie beides, sonst lädt GTM doppelt.

03 Dein erstes eigenes Event über den dataLayer senden

Der dataLayer ist ein JavaScript-Array, das sich deine Website und GTM teilen. Dein Code schreibt Objekte hinein, und GTM reagiert darauf. Ein Objekt mit dem Schlüssel event wird zu einem Event, auf das Trigger hören können; die übrigen Schlüssel werden zu Werten, die du mit Data Layer Variables ausliest.

js 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'sign_up',
  method: 'email'
});

Führe diesen Code aus, wenn die Aktion passiert, zum Beispiel nach einer erfolgreichen Registrierung. So nutzt du ihn im GTM:

  1. 1 Geh zu Triggers, klicke auf New und wähle Custom Event.
  2. 2 Setze Event name auf sign_up (muss exakt übereinstimmen, auch bei Groß- und Kleinschreibung) und speichere.
  3. 3 Geh zu Variables, klicke unter User-Defined Variables auf New, wähle Data Layer Variable und setze Data Layer Variable Name auf method.

04 Im Preview-Modus testen

Der Preview-Modus zeigt dir genau, was GTM auf deiner Website sieht, bevor irgendetwas live geht.

  1. 1 Klicke oben rechts im Workspace auf Preview. Tag Assistant öffnet sich in einem neuen Tab.
  2. 2 Gib die URL deiner Website ein und klicke auf Connect. Deine Website öffnet sich in einem weiteren Fenster mit einem Tag-Assistant-Badge.
  3. 3 Geh zurück zum Tag-Assistant-Tab. Links siehst du Events wie Consent Initialization, Initialization, Container Loaded, DOM Ready und Window Loaded.
  4. 4 Löse die Registrierung auf deiner Website aus. Ein sign_up-Event erscheint; klicke darauf und öffne den Tab Data Layer, um method: email zu sehen.

Wenn sich Tag Assistant nicht verbinden kann, prüfe, ob das Snippet auf der Seite ist und die richtige Container-ID nutzt. Weitere Ursachen findest du in der Lektion zur Fehlersuche.

05 Version einreichen und veröffentlichen

Keine Änderung im GTM erreicht deine Besucher, bevor du sie veröffentlichst.

  1. 1 Klicke oben rechts auf Submit.
  2. 2 Lass Publish and Create Version ausgewählt.
  3. 3 Gib einen Version name und eine Version description ein, die beschreiben, was sich geändert hat, zum Beispiel Add sign_up trigger.
  4. 4 Klicke auf Publish.
  • Workspaces sind Entwürfe. Jeder enthält unveröffentlichte Änderungen, sodass zwei Personen arbeiten können, ohne sich gegenseitig zu überschreiben. Der kostenlose GTM-Tarif erlaubt drei Workspaces pro Container.
  • Versions sind Momentaufnahmen des Containers zum Zeitpunkt der Veröffentlichung. Unter Versions siehst du, wer was veröffentlicht hat, und kannst eine ältere Version erneut veröffentlichen, um zurückzurollen.
  • Beide Snippets sind mit deiner eigenen GTM--ID auf jeder Seite.
  • Tag Assistant verbindet sich mit deiner Website.
  • Das sign_up-Event erscheint in Preview mit seinem method-Wert.
  • Die erste Version ist mit einem eindeutigen Namen veröffentlicht.

Häufige Fragen

Ersetzt der Web-Container meinen GA4-Code?

Das kann er. Statt das GA4-Snippet direkt einzufügen, legst du im GTM ein Google-Tag an. In Lektion 3 machst du genau das und schickst die Daten über deinen Server-Container. Entferne ein fest eingebautes GA4-Snippet, sobald GTM dieselben Daten sendet, sonst zählst du alles doppelt.

Wozu brauche ich das noscript-Snippet?

Es läuft nur, wenn JavaScript deaktiviert ist, und das ist selten. Google empfiehlt es trotzdem, und es schadet nicht, also baue es ein.

Ich habe veröffentlicht, aber meine Änderung erscheint nicht auf der Website. Warum?

Prüfe, ob du den Workspace mit der Änderung veröffentlicht hast, und lade die Seite dann ohne Cache neu. Seiten-Caches und CDNs können auch eine alte HTML-Seite ausliefern, die GTM-Datei selbst aktualisiert sich aber innerhalb weniger Minuten.

Bereit, es in die Praxis umzusetzen?

Richte in wenigen Minuten einen Server-GTM-Container auf deiner eigenen Domain ein. Für den Free-Tarif brauchst du keine Karte.

Kostenloses Konto erstellen