Tag-Manager-Magie für Muggel: JavaScript und CSS nutzen, ohne eine Zeile Code zu schreiben

Beitrag aus Ausgabe 80 / Oktober 2019
Maximilian Geisler

ist SEO-Berater und Google-Tag-Manager-Experte bei der SEO-/SEA-Agentur Bloofusion Germany.

Der Google Tag Manager ist ein mächtiges Tool und ein Segen für alle Webanalysten und Online-Marketing-Manager. Besonders wenn man keiner Programmiersprache mächtig ist, denn schon seine Standard-Tags heben die Analyse auf ein neues Level. Wer den GTM länger nutzt und alle Basics beherrscht, stößt aber unweigerlich auf die nächste Leistungsgrenze. Natürlich soll auch diese überwunden werden – dabei können etwas JavaScript- und CSS-Magie helfen.

Der Google Tag Manager ist ein mächtiges Tool und ein Segen für alle Webanalysten und Online-Marketing-Manager. Besonders wenn man keiner Progrmmiersprache möchtig ist, denn schon seine Standard-Tags heben die Analyse auf ein neues Level. Wer den GTM länger nutzt und alle Basics beherrscht, stößt aber unweigerlich auf die nächste Leistungsgrenze. Natürlich soll auch diese überwunden werden.

Die Custom-JavaScript-Variable

Zu erklären, wofür wir die CJS-Variable verwenden können, würde zu weit gehen. Kurz gesagt, für fast alles – „the sky is the limit“. Okay, wenn die „Ohne eine Zeile Code zu schreiben“-Prämisse bestehen bleibt, ist das Limit die Menge an nützlichem Code, die das Internet bereithält.

Wo sich die als Variable getarnte Tür nach Hogwarts verbirgt und wie sie genutzt werden kann, lässt sich aber recht schnell an einem einfachen Beispiel erklären.

Ausgangspunkt bildet der Menüpunkt „Variablen“. Hier kann die neue Custom-JavaScript-Variable angelegt werden (siehe Abbildung 1).

Der folgende simple JavaScript-Code sorgt dafür, dass wir nur den letzten Teil einer URL, in diesem Fall der Click-URL, ausgegeben bekommen (siehe Abbildung 2). Das Script kann einfach per Copy/Paste in das Textfeld eingefügt werden.

Diese Variable ist ideal für das Messen von Datei-Downloads. Statt der langen URL wird in Analytics nur der Dateiname am Ende der URL ausgegeben.

Die Click-URL stammt in diesem Fall aus der vorkonfigurierten Variable. Alle vorkonfigurierten oder selbst angelegten Variablen können genutzt werden, der Tag Manager bietet sogar ein Autocomplete mit allen zur Verfügung stehenden Variablen an, sobald „{{“ in das Textfeld eingetragen wird (siehe Abbildung 3).

 

Diese Variable kann jetzt anstelle der Click-URL für das Download-Ereignis-Tag genutzt werden (siehe Abbildung 4).

Das Prinzip dürfte jetzt klar sein. Doch woher die JavaScript-Schnipsel nehmen, wenn nicht stehlen? Ach, warum eigentlich nicht ...

Das ist alles nur geklaut

Zuerst möchte ich mich für den Ohrwurm entschuldigen, aber der Titel passt einfach zu gut in diesen Absatz. Wer die Vorteile von JavaScript für seine Arbeit mit dem Google Tag Manager nutzen möchte, ohne eine Zeile Code selbst zu verfassen, der wird in der Copy/Paste-Funktion einen treuen Verbündeten finden.

Es gibt zum Glück reichlich Quellen für nützliche JavaScripts. Da außer den Codes hier nichts wirklich kopiert werden soll und Copy/Paste im Print-Format nicht wirklich gut funktioniert, hier eine kleine Liste meiner Favoriten – mehr als 60 JavaScript-Schnipsel inklusive Erläuterungen. Ein sehr schöner Start für jeden, der mit der Nutzung von JavaScript in seinem Google Tag-Manager-Konto starten möchte: www.analyticsmania.com/post/custom-javascripts-for-google-tag-manager/

Sobald intensiver mit JavaScript gearbeitet wird, Copy/Paste nicht mehr ausreicht und es Probleme gibt, werden Stackoverflow und GitHub zum Freund und Helfer. Wenn es mal ein Problem mit einem JavaScript gibt, kann man sich fast sicher sein, dass ein Nutzer auf diesen Plattformen es auch schon hatte und es im besten Falle dort gelöst wurde: stackoverflow.com/, github.com/

Der obligatorische Simo-Ahava-Link darf hier natürlich auch nicht fehlen: www.simoahava.com/tags/custom-javascript/

Mit diesen Hilfestellungen lässt sich schon einiges an JavaScript-Magie im Tag-Manager-Konto bewirken. Wenn absehbar ist, dass der Einsatz von JavaScript für eure Analyse eine große Rolle spielt, kann ich natürlich kann nur empfehlen, grundlegende JavaScript-Kenntnisse zu erwerben. Falls ein Seminar dafür nicht infrage kommt, kann ich die w3schools empfehlen: www.w3schools.com/js/

CSS: Kleine (un-)sichtbare Helfer

Das Thema wechselt nun von ehrenwerter JavaScript-Magie hin zu einem kleinen, teilweise etwas dreckigen, aber sehr nützlichen Trick. Daher zu Beginn dieses Abschnitts eine Warnung: Wenn die Möglichkeit besteht, den DataLayer oder eine ID zu verwenden, sind das immer die besseren Optionen.

Für den Trick nutzen wir Cascading Style Sheets, kurz CSS. Eine kleine Entschuldigung im Vorfeld an jeden Programmierer, der die folgende Erklärung liest. Sehr simpel ausgedrückt: CSS sagt dem jeweiligen Element, z. B. einem Button, wie es auszusehen hat.

Der große Vorteil: Damit lässt sich so gut wie jedes Element auf der Seite messen. Der große Nachteil: Sobald sich am CSS der Seite etwas ändert, muss auch der CSS-Selector im Google Tag Manager wieder angepasst werden.

Der CSS-Selector eines Elements lässt sich am einfachsten über die Entwicklertools des jeweiligen Browsers messen. Das folgende Beispiel zeigt die Vorgehensweise in Chrome, jeder gebräuchliche Browser verfügt aber über eine ähnliche Funktion (siehe Abbildung 5).

Der CSS-Selector kann nun für verschiedene Zwecke genutzt werden, bspw. als Klick-Trigger, z. B. um den Klick auf einen Button zu messen (siehe Abbildung 6). In Kombination mit dem Elementsichtbarkeits-Trigger, wenn überprüft werden soll, ob Nutzer ein bestimmtes Element auf der Website sehen (siehe Abbildung 7). Er kann aber auch in eine Variable eingetragen werden, um den Wert des Elements in einem Tag mitzugeben (siehe Abbildung 8).

 

„Hacks, Hacks!“

Abschließend kann ich die Nutzung von JavaScript und CSS in der Arbeit mit dem Google Tag Manager nur wärmstens empfehlen. Egal, ob es bei der Copy/Paste-Variante bleibt oder fundierte Coding-Kenntnisse erworben werden – die Verwendung von JavaScript und CSS eröffnet neue Möglichkeiten, die Analyse weiter zu verfeinern, sowie Workarounds für schwierige Situationen.

 

Spannend? Dieser Artikel ist im suchradar #80 erschienen

Lesen Sie weitere spannende Artikel aus der Ausgabe „JavaScript: Der Code-Baukasten für SEO, SEA & Co.“! Entweder online oder als PDF-Magazin.

Kostenlos als PDF-Version Alle Artikel aus der Ausgabe ansehen