Geschrieben von

JavaScript und Google Tag Manager: Variablen

WebDev, Webtracking

Variablen kommen in JavaScript immer dann zum Einsatz, wenn ein Wert abgespeichert werden soll. Die definierte Variable mit dem Wert dient dann als Platzhalter und kann an verschiedenen Stellen im Code wieder verwendet werden.

Aufbau von Variablen

Eine Variable hat folgende Syntax:

var hallo = alert("Hallo");

  • Mit var wird die Variable deklariert.
  • Im Anschluss folgt der Name der Variable. Dieser kann frei vergeben werden. Jedoch gibt es einige Einschränkungen, die man beachten sollte (siehe unten).
  • Mit dem “Gleich-Zeichen” erfolgt die Zuweisung.
  • Und zum Schluss kann noch der Wert, String oder auch ein Befehl geschrieben werden.

Worauf sollte bei der Benennung von Variablen geachtet werden?

  • Variablennamen müssen mit einem Buchstaben, Unterstrich oder $ beginnen. Zahlen sind am Anfang nicht erlaubt.
  • Die Benennung darf weiter aus Buchstaben, Zahlen, Unterstrich und $ bestehen. Nicht erlaubt sind Sonderzeichen wie &, %, deutsche Umlaute, etc. sowie Leerzeichen.
  • Case sensitive: Zudem sind Variablennamen Case sensitive. Ein “hallo” ist nicht gleich ein “Hallo”.
  • Der Name darf nicht gleich sein wie ein Schlüsselwort von JavaScript.
  • Der Name sollte aussagekräftig sein. Wenn man einen Vornamen speichert, dann sollte dieser auch “vorname” heißen.
  • Auch längere Namen können eingesetzt werden. Hierbei hat es sich einbürgert, dann man in camelCase-Sensitive schreibt. Der Name beginnt mit einem Kleinbuchstaben. Jeder weitere neue Name wird direkt drangehängt und mit einem Großbuchstaben geschrieben, z.B. “feldVorname”.

Was sollte bei der Zuweisung beachtet werden?
Folgende 2 Aspekte sind bei der Zuweisung von Variablen besonders wichtig:

  • Variable wird verwendet ohne deklariert worden zu sein: Wenn man einen Variablennamen in JavaScript verwendet ohne Deklaration, dann kommt es zu einem Fehler und JavaScript bricht genau an dieser Stelle den Code ab. Beispiel: alert(hallo);. Wenn hallo noch keinen Wert oder Befehl hat, kann die Anweisung nicht ausgeführt werden und JavaScript unterbricht hier.
  • Variable wird verwendet hat aber noch keinen Wert: Wenn eine Variable deklariert wurde, aber zum Zeitpunkt des Ausführens noch keinen Wert hat, dann gibt JavaScript NaN (Not a Number) zurück und liefert ein undefined aus.

var vs. let
Um den Unterschied zu verstehen, müssen wir das Thema “Scope” verstehen. Der Scope ist in JavaScript der Gültigkeitsbereich einer Variable. In JavaScript gibt es grundsätzlich 2 verschiedene Scopes:

  • Global: Hier werden Variablen außerhalb von Funktionen deklariert und sind dann überall verwendbar
  • Lokal: Hier werden Variablen innerhalb von Funktionen deklariert und sind dann nur in dieser Funktion verwendbar

Mit let kommt jedoch noch ein dritter Scope hinzu: Block-Scope. Hier werden Variablen innerhalb eines Blocks einer Funktion deklariert und sind dann nur innerhalb dieses Blocks verwendbar. Ein Block ist grob gesagt der Code, der innerhalb von geschweiften Klammern {…} steht. Funktionen, Schleifen, etc. erzeugen z.B. einen Block. Hierbei sollte man beachten, dass let im Internet Explorer ab Version 11, in Edge, Firefox und Chrome unterstützt wird.

var vs. const
Genauso wie mit var können Werte auch mit const gespeichert werden. Bei const handelt es sich um eine Konstante. Der Unterschied zu var ist, dass man bei Konstanten den Wert nachträglich nicht mehr ändern kann. Beispiel:

const autor = "Demir Jasarevic"

Variablen und window
Wird eine globale Variable deklariert, so ist sie direkt im sichtbaren Geltungsbereich. Das ist das oberste Objekt, window. Hier wird also eine Eigenschaft am obersten Objekt angelegt. Die Variable kann dann z.B. über window.variablenName ausgelesen werden. Angebundene Schnittstellen und auch Skripte können auf window zugreifen, weshalb ich am Anfang den “sichtbaren Geltungsbereich” genannt hab. Aus diesem Grund sollte man globale Variablen nach Möglichkeit vermeiden (nur wenn andere Skripte und Schnittstellen darauf zugreifen müssen). Zudem hat man bei globalen Variablen den Nachteil, dass im globalen Objekt schon viele Namen belegt sind. Mit eine globalen Deklaration können Namen überschrieben werden.

Google Tag Manager Variablen

Auch der Google Tag Manager arbeitet mit Variablen. Diese werden immer durch zwei geschweifte Klammern deklariert. Beispiel: {{meineVariable}}. Das Gute dabei ist, dass die Variable im Google Tag Manager an verschiedenen Stellen genutzt werden kann. Und falls sich der Wert der Variable einmal ändert, reicht es wenn die Änderung nur an einer Stelle – der Variable selbst – vorgenommen wird. Die Änderung überträgt sich dann automatisch an alle Stellen, wo die Variable im Einsatz ist.

Um dir die Variablen im Google Tag Manager etwas näher zu bringen, gehe ich nachfolgend auf folgende Themen ein:

  • Wo findet und wie benutzt man Variablen im Google Tag Manager?
  • Arten von Variablen im Google Tag Manager

Wo findet und wie benutzt man Variablen im Google Tag Manager?

Im Google Tag Manager erreicht man die Variablen im linken Menü unter “Variablen”:
Google Tag Manager Menü Variablen
Daneben hat man noch die Möglichkeit Variablen auch direkt innerhalb von Tags, Triggern und Variablen selbst zu wählen bzw. zu erstellen. Hier existieren verschiedene Eingabemöglichkeiten, die man beachten sollte:

  • Dropdown-Menü
  • Feld mit Baustein
  • Feld ohne Baustein

Bei Triggern begegnet man sehr oft ein Dropdown-Menü, worüber Variablen benutzt und auch erstellt werden können:
Google Tag Manager Variablen
Stoßt man auf ein Feld mit Baustein hat man zwei Möglichkeiten eine Variable zu wählen:
Google Tag Manager Variablen
Mit Klick auf den Baustein öffnet sich ein Fenster worüber man integrierte Variablen wählen oder neue Variablen erstellen kann. Alternativ kann man die Variablen auch direkt in doppelt geschweiften Klammern hineinschreiben. Das sieht dann so aus:
Google Tag Manager Variablen
Beim Abtippen der ersten 2 Klammern öffnet sich ein Vorschlagsfeld, wo man dann auch direkt eine Variable mit Mausklick wählen kann.

Stoßt man auf Felder ohne Baustein, so können an dieser Stelle keine Variablen genutzt werden:
Google Tag Manager Variablen

Darüber hinaus gibt es auch noch die Möglichkeit Variablen in benutzerdefinierten HTML- und JavaScript-Code innerhalb des Google Tag Managers zu nutzen. Dazu schreibt man an geeigneter Stelle die Variablen in doppelt geschweiften Klammern. Im nachfolgenden Beispiel wird innerhalb der Variable vom Typ “Benutzerdefiniertes JavaScript” die integrierte Variable “Video Title” in Lowercase geschrieben, da integrierte Variablen keine Einstellungsmöglichkeiten dazu direkt in den Variableneinstellungen haben:
Google Tag Manager Variablen

Arten von Variablen im Google Tag Manager

Im Google Tag Manager unterscheidet man gründlich zwischen integrierten und benutzerdefinierten Variablen. Wenn man sich im Menü-Bereich “Variablen” befindet, dann sieht man dort die 2 getrennten Bereiche für diese 2 Variablenarten.

  • Integrierte Variablen: Bei integrierten Variablen handelt es sich um Variablen, die der Google Tag Manager standardmäßig mitliefert. Dazu gehören z.B. “Page URL”, “Page Path”, etc. Diese können ohne weitere Einstellungsmöglichkeiten im Tag Manager genutzt werden. Beim Anlegen eines neuen Containers sind einige integrierte Variablen schon sichtbar. Will man weitere integrierte Variablen verwenden, so müssen diese noch aktiviert werden. Das geschieht dann im Bereich der integrierten Variablen unter “Konfigurieren”.
  • Benutzerdefinierte Variablen: Neben standardmäßig mitgelieferten integrierten Variablen hat man noch die Möglichkeit eigene Variablen zu definieren.

Integrierte Variablen
Innerhalb der integrierten Variablen unterscheidet der Google Tag Manager zwischen folgenden Typen:

  • Seiten: Hier existieren Variablen, die die aufgerufene Seite betreffen (z.B. Page URL).
  • Dienstprogramme: Werden benutzt, um auf den Umgebungsnamen oder auf eine bestimmte Container ID zuzugreifen.
  • Fehler: Mit diesen Variablen kann man JavaScript-Fehler abspeichern.
  • Klicks: Die Klick-Variablen machen es möglich auf Klicks zu reagieren und Werte wie Click Text, Click URL, etc. abzuspeichern.
  • Formulare: Hiermit kann man auf diverse Werte von Formularen zugreifen.
  • Verlauf: Diese Variablen kommen zum Einsatz, wenn ein Hash (#) bzw. Fragment in der URL abgegriffen werden soll.
  • Videos: Werte von Videos können mit diesen Variablen ausgelesen werden.
  • Scrollen: Kommt zum Einsatz, wenn man Scroll-Tracking implementieren möchte, um auszuwerten wie wie weit Nutzer auf der Seite scrollen.
  • Sichtbarkeit: Hier geht es um die Sichtbarkeit von Elementen auf einer Seite. Hiermit kann man z.B. auf Elemente reagieren, die auf der Seite erst zu einem späteren Zeitpunkt auf dem Bildschirm sichtbar sind.

Benutzerdefinierte Variablen
Innerhalb der benutzerdefinierten Variablen unterscheidet der Google Tag Manager zwischen folgenden Typen:

  • Navigation: Hier findet man die 2 Variablen “HTTP-Verweis-URL” und “URL”.
  • Seitenvariablen: Zu den Seitenvariablen gehören “Benutzerdefiniertes JavaScript”, mit dem man eigene JavaScript-Codes ausführen lassen kann. Zudem gibt es hier noch “Datenschichtvariable”, wenn man mit dem dataLayer arbeitet sowie “First-Party-Cookie”, “JavaScript-Variable” und “Wert nicht definiert”.
  • Seitenelemente: Wie der Name schon sagt, beziehen sich die Variablen unter diesem Typ auf Elemente von Seiten.
  • Dienstprogramme: Hier findet man unterschiedliche Variablen. Die 2 wichtigsten sind “Benutzerdefiniertes Ereignis” und “Google Analytics-Einstellungen”.
  • Containerdaten: Hiermit lassen sich diverse Werte des Containers ziehen.

So viel grob zu den Google Tag Manager Variablen. Einen tieferen Ausflug in die verschiedenen Variablen inkl. detaillierten Informationen werde ich gesonderten Beiträgen geben.