Custom JavaScript-Variablen im Google Tag Manager

Zu Beginn müssen wir eine wichtige Unterscheidung treffen: Dieser Artikel handelt von Custom JavaScript-Variablen. Es gibt auch die sehr ähnlich benannten JavaScript-Variablen im Google Tag Manager, die ebenfalls interessant sind, aber Thema eines anderen Artikels sein werden. Bis dahin kannst du in meinem Artikel über JavaScript-Variablen darüber lesen.

Was sind sie?

Custom JavaScript-Variablen sind die vielseitigsten aller Google Tag Manager-Variablentypen. Während die anderen Typen mehr zweckorientierte Vorlagen sind, hast du hier mit deinem eigenen Code völlige Freiheit.

Wie alle GTM-Variablen geben sie einen Wert zurück, den du dann in Tags oder anderen Variablen verwenden kannst. Mit deinem JavaScript-Code kannst du die Logik erstellen, die definiert, wie dieser Wert berechnet wird.

Der Typ des zurückgegebenen Wertes liegt ebenfalls bei dir; er kann jeder JavaScript-Typ wie ein String, eine Zahl, ein Array oder sogar ein HTML-Element sein.

Wie funktionieren sie?

Jede Custom JavaScript-Variable besteht aus einer Funktion, die wie folgt definiert ist:

function() {
}

Im Hintergrund wird der Google Tag Manager diese Funktion ausführen und den Rückgabewert verwenden. Wo auch immer du die Custom JavaScript-Variable wie {{myFavoriteVariable}} referenzierst, wird GTM den Rückgabewert der Funktion einfügen.

Wenn du das obige Beispiel in GTM eingibst, würdest du die Fehlermeldung erhalten:

JavaScript muss eine Funktion mit einem Rückgabewert definieren.

weil GTM gesehen hat, dass wir keine return-Anweisung im Code verwendet haben.

function() {
    return "Hello, World"
}

Dies ist nun eine gültige Funktion, die einen String zurückgibt.

Verwendung in einem Custom HTML-Tag

Stell dir vor, du hast es mit dem Namen “js.helloWorld” gespeichert. Du könntest es dann in einem Custom HTML-Tag wie folgt referenzieren:

<script>
    console.log({{js.helloWorld}})
</script>

Verwendung in einer Tag-Vorlage

Du kannst deine Custom JavaScript-Variablen auch in Tag-Vorlagen verwenden, zum Beispiel in einem GA4-Tag. Hier ist, wie du deinen Traffic 50/50 auf zwei verschiedene GA4-Datenströme aufteilen könntest:

// Gibt zufällig eine von zwei Measurement-IDs zurück
function () {
  if (Math.random() < 0.5) {
    return "G-12345667890"
  }
  else return "G-0987654321"
}

Du kannst die Variable dann in deiner Tag-Vorlage referenzieren:

Nützliche Sammlungen von Custom JS-Variablen

MixedAnalytics.com von Ana Kravitz

• Wert der nächstgelegenen Eltern-ID
• Text der nächstgelegenen spezifischen Eltern-Klasse
• Auf und ab im DOM
• Hit-Zeitstempel
• Besucher-IP-Adresse
• GA Client ID
• Liste der SKUs
• Vollständige URL

Digital Marketing Blog von Aleksandrs Pasters

• Kleinbuchstabenwert
• Einen String analysieren und ein bestimmtes Element zurückgeben
• Formularfeldwert abrufen
• Inneren Text des Elternelements abrufen
• Überprüfen, ob ein Wert nicht leer ist
• Index (Position) des angeklickten Elements zurückgeben
• Nach einem bestimmten Text auf der Seite suchen

Macro Magic For Google Tag Manager von Simo Ahava

• Client-Zeit
• Zufallszahl für Sampling
• Dateierweiterung des angeklickten Links zurückgeben
• Dateiname des angeklickten Links zurückgeben
• Überprüfen, ob angeklickter Link intern ist
• clientID mit _ga-Cookie abrufen
• clientID mit ga.getAll() abrufen
• hitCallback mit einem Universal Analytics-Tag
• URL-Pfad + Query-String zurückgeben
• Property-ID-Lookup mit Hostnamen
• Debug-Hits an verschiedene Property-ID senden
• Title-Attribut des Dokuments abrufen
• Überprüfen, ob Browser Cookies aktiviert hat
• Eine Menge nützlicher Auto-Event-Variable-Erweiterungen
• Mobiles Gerät erkennen

Closures: Funktionen, die Funktionen zurückgeben

Eine der nützlichsten Eigenschaften von JavaScript-Funktionen ist, dass sie Parameter als Eingabe nehmen können. Das bedeutet, sie können ihre Ausgabe basierend auf dem, was du eingibst, ändern. Während Custom JavaScript-Variablen Funktionen sind, können sie keine Parameter nehmen. Stell dir zum Beispiel eine einfache Funktion vor, die jede Zahl, die du ihr gibst, verdoppelt. Leider wird dies nicht funktionieren:

// js.double
function(x) {
    // Rückgabe nach Verdoppelung der Eingabe
    return x * 2
}

Du kannst jedoch eine Funktion zurückgeben, die eine andere Funktion zurückgibt. Und diese zurückgegebene Funktion kann dann Parameter nehmen. Diese Arten von Funktionen, die andere Funktionen zurückgeben, werden manchmal Closures genannt.

function() {
    var double = function(x){
        return x * 2
    }
    return double
}

Innerhalb der äußeren Funktion, die für jede Custom JavaScript-Variable erforderlich ist, definieren wir eine andere Funktion und weisen sie dem Variablennamen double zu. Dann geben wir diese benannte Funktion zurück. In einem Custom HTML-Tag könnten wir die Funktion dann wie folgt verwenden und wiederverwenden:

<script>
(function(){
    // Dies würde funktionieren, aber es wären drei einzelne Variablenauflösungen erforderlich, was für die Leistung nicht optimal ist
    console.log({{js.double}}(2));
    console.log({{js.double}}(4));
    console.log({{js.double}}(6));

    // Besser: Lokal scopen, sodass die GTM-Variable nur einmal aufgelöst werden muss
    var doubleNumber = {{js.double}};
    console.log(doubleNumber(2));
    console.log(doubleNumber(4));
    console.log(doubleNumber(6));
    
    // Erwartete Ausgabe:
    // 4
    // 8
    // 12
})()
</script>

Beispiel für wiederverwendbare Funktionen / Closures in GTM

Setzen eines Cookies

Die Syntax zum Setzen eines Cookies mit der JavaScript document.cookie API ist nicht sehr intuitiv, du benötigst dafür eine Menge Code. Anstatt diesen komplexen Code in allen Custom HTML-Tags zu duplizieren, in denen du ein Cookie setzen möchtest, macht es viel mehr Sinn, denselben Code über mehrere Tags hinweg wiederzuverwenden.

Hier ist, was du benötigst:

Die Custom JavaScript-Variable

function() {
	var setCookie = function (cookieName, cookieValue, expirationInMinutes, domain) {
		var expirationTime = expirationInMinutes * 60 * 1000;
		var date = new Date();
		var dateTimeNow = date.getTime();

		date.setTime(dateTimeNow + expirationTime);
		var expirationTime = date.toUTCString();
		document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path=/; domain="+domain;
      
	};
	return setCookie
}

Und dann kannst du deine Cookies innerhalb deiner Custom HTML-Tags wie folgt setzen:

<script>
(function(){
    var setCookie = {{js.setCookie}};
    setCookie("myCookie", "myCookieValue", 60, ".example.com")
    setCookie("myCookie2", "myCookieValue", 60, ".example.com")
    setCookie("myCookie3", "myCookieValue", 60, ".example.com")
})()
</script>