Einrichten des GoogleTagManagers

Avatar Datum: 26. August 2014
Autor: Philip Dumas


Zum Hintergrund: seit kurzem verwenden wir den GoogleTagManager(GTM) bei den Hörnerdörfern. Ziel ist es die diversen Analytics Accounts die hier verwendet werden (Bolsterlang, Fischen etc.) unter einen Hut zu bringen. Hierzu kann man im Tagmanager Profil Regeln und Tags erstellen, anhand derer das Tracking dann ausgeführt wird (dazu später mehr).

Ermöglicht  wird das Ganze über Einbindung eines GTM-Containers im Code, der den sehr ähnlichen GA-Code ersetzt. Der Container sorgt dafür, dass das ‚gmt.js‘ eingebunden wird, welches dafür sorgt, dass die konfigurierten Tags und Regeln vom Browser erkannt werden.

Das Zusammenspiel von Tags und Regeln ist denkbar simpel: solange die Regeln eingehalten werden, werden entsprechend Tags eingebunden, oder eben nicht. Als Tags werden in unserem Fall Google Analytics Ids hinterlegt (Wichtig: Beim anlegen im Tag Manager daran denken unter „weitere Einstellungen->Grundkonfiguration“ das Häkchen bei „IP-Adresse anonymisieren“ zu setzen).

Damit die tags dann auch da ausgespielt werden wo sie sollen, müssen Regeln definiert werden. z.B. soll bei den Hörnerdörfern der Tag der das GA-Tracking für „www.fischen.de“  enthält natürlich nur unter den Seiten ausgespielt werden die auch zu fischen gehören. Um das zu erreichen hinterlegen wir Regeln nach folgendem Schema: „URL enthält ‚://www.fischen.de‘ „. Alles was wir hierfür tun müssen, ist eine Neue Regel zu erstellen, im Dropdown „URL“ und „enthält“ auszuwählen und dann die Regel dem entsprechendem Tag zuweisen.

Um das Ganze zu testen müssen wir unseren googleTag jetzt noch veröffentlichen, dann kann man im Chrome beim Aufruf der gewünschten Seite(aktualisieren mit strg +F5) mit den Developertools (öffnen mit F12) zu Sources navigieren, wo nun „www.googletagmanager.com“ zur Auswahl stehen sollte. Darunter liegt das gmt.js, das alle Informationen enthalten sollte, die wir soeben angelegt haben (Regeln und Tags), wenn nicht haben wir was falsch gemacht. Interessierte können sich also das gmt.js kopieren und der Übersicht halber z.B. in notepad++ einfügen. Dort dann einfach nach der Analytics Id suchen, so kommt man zu den Regeln und Tags. (es treten hier alle GA-Ids auf die mit dem Account verknüpft sind, allerdings sorgen die hinterlegten Regeln dafür, dass immer nur die Erwünschten ausgelesen werden).

 

 

Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Open Graph Meta Tags & facebook for developers

Autor: Steven Schöning


Technologie


Ich hatte vor kurzem das Problem, dass trotz dem hinterlegten Bild im og:image Tag ein anderes Bild ausgespielt wurde, denn es wurde das erste Bild im HTML Quelltext beim teilen über Facebook ausgegeben. Hier konnte ich bei „facebook for developers“ einige Informationen zu dem Thema finden, indem ich im Sharing Debugger und im Object Debugger …


Beitrag lesen
15.
Juni
2017

video.js – HTML5-Video-Kmponente mit Polyfill für alte Browser

Autor: Stefan Oswald


Projekte // Technologie // User Experience & Design


Webseite: http://www.videojs.com/ Ich habe es mir noch nicht im Detail angeschaut, aber rein von der Beschreibung her könnte das für uns mal ganz nützlich sein. Man kann per API auch Loader für eigene Video-Provider umsetzen. Kostenlos einsetzbar dank Apache 2.0 Lizenz.


Beitrag lesen
14.
Mai
2013

Google Maps und der Wikipedia-Layer

Autor: Benjamin Hofmann


Technologie


Seit dem Release von Google Maps v3 gab es keinen Wikipedia-Layer mehr, den man einfach so einblenden konnte. Laut diesem Issue bei Google wird das auch nicht mehr passieren, da der Layer zu wenig genutzt wird und der Aufwand für die Integration in keiner Relation zum Nutzen steht. Jedoch wurde dort eine API von einem …


Beitrag lesen
17.
Juli
2012

JavaScript, HTML5 & Angular Days 2016

Autor: Benedikt Keller


Technologie // Über den Tellerrand // User Experience & Design


Einige von uns Portalentwicklern waren im Oktober in Berlin auf den JavaScript, HTML5 & Angular Days 2016. Hier nachträglich noch kurz meine und Bennis Highlights: „Dem Benedikt seine Highlights“ CSS3 Flexbox Der Style „display: flex;“ ist ein unglaublich flexibles und simples Werkzeug, um Responsivität in die kleinsten Module zu bringen. Wo wir heute noch mit Style-Hacks arbeiten, …


Beitrag lesen
28.
Nov.
2016