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

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 (und die Data Processing Terms, wenn du im EWR oder im Vereinigten Königreich bist).

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

Du kannst den Container auf zwei Arten laden. Jede nutzt zwei Snippets: eines im <head> und einen Fallback direkt nach dem öffnenden <body>-Tag. Entscheide dich für eine Art und nutze nur deren Snippets, sonst lädt GTM zweimal.

<!-- Google Tag Manager -->
<script data-cfasync="false">(function(w,d,s,l){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);j.async=true;j.src="https://load.k7q2x.example.com/h3k9x2mq7tbp.js";f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://load.k7q2x.example.com/ns.html"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!-- Google Tag Manager -->
<script data-cfasync="false">(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 -->

<!-- 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) -->

Platziere die Snippets in einer gemeinsamen Layout- oder Theme-Datei, damit sie auf jeder Seite erscheinen und nicht nur auf der Startseite.

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.

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.

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 den richtigen Container lädt: die ID in Googles Snippet oder die Web-GTM-Container-ID auf der Better-Loader-Karte. Weitere Ursachen findest du in der Lektion zur Fehlersuche.

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 auf jeder Seite: die von Better Loader oder die von Google mit deiner eigenen GTM--ID, nie beide.
• 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.