Skip to main content

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.

Inhalt der Artikelserie

  1. Google Tag Manager: DataLayer einrichten & Google Analytics ausliefern
  2. in Arbeit Event-Tracking mit dem Google-Tag-Manager und Google Analytics
  3. in Arbeit Exit-Intent-Layer mit dem Google Tag Manager umsetzen

Sponsored by ConversionBoosting

conversionboosting-logo ConversionBoosting ist die führende Plattform für erfolgreiche Conversion-Optimierung. Hunderte Unternehmen nutzen unsere Produkte, um Traffic erfolgreicher in Leads, Sales und Kontakte zu konvertieren.

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.

konto_einrichten_1

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.

konto_einrichten_2

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.

konto_einrichten_3

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.

Im affiliatetheme.io geht das ganz einfach, automatisch über das Backend. Dort findest du unter Optionen » Allgemein die Möglichkeit einen JS-Code in den Header oder Footer zu platzieren. In diesem Fall bitte in das “Header”-Feld.

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”.

gakonstante_1

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”.

gakonstante_3

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

gakonstante_4

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”.

gacode_1

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”?).

gacode_3

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.

gacode_4

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”.

gacode_5

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.

gacode_6

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

gacode_7

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

gacode_test_1

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

gacode_test_2

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.

gacode_test_3

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.

gacode_test_4


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. 🙂


Ähnliche Beiträge


Kommentare

Tom 30. September 2016 um 15:12

Cooler Artikel. Ich hab nur noch einen kleinen Tipp. Ich teste vorher nur, ob der dataLayer schon initialisiert worden ist:

window.dataLayer = window.dataLayer || [];

Zudem sollte der dataLayer später nicht neu zugewiesen werden, sonst funktioniert er nicht mehr und die Fehlersuche kann dann etwas länger dauern 🙂

Grüße

Antworten

Björn Puls 1. Oktober 2016 um 12:06

Cooler Artikel, danke dafür. Aber scheint jetzt schon veraltet zu sein 😉 Wollte gerade mal die "Anleitung" abarbeiten. Und siehe da, der Code hat sich bereits geändert. Es gibt nun 2 Codeschnipsel die man einbauen muss. Einmal im Head-Bereich das Script-Teil und nach dem Body-Tag kommt nun das Iframe. Keine Ahnung inwiefern nun das data-Layer-Teil überhaupt noch gebraucht wird.

Antworten

André 4. Oktober 2016 um 19:59

Hey Björn, danke für dein Feedback! An der Stelle verweise ich mal auf den Facebook Post, wo dein Feedback ja bereits kommentiert wurde 🙂 https://www.facebook.com/affiliatetheme.io/posts/530846380448197

Antworten

Marvin 15. Februar 2017 um 10:49

Wie schauts mittlerweile mit dem Eventtracking aus?

Antworten

André 15. Februar 2017 um 15:17

Leider nein. Auch die Artikelserie ist etwas eingeschlafen (steht auf der ToDo!). Aber Eventtracking im Theme macht, wenn man die Funktionen vom Tag Manager bedenkt, nicht so extrem viel Sinn. Denn so genial bekommen wir es nicht hin.

Antworten

Daniel 25. März 2017 um 15:24

Sehr guter Artikel. Ich freue mich schon den zweiten Teil von euch. Das mit dem Analytics Code hat sehr gut funktioniert. Bin mal gespannt was damit noch möglich ist.

Antworten

André 25. März 2017 um 20:15

Danke für die Blumen. 😉 Die Serie hängt aktuell leider ein bisschen, mal hoffen, dass wir da bald mal weiter kommen. 🙂

Antworten

Du hast eine Frage oder eine Meinung zum Artikel? Teile sie mit uns!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*
*

Choose your currency:

Close
Converted prices are for reference only - all orders are charged in € Euro (€) EUR.
  • USDUS Dollar ($)
  • EUREuro (€)
  • GBPPfund Sterling (£)
  • AUDAustralische Dollar ($)
  • BRLBrasilianischer Real (R$)
  • CADKanadischer Dollar ($)
  • CZKTschechische Krone
  • DKKDänische Krone
  • HKDHongkong Dollar ($)
  • HUFUngarischer Forint
  • ILSIsraelischer Schekel (₪)
  • JPYJapanischer Yen (¥)
  • MYRMalaysischer Ringgits
  • MXNMexikanischer Peso ($)
  • NZDNeuseeland Dollar ($)
  • NOKNorwegische Krone
  • PHPPhilipinischer Pesos
  • PLNPolnischer Zloty
  • SGDSingapur Dollar ($)
  • SEKSchwedische Krone
  • CHFSchweizer Franken
  • TWDTaiwan New Dollar
  • THBThai Baht (฿)
  • INRIndische Rupie (₹)
  • TRYTürkische Lira (₺)
  • RUBRussischer Rubel