Benutzerdefinierte JavaScript Variablen in Google Tag Manager

Vorteile und Möglichkeiten von Custom JavaScript Variables

Benutzerdefinierte JavaScript Variablen

Die benutzerdefinierten Variablen (insbesondere Custom JavaScript Variables) des Google Tag Manager sind ein mächtiges Werkzeug, um Tracking-Probleme zu beseitigen. Benutzerdefinierte Variablen erfordern eine einzelne anonyme Funktion, die einen Wert zurückgibt. Custom JavaScript Variables verwenden oft andere Tag Manager-Variablen als Eingabe und geben eine modifizierte Version davon als Ausgabe zurück.

Vereinfacht ausgedrückt können Sie mit individuellen JavaScript Variablen andere Variablen nutzen, diese mit JavaScript verarbeiten oder manipulieren und in eine neue Variable umwandeln und ausgeben.

Wofür braucht man Custom JS Variables eigentlich?

Einsatzgebiete von benutzerdefinierten JavaScript Variablen

Die Einsatzgebiete von benutzerdefinierten JS Variablen fangen genau da an, wo die Möglichkeiten der „vordefinierten“ Google Tag Manager Variablen aufhören. Sie möchten beispielsweise nur den Dateinamen einer PDF Datei anstelle der Page-URL oder des Klick-Pfades an das Webanalyse Tool übergeben? Ihr E-Commerce Shop generiert alphanumerische Bestellnummern mit Umlauten, aber das Affiliate-Marketing-Netzwerk akzeptiert nur numerische Eingaben? Solche Probleme sind schnell und einfach mit benutzerdefinierten JavaScript Variablen im Tag Manager zu lösen.

Vorgehensweise in Google Tag Manager

Wie erstelle ich eine benutzerdefinierte Variable?

Zum Erstellen einer benutzerdefinierten Variable loggen Sie sich in Ihren Google Tag Manager Account ein, klicken links in der Navigation auf „Variablen“ und dann „Neu“ im Bereich „Benutzerdefinierte Variablen“.

In dem sich öffnenden Fenster kann nun ein Name verwendet werden (Wir empfehlen ein Prefix z.B. JS – Benutzerdefinierte Variable XYZ), dann einmal auf „Variable konfigurieren“ und dann rechts auf „Benutzerdefiniertes JavaScript“ klicken.

Grundsätzlicher Aufbau einer JavaScript Funktion

Aufbau einer benutzerdefinierten JS Variablen in GTM

Der Aufbau einer JS Variable ist grundsätzlich relativ einfach. Wie eingangs erwähnt, handelt es sich um eine anonyme Funktion, die zum Schluss einen Wert zurückgibt. Die Funktion in unserem Beispiel soll hier vorrangig vereinfacht den Aufbau illustrieren. Im nächsten Schritt wird diese dann mit „Leben“ gefüllt werden.

Wichtig: Im Google Tag Manager brauchen benutzerdefinierte JS Variablen nicht in <script> </script> Tags gesetzt zu werden.

Custom JS Variablen können Probleme lösen

Arbeitsweise einer benutzerdefinierten JS Variablen in GTM

Im nächsten Schritt muss diese Funktion nun – je nach Anwendungsfall bzw. zu lösendem Problem – entsprechend „befüllt“ werden. In unserem (realer Kunde) Fallbeispiel existiert das Problem, dass ein E-Commerce Shop auf der finalen Bestätigungsseite (also dort, wo ein Abverkauf getracked werden soll) eine Bestellnummer mit einem alphanumerischen Wert inklusive Umlauten anstelle eines numerischen Wertes generiert, welcher von dem Affiliate-Marketing-Netzwerk AWIN nicht akzeptiert wird. Wie so häufig stehen dem Kunden nur begrenzte Ressourcen zur Verfügung beziehungsweise ist dieser an Releasezyklen gebunden, welche mehrere Wochen in der Zukunft liegen.

Da Marketingziele aber meistens nicht flexibel sind und Umsatzziele trotz technischer Probleme erreicht werden müssen, helfen in solchen Situationen kleine „Life Hacks“ mit Google Tag Manager 🙂

Custom JS Variables im Einsatz

Beispiel - Entfernen von nicht numerischen Zeichen in einem String

Dieser Screenshot illustriert eine fertige JS Funktion mit dem Ziel, alle nicht-numerischen Zeichen in einem String (in unserem Fall die Bestellnummer) zu entfernen.

var StringInclCharacters – Wir definieren eine JavaScript Variable namens „StringInclCharacters“ für die Ausgangszeichenfolge (String)
var StringNumeric – Wir definieren eine JavaScript Variable namens „StringNumeric“, diese wird den bereinigten String enthalten.
{{tsCheckoutOrderNr}} – Hierbei handelt es sich um eine bestehende Datenschichtvariable namens „tsCheckoutOrderNr“, welche in unserem Beispiel die alphanumerische Bestellnummer beinhaltet. Diese soll „bereinigt“ werden und zum Schluss nur numerische Zeichen beinhalten.
replace – Mit „replace“ kann eine bestehende Variable manipuliert werden.
(/\D/g,“) – RegEx Anweisung, um alle nicht numerischen Zeichen zu entfernen.
return – Durch die „return“ Anweisung wird eine Variable zurückgegeben.

Weitere Nutzung der Cutom JS Variablen

Übergabe der Variablen an einen Trackinganbieter

Da benutzerdefinierte JS Variablen im Google Tag Manager „einfach“ einen Wert zurückgeben, können diese wie normale Datenschichtvariablen (DataLayers) verwendet werden. Dies bedeutet, dass – wie im Beispiel zu sehen – anstelle der ursprünglichen Variablen nun unsere benutzerdefinierte JavaScript Variable als „Bestellnummer“ übergeben. Die Übergabe an den AWIN Tracking Code ist an dieser Stelle aber nur exemplarisch, diese Info kann beliebig an alle anderen tracking Codes wie z.B. Google Ads, Bing Ads, Facebook Ads etc. übergeben werden.

Eine kleine Liste mit weiteren Variablen zur Nutzung im GTM

Nützliche benutzerdefinierte JavaScript Variablen

1

Zeichenfolge in Großbuchstaben

function() {
var StringLowerCase = "{{Zeichenfolge in Kleinbuchstaben}}";
var StringUpperCase = StringLowerCase.toUpperCase();;
return StringUpperCase;
}

2

Zeichenfolge in Kleinbuchstaben

function() {
var StringUpperCase = "{{Zeichenfolge in Großbuchstaben}}";
var StringLowerCase = StringUpperCase.toLowerCase();
return StringLowerCase;
}

3

Sonderzeichen aus Zeichenfolge entfernen

function() {
var StringInclSpecialChars = "{{Zeichenfolge mit Sonderzeichen}}";
var StringExclSpecialChars = StringInclSpecialChars.replace(/[A-Za-z0-9_]/g, '')
return StringExclSpecialChars;
}

4

Deutsche Umlaute in Zeichenfolge umwandeln

function()
{
var StringInclUmlaute = "{{Zeichenfolge mit Umlauten}}";
var LowerCaseIncUmlaute = StringInclUmlaute.toLowerCase();
LowerCaseExcUmlaute = LowerCaseIncUmlaute.replace(/ä/g, 'ae');
LowerCaseExcUmlaute = LowerCaseExcUmlaute.replace(/ö/g, 'oe');
LowerCaseExcUmlaute = LowerCaseExcUmlaute.replace(/ü/g, 'ue');
return LowerCaseExcUmlaute;
}

Sie haben Fragen zu benutzerdefinierten Variablen oder Google Tag Manager?

Bei Problemen mit Custom JavaScript Variables oder Bedarf an einer Google Tag Manager Implementierungs-Begleitung beziehungsweise einer Schulung kontaktieren Sie uns gerne!

Kontaktieren Sie uns gerne