Mit dem Google Tag Manager Google Analytics einbinden

Seit kurzem beschäftige ich mich beruflich intensiver mit dem sauberen einbinden und managen von unterschiedlichen JavaScript Dateien von Drittanbietern in unterschiedlichen Seiten. Genau hierfür bietet Google den sogenannten Tag Manager an. Jeder Webentwickler/Designer kennt das Problem bei größeren Internetseiten: Es soll ein Tracking geben um den Nutzerfluss auf der Seite zu erfassen. Natürlich muss noch ein Tool für das A/B Testing eingebunden werden. Die Marketingabteilung will Affiliate Marketing betreiben, die Entwickler wollen den Server überwachen usw. usw.

Das Problem

Eine Lösung wäre es nun einfach die von den Drittanbietern gelieferten JS Schnipsel manuell einzubinden. Die Pflegbarkeit und Wartbarkeit ist dann aber denkbar schlecht. Warum sollte man z.B. das A/B Testing Tool auf allen Seiten einbinden, wenn aktuell nur eine Unterseite vertestet wird? Da müßte dann noch ein Entwickler ran und hardgecodedeten JS Code hinzufügen...und wenn die Marketingabteilung genau ein bestimmtes Element auf einer bestimmten Seite per Google Analytics erfassen will? Ginge zum Beispiel auch hardgecoded (wie hier beschrieben). Das ist zwar nett bei einer kleinen Seite an der nur eine Person arbeitet und mal schnell etwas erfassen will. Bei großen Seiten bei den verschiedenste Personen verschiedenste Sachen tracken wollen wird es aber schnell wuselig. Und am Ende hat man einen extrem unübersichtlichen Wust von nicht gepflegtem JS Code überall über eine (oder am besten noch mehrere...) Internetseite verteilt.

Wofür der Google Tag Manager da ist

Und genau hier setzt der Google Tag Manager an. Anstelle von unterschiedlichstem Code wird nur ein Code Schnipsel in die Seite eingefügt. Was nun genau an dieser erscheinen soll wird zentral über den Tag Manager gesteuert. Dazu kann bestimmt werden WAS genau WANN ausgegeben wird. Das WAS wird mit sogenannten "Tags" bestimmt. Das WANN wird durch "Regeln" bestimmt.

Ein Beispiel wäre hierfür: "Lade den Google Analytics Tracking Code (<- "Tag" - Das WAS)  sobald ein User deine Seite läd (<- "Regel" - Das WANN).

Neben den "Tags" und "Regeln" kennt der Google Tag Manager noch die "Makros". Dabei handelt es sich im Prinzip um selbst definierte Variablen. Dazu später mehr.

Google Analytics Code per Tag Manager einbinden - ein einfaches Beispiel

Als konkreten Anwendungsfall für den Google Tag Mananger ein kleines Einsteiger- Tutorial am Beispiel meines eigenen Blog´s hier. Den Google Analytics (im folgenden einfach nur noch "GA") Tracking Code einzubinden ist wohl in fast allen Fällen der erste Schritt bei der Nutzung des Tag Manangers. Um dies bewerkstelligen zu können brauchen wir:

• Ein Google Analytics Account
• Die GA ID (sieht in etwa so aus "UA-123456-12")
• Eine Website bei der wir den Google Tag Manager einbinden können

Schritt 1: Google Tag Manager Account einrichten

Da ihr mit einem GA Account auch zwangsweise ein Google Account habt, könnt ihr euch damit einfach auf der Google Tag Manager Seite freischalten lassen. Dann muss eine Seite angelegt werden. Google bietet das anlegen verschiedener Konten an, darunter können wiederum sogenannte "Container" angelegt werden. Google selber empfiehlt für jede Firma ein Konto anzulegen und für jede Seite die dieser Firma zugeordnet ist jeweils ein untergeordneten Container. In meinem konkreten Fall habe ich ein Konto mit dem Namen "Holger´s Webseiten" angelegt und darunter ein Container mit dem Namen "holgerkoenemann.de".

Schritt 2: Den Google Tag Manager Code in die eigenen Seite einbinden

Wenn ihr einen Container angelegt habt und auf diesen klickt erscheint im linken Menü der Punkt "Verwaltung -> GTM installieren". Hier findet ihr euren Tracking Code. Diesen kopieren und in eure eigenen Seite, kurz nach dem öffnenden Tag einbinden. Jetzt ist der Tag Manager auf eurer Seite verfügbar und einsatzbereit.

Schritt 3: GA Code Tag bauen

Nun muss geklärt werden WAS der Tag Manager machen soll. In unserem Fall den GA Code ausliefern. Schnappt euch also euren GA Tracking Code und klickt im Google Tag Manager auf den schönen roten "Neu" Button. Sucht "Tag" aus und gebt diesem einen klangvollen Namen. Zum Beispiel einfach "GA". Wählt dann als Tag-Type "Analytics - Universal Analytics" aus und gebt eure Tracking-ID von Google Analytics ein (die "UA-XXXXXX-XX" Nummer). Belasst den "Erfassungstyp" auf "Seitenaufruf" und speichert das Ganze.

Kleiner Einschub: Makros nutzen

Wie bereits eingangs erwähnt bietet der Google Tag Manager neben den "Tags" und "Regeln" noch die Möglichkeit "Makros" anzulegen. Das sind im Prinzip Variablen die zentral festgelegt werden und auf die man im gesamten Tag Manager dann zugreifen kann. Ein gutes Beispiel ist die Google Analytics Tracking-ID. Diese kann man, wie im oberen Absatz beschrieben, einfach platt in einem Tag hinterlegen. Aber diese Nummer wird häufiger benötigt. Und was passiert wenn sich diese ändert? Oder man den gleichen Tag erneut für eine andere Seite verwenden will? Man müßte alles händisch überwachen und anpassen. Im Tag Manager kann man dazu wieder auf den schönen roten "neu" Button klicken und ein Makro anlegen. Nennen wir es "ga_id". Geben wir diesem als Wert unser Google Analytics ID (die "UA-XXXXXX-XX" Nummer) und speichern wir das ganze. Geben wir jetzt anstelle der eigentlichen ID bei unserer Google Analytics ID das Makro an (wichtig sind die geschweiften Klammern), wird dieses Feld mit dem hinterlegten Wert für das Makro befüllt. Wenn sich jetzt etwas ändert müssen wir nur einmal den Wert des Makros anpassen.

Schritt 4: Den Tag mit einer Regel auslösen

Nun ist es an der Zeit die Regel zu definieren nachder unser neuer Tag ausgeführt wird. Dazu wieder auf den hübschen roten "Neu" Button klicken, diese Mal aber "Regel" auswählen. Da wir den GA Code immer und überall einbauen wollen geben wir ihr den Namen "Immer auf allen Seiten". Gebt als Bedingung an:

** stimmt überein mit regulärem Ausdruck .***

Mit dem regulären Ausdruck ".*" wird gesagt das das die Regel immer ausgelöst wird wenn unsere URL aufgerufen wird. Das Ganze wieder speichern und zurück zu unserem "GA" Tag.

Schritt 5: Tag und Regel miteinander verknüpfen

Klickt auf den "Tag" Tab und wählt euer frisch angelegtes Tag "GA" aus. In der rechten Spalte könnt ihr "Auslöseregeln" festlegen. Wählt "immer auf allen Seiten" aus. Wieder speichern und fertig sind wir. Im Prinzip.

Schritt 6: Änderungen online bringen

Der Google Tag Manager bietet so eine Art Versionsverwaltung an. Die gemachten Änderungen finden sich unter "Containerentwurf" in der linken Spalte wieder. Wie der Name schon vermuten läßt ist das ganze noch ein Entwurf und nicht online. Hierzu auf "Veröffentlichen" klicken und die Änderungen sollten online sein.

Schritt 7: Änderungen testen

Im konkreten Beipsiel könnte man natürlich einfach mal bei GA im Bereich "Echtzeit" vorbeischauen. Bewegt man sich über die eigenen Seite *müssten* diese Seitenaufrufe angezeigt werden. Da man mit dem Google Tag Manager weit aus mehr machen kann als bloß den GA Tracking Code einzubinden, müssen die Regeln und Tags sauber getestet und debugged werden. Am besten auch noch bevor die Änderungen Live gehen. Dazu, nachdem Änderungen gemacht wurden, diese nicht einfach online Stellen. Im Tag Manager findet sich oben rechts noch der Button "Version erstellen". Hierdurch werden die bisher gemachten Änderungen in einer Container Version gespeichert. Diese ist noch nicht online, aber sauber von anderen eventuellen Änderungen getrennt. Mit dem Button "Vorschau anzeigen" (und dann "Fehler beheben" und die aktuelle Seite auswählen) wird unsere Seite im Debug Modus geöffnet:

Am unteren Ende wird dann angezeigt welche Tags hinterlegt sind und ob und wann diese ausgelöst wurde.

Fazit

Dieses kleine Tutorial kratzt natürlich nur an der Oberfläche des Google Tag Managers und soll bei dem ein oder anderen Nutzer Interesse wecken sich näher mit dem Theme zu befassen. Grundsätzlich vereinfacht GTM die Verwaltung von Drittanbieter- Skripten auf der eigenen Seite und macht gerade dann Sinn, wenn von diesen viele eingesetzt werden. Aber auch bei einer intensiven Nutzung von Google Analytics und dem Ereignis Tracking macht GTM Sinn. Dazu vielleicht in einem Folgeartikel später mehr.