Der Typ 'JavaScript Variable' im Google Tag Manager

Wichtig: Dieser Artikel behandelt den Variablentyp der “JavaScript Variables”. Im GTM gibt es auch “Custom JavaScript Variables”, die verwirrenderweise nicht dasselbe sind. Wenn du nach diesen suchst, schau dir meinen Artikel über Custom JS Variables an.

Was ist eine JavaScript Variable im GTM?

Ein Screenshot der Google Tag Manager UI, der eine JavaScript-Variable mit dem globalen Variablennamen 'document.title' als Beispiel zeigt

Meistens, wenn du mit einem Entwickler über eine “JavaScript variable” sprichst, meinst du einfach jede Art von Variable.
Im Google Tag Manager bezieht sich der Begriff jedoch speziell auf eine Variable, die aus dem globalen Scope zugänglich ist. Oder kurz, du kannst sie globale Variablen nennen.

Was ist eine globale Variable? (kurze Antwort)

Eine globale Variable ist eine, die du in die JavaScript-Konsole deines Browsers eingeben kannst als

window.[Name der Variable]

und sie gibt den erwarteten Wert der Variable zurück. Nimm document.title als Beispiel. Es wird automatisch vom Browser zugewiesen und enthält den Seitentitel:

Ein Screenshot der Chrome Developer Tools mit 'window.document.title' ausgeführt

Der Google Tag Manager setzt das window. für dich voran, sodass du nur den Namen der Variablen in das Feld einfügen musst. In den meisten anderen Kontexten ist es üblich, globale Variablennamen mit dem window. Präfix zu schreiben, um klarzustellen, dass es sich um eine globale Variable handelt.

Anstelle der oben gezeigten document.title JavaScript Variable könntest du eine Custom JavaScript Variable verwenden, die so aussieht:

function () {
    return window.document.title;
}

Was ist eine globale Variable? (lange Antwort)

Lass uns herausfinden, was “global” hier eigentlich bedeutet:

<script type="text/javascript">
var name = "Kate"
setName()

function setName() {
    var name = "Jack"
    console.log("1: ", name)
}
console.log("2: ", name)
</script>

Die Variable name wird zweimal zugewiesen, zuerst auf "Kate" und dann, innerhalb der setName Funktion, auf "Jack". Wenn du die Konsole des Browsers dieser Seite anschaust, siehst du dies:

Zwei Ausgabelinien in der JavaScript-Konsole des Browsers. Die erste sagt 'Jack', die zweite 'Kate'.

Intuitiv würden beide Ausgaben "Jack" anzeigen, weil beide console.log Aufrufe nachdem die Variable auf "Jack" gesetzt wurde, erfolgen.
Das ist jedoch nicht der Fall, weil es tatsächlich zwei Variablen mit demselben Namen sind. Das ist nur möglich, weil sie in einem anderen Scope sind, dem globalen Scope und dem Scope der Funktion, also dem lokalen Scope.

Ein rotes Kästchen um den gesamten Code, das den globalen Scope visualisiert und ein gelbes Kästchen, das nur die Funktion umgibt, um den lokalen Scope zu zeigen.

Die Tatsache, dass Variablen auf einen bestimmten Scope beschränkt werden können, ist für die Entwicklung wesentlich.
Wenn dem nicht so wäre, müsste jede einzelne Variable, die irgendwo im JavaScript-Code einer Website verwendet wird, einen einzigartigen Namen haben, um Konflikte zu vermeiden, und das ist einfach unmöglich.

Wenn du deinen eigenen JavaScript-Code schreibst, z. B. als Teil eines Custom HTML Tags im GTM, stelle sicher, dass du deinen Code in einer eigenen Funktion isolierst. Auf diese Weise musst du nicht berücksichtigen, was andere mit ihren Variablen machen. Es steht sogar in meinen Google Tag Manager Richtlinien!

Häufige Beispiele für globale Variablen

Es gibt eine ganze Menge Variablen, die der Browser automatisch anbietet, zum Beispiel window.document und seine vielen Attribute:

window.document.title Gibt den Titel des Dokuments zurück
window.document.domain Gibt den Domainnamen des Servers zurück, der das Dokument geladen hat
window.document.cookie Gibt alle Cookies zurück, die über JavaScript für diese Seite verfügbar sind

Oder window.navigator, das auch interessante Dinge hat:

window.navigator.language Die Sprache, die der Benutzer in seinem Browser eingestellt hat
window.navigator.userAgent Der User-Agent-String, der den Namen des Browsers, die Version und mehr enthält
window.navigator.vendor Der Browser-Anbieter, z. B. "Google Inc." für Chrome

Spezifische globale Variablen von Anbietern

Wenn du GTM verwendest, bist du möglicherweise bereits mit einer sehr wichtigen toolspezifischen globalen Variable vertraut: window.dataLayer! Sie muss global sein, um von überall im JavaScript-Code der Seite zugänglich zu sein. Um ein Ereignis auszulösen, muss der Entwickler nur window.dataLayer.push({ event: "someEventName" }) ausführen und es funktioniert. Dieses Prinzip wird auch von vielen großen Drittanbieter-JavaScript-Bibliotheken verwendet:

fbq ist die globale Variable der JavaScript-Bibliothek von Facebook
google_tag_manager ist eine weitere globale Variable, die von und für GTM erstellt wurde
gtag existiert für Google Analytics und Google Ads
ttq die globale Variable, die von TikToks Tracking-Skripten erstellt wird