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“. gtm_trackingcodeHier findet ihr euren Tracking Code. Diesen kopieren und in eure eigenen Seite, kurz nach dem öffnenden <body> 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.
screenshot-www google com 2015-02-27 10-20-17

Kleiner Einschub: Makros nutzen

screenshot-www google com 2015-02-27 10-24-20Wie 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 {{ga_id}} 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:

{{url}} 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:

Screenshot at Feb. 26 09-58-07
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.

Bisherige Kommentare (Selber ein Kommentar hinterlassen)

  • Holger sagt:

    Wenn du den Google Analytics Tracking Code über den Tag Manager einbinden willst (was nötig ist wenn du das Event Tracking darüber machen willst): Ja. Sonst wäre er doppelt drin was zur Verfälschung der Daten führen würde.

  • Louis sagt:

    Hi,
    muss man bevor man den Google Tag Manager installiert, bei einer bereits mit Google Tracking Codes versehenen Seite, diese bzw. die bereits vorhandenen Tracking Codes zunächst entfernen?

    Gruß

  • RPS sagt:

    Servus,

    für alle WordPress-Nutzer: es gibt das „Google Analytics“ und auch das „Google Tag Manager“ Plugin.
    Beide sind kostenlos. Bin gerade in der Testphase. Ein Versuch für alle die nicht zu sehr ins Detail gehen wollen sondern nur Seitenaufrufe und ähnliche Statistiken benötigen, ist es in meinen Augen alle mal wert.

    LG

  • Holger sagt:

    Du kannst einfach mehrere GA Tags anlegen und dann über den GTM steuern.

  • Franky sagt:

    Hallo Holger,
    danke für die Anleitung.
    Hast Du vielleicht einen Tipp wie ich einen zweiten Google Analytics Code einbauen kann mit den Google Tag Manager? Es geht darum mehrere (Sub)Domains getrennt zu tracken und gleichseitig auch alle Daten gemeinsam
    in einem Konto zu haben.

    Vielen Dank und Grüße,
    Franky

  • Tom sagt:

    Wo brauchst du denn Hilfe?

  • Denis Kaiser sagt:

    Sehr gute Beschreibung der Vorgehensweise!
    Wäre toll, wenn die Hilfe noch an die neue Oberfläche des Google Tag Manager angepasst werden könnte, denn ein paar Sachen sind dort etwas anders…

    MfG

    D. Kaiser

  • Rouss sagt:

    Frage ob sie das für jemanden machen können?

  • Adam sagt:

    Tolle Anleitung! Danke


Kommentar schreiben (* Pflichtfelder)