Google Tag Manager Installieren [Wordpress und mehr]

In diesem Beitrag erfährst du wie du den Google Tag Manager aufsetzt und in deine WordPress-Seite, deinen Online-Shop, deine Webseite und anderem CMS-Systemen einbinden und installieren kannst.

Inhaltsverzeichnis

Autor | René van Loock

Digital Analyst und TÜV-Nord Zertifizierter Datenschutzbeauftragter. Seit mehr als 3 Jahren beschäftige ich mich täglich mit dem Google Tag Manager.

Google Tag Manager Manuell der Webseite hinzufügen

Der Google Tag Manager kann jeder Webseite hinzugefügt werden. Dieser Einbau funktioniert in allen CMS-, Shopsystem oder sonstigen eignes programmierten Systemen.

Der Google Tag Manager Quellcode besteht aus zwei Code-Schnipseln. Einem <script> und einem <noscript> Teil. Der erste <script> Teil wird in den Head-Bereich einer Webseite eingebaut, der zweite Teil im Body-Bereich. Auf allen Seiten.

GTM - Skript - Head

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

GTM - Skript - Body

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

Erfahrungen aus der Praxis

Auf manchen Webseiten kann es zu Fehlern kommen, wenn Ihr den Google Tag Manager wirklich als erstes (ganz oben) in den <head> Bereich einbaut. Da der Tag Manager nicht zwingend als erstes auf der Seite geladen werden muss, empfehle ich den Einbau immer vor dem schließenden </head>

Der <noscript> Part dient dazu Nutzer zu tracken, die JavaScript deaktiviert haben. Außerdem ist es wichtig solltet Ihr die Google Search Console über den Tag Manager verifizieren, dass der <noscript> Part direkt nach dem öffnenden <body> hinzugefügt wird. Wenn Ihr beides nicht benötigt, könnt Ihr das Script komplett weglassen. Der Head-Teil des Google Tag Managers funktioniert auch so einwandfrei.

Bei manchen CMS-Systemen gibt es keine einfache Möglichkeit den Code im <head> Bereich zu platzieren. Im Zweifel kann der erste Teil des GTM-Codes auch im <body> platziert werden. Das ist nicht ideal. Es kann hier zu Trackingverlusten kommen. Diese bewegen sich aber wahrscheinlich zwischen 0,1% – 0,5%.

Google Tag Manager in WordPress Installieren

Zum Installieren in WordPress kannst du grundsätzlich unterschiedliche Ansätze wählen. Manuell oder per Plugin. So oder so, in beiden Fällen dauert der Einbau nur wenige Minuten.

Nach der englischen Definition wurden Tag Manager also vor allem für den Einbau von Marketing Tags entwickelt. Heute ist über den Tag Manager sehr viel mehr möglich. So lässt sich fortschrittliches Event Tracking oder der Einbau von eigenen Cookies über den Tag Manager realisieren.

Dadurch lässt sich zum Beispiel herausfinden woher der Nutzer kam, wie tief er gescrollt hat, wie er die Maus bewegt, auf welchen Seiten er welche Elemente geklickt oder Formulare benutzt hat.

Google Tag Manager manuell in WordPress einbinden

Wer sicher mit WordPress und ein wenig Code umgeht, kann den Google Tag Manager auch direkt im Quellcode platzieren. Diese Einbaumethode spart ein Plugin und damit womöglich kostbare Ladezeit. So geht´s:

Tagmanager-Containercode finden

gtm-container-code-finden

Angezeigten Code Kopieren/ Speichern

gtm-container-code

Der Google Tag Manager besteht aus zwei Code-Schnipseln. Ein Teil soll im Head Bereich der Webseite eingebaut werden (ganz oben im Quellcode), der andere Teil soll direkt nach dem öffnenden Body Tag platziert werden. Zumindest ist dies von Google empfohlen.

Baut Ihr den Google Tag Manager zum Beispiel erst in den Footer der Seite ein, ändert sich für euch erstmal direkt nichts. Er funktioniert weiterhin und auch ohne den Code-Teil der im Body platziert wird, könnt Ihr den Tag Manager verwenden. Es können jedoch bei fortgeschrittenen Funktionen innerhalb des Tag Managers Probleme auftreten. Wir empfehlen daher immer sich grundsätzlich an Googles Vorgaben zu halten.

Der erste Teil des Codes muss demnach im Head der WordPress-Seite platziert werden.

Wie findet Ihr in WordPress den Quellcode?

Unter Design -> Theme Editor

gtm-installieren-wordpress-theme-design-header

Haltet Ausschau nach der header.php Datei. Hier findet Ihr den HEAD und BODY eures WordPress Thems. Hier müsst Ihr dann den Google Tag Manager Code innerhalb des öffnenden Heads und nach dem Body Tag öffnen.

gtm-in-wordpress-einfügen

Dann auf Datei Aktualisieren und schon habt ihr den Tag Manager hinzugefügt.

Gibt es einen Nachteil, wenn ich das Plugin direkt im Quellcode einbinde?

Ja im Spezialfall WordPress gibt es einen. Aktualisiert Ihr das Theme werden Änderungen im Theme Editor häufig überschrieben. Der Tag Manager würde also entfernt werden. Das sollte im Hinterkopf behalten werden.

Google Tag Manager per Plugin einbinden

Die andere Variante. Der Google Tag Manager kann auch einfach als Plugin eingebunden werden. Es gibt hierfür eine große Auswahl. Bei einigen müssten Ihr den Code in extra angelegte Spalten einfügen, bei anderen reicht nur die GTM-XXX-XXX ID aus.

Drei Plugins kann ich empfehlen:

1. GTM for WordPress von Thomas Geiger

Ein in den Basisfunktionen einfach einzurichtendes Plugin. Ihr benötigt hierfür nur die GTM Container ID (z.B. in der Kontoübersicht sichtbar). Das Plugin liefert aber auch wahnsinnig fortschrittliche Möglichkeiten. So können viele WordPress Daten direkt in den DataLayer gepusht werden. Das ermöglicht es zum Beispiel in Google Analytics bei Benutzern (in einem WooCommerce Shop etc.) User-ID Tracking einzuführen.

Wer aber nur die absoluten Basisfunktionen benötigt, für den ist dieses Plugin ein Overload.

https://gtm4wp.com/

2. Metronet Tag Manager

Auch wenn hier der Code (direkt) eingebaut werden muss, ist es auch ein einfach zu nutzendes Plugin. Der Vorteil für mich speziell. Wenn ich den Matomo Tag Manager und Matomo nutze, kann ich diese beiden Tools auch hier einfügen. Das geht mit dem GTM for WordPress Plugin nicht. https://de.wordpress.org/plugins/metronet-tag-manager/

3. Insert Header and Footers

Wer vielleicht noch andere Scripte in den Header, Footer oder auch Body packen möchte, für den ist dieses Plugin das richtige. Hier hast du maximale Flexibilität und Freiheit. Ich habe dieses Plugin zum Beispiel genutzt, um das Script eines Cookie Banners einzufügen. Den Google Tag Manager fügst du hier einfach im Head und Body Bereich analog zu den anderen Einbauten hinzu. https://de.wordpress.org/plugins/insert-headers-and-footers/

Google Tag Manager in Shopify, Contao, Typo3, Wix

Für die meisten CMS Systeme gibt es einfache Plugins, die ich auch empfehlen kann. Die wichtigsten habe ich hier einmal zusammengestellt. Grundsätzlich empfehle ich, dass Ihr hier oben die manuelle Implementierungsanleitung oben einmal lest. Mit diesem Wissen könnt Ihr den GTM-Code sicher auf allen Webseiten einbauen. Außerdem versteht Ihr dadurch besser, was das Plugin eigentlich macht.

Google Tag Manager – Einbau überprüfen

Du kannst den Tag Manager Einbau überprüfen über den Tag Asisstant by Google überprüfen. Das Chrome Plugin findest du hier: https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk

Nach Installation auf eure Webseite gehen, dass Plugin muss dann separat aktiviert werden. Die Seite refreshen und Ihr müsstest folgendes Fenster sehen können:

Google Tag Manager Einbau überprüfen mit GTM Tag Assistant

Ist der Smiley Grün, ist alles in Ordnung. Blau bedeutet meist, dass eine „non standard implementation“ vorliegt. In diesem Fall ist Google Analytics über den Tag Manager eingebaut. Das ist für Google eine „non standard implementation“ aber natürlich kein Problem.

Rot bedeutet, dass hier irgendetwas nicht stimmt. Ihr erhaltet weitere Informationen, wenn Ihr euch dann durchklickt.

Ihr könnt auch den Preview/ Debug Mode im Google Tag Manager aktivieren und dann eure Webseite besuchen. Unten im Browser müsste nun die Debug-Ansicht des Tag Managers geladen werden:

gtm-debug-ansicht

Wichtig: Adblocker, wie zum Beispiel Ghostery blockieren externes JavaScript häufig. Es funktioniert dann weder der Tag Assistant noch die Preview Ansicht. Hierfür müsst Ihr euren Blocker deaktivieren oder pausieren. In einigen Fällen muss dann auch noch die Seite im Tag Manager aktualisiert werden.

Mehr zum Debugging erfahrt Ihr in diesem Guide: GTM-Debugging-Guide

Erhalte exklusive Analytics Tipps, die ich nur mit E-Mail Abonnenten teile.