In diesem Artikel gebe ich eine kleine Einführung in JavaScript-Funktionen. Am Ende des Artikels stelle ich auch eine Sammlung verschiedener Funktionen zusammen, die für die Webanalyse von Bedeutung sind und die man mit dem Google Tag Manager ausführen lassen kann.
Was sind Funktionen in JavaScript?
Bei JavaScript-Funktionen handelt es sich um verschiedene Anweisungen, die in einem Block zusammengefasst werden. Der Funktion wird am Anfang ein Name vergeben. Im Anschluss kann man mit dem Funktionsnamen die Anweisungen mehrfach ausführen lassen. Dadurch erspart man sich das wiederholte Abtippen von gleichen und ähnlichen Anweisungen. Das gesamte Programm wird mittels Funktionen in kleinere Programmteile zerlegt, was man auch Modularisierung nennt.
Grundprinzip: function hoisting
Standardmäßig schiebt JavaScript alle Funktionsdeklarationen nach oben (function hoisting). Das bedeutet in der Programmierung, dass Funktionen im Code zuerst definiert und dann aufgerufen werden können und umgekehrt. Der JavaScript-Interpreter führt die Funktionsanweisungen erst aus, wenn die Funktion aufgerufen wird.
Syntax bei Funktionen
Schauen wir uns folgenden Code etwas näher an:
function fuehreAus (parameter1, parameter2) {
Anweisung;
Anweisung;
}
- Die Funktion wird mit function eingeleitet.
- An zweiter Stelle steht der Funktionsname, der nicht länger als 32 Zeichen sein sollte. Zudem sollten keine Leer- und Sonderzeichen benutzt werden.
- Danach folgen in runden Klammern Parameter, die man der Funktion übergeben möchte. Falls keine Parameter eingesetzt werden, bleiben die gerundeten Klammern leer.
- Zum Schluss werden die Anweisungen in geschweiften Klammern geschrieben.
Will man eine Funktion innerhalb des Google Tag Managers ausführen lassen und an verschiedenen Stellen benutzen, so muss man eine benutzerdefinierte Variable des Typs “Benutzerdefiniertes JavaScript” erstellen:
In das leere Feld wird die JS-Funktion geschrieben. Wichtig ist, dass die Funktion einen Rückgabewert liefert, da ansonsten der Wert “undefined” zurückgegeben werden kann. Dies geschieht mit dem return-Befehl. Will man sich bspw. den Wert (Klicktext) eines Buttons per benutzerdefinierter JS-Funktion holen, würde die Syntax folgendermaßen aussehen:
function() {
return document.getElementsByClassName('button')[0].value;
}
Ganz am Anfang der Anweisung sieht man den Befehl “return”, der nun den Rückgabewert der Funktion liefert.
Gut zu wissen: Innerhalb des benutzerdefinierten JavaScripts im GTM können auch integrierte oder schon vorhandene GTM-Variablen benutzt werden. Dazu setzt man die Variable in doppelt geschweiften Klammern an der notwendigen Stelle. Beispiel:
function() {
return {{Click URL}};
}
Schreibweisen
In JavaScript gibt es grundsätzlich 2 Möglichkeiten bzw. Schreibweisen Funktionen zu definieren.
Möglichkeit 1
Die erste Schreibweise haben wir oben schon gesehen:
function fuehreAus (parameter1, parameter2) {
Anweisung;
Anweisung;
}
Die genauen Erläuterungen findest du ebenfalls weiter oben.
Möglichkeit 2
Die zweite Schreibweise sieht wie folgt aus:
let fuehreAus = function (parameter1, parameter2) {
Anweisung;
Anweisung;
}
Im Vergleich zur ersten Möglichkeit wird hier zunächst eine Variable definiert. In dieser Variable wird dann die Funktion erstellt. Die Funktion selbst hat dabei keinen Namen, weshalb man hier dann von einer “anonymen Funktion” spricht.
In der Regel sind beide Schreibweise identisch. Der Vorteil der zweiten Schreibweise (Deklaration mit einer Variable) ist die Möglichkeit, die Variable zu überschreiben, um weiter unten im Code dadurch eine neue Funktion zu definieren.
Pfeil-Funktionen (Arrow Function)
Funktionen können noch kürzer als Pfeil-Funktionen deklariert werden. Heißt konkret:
let fuehreAus = (parameter1, parameter2) => {Anweisung}
Wenn es nur einen zu übergebenden Parameter gibt, können die Klammern auch weggelassen werden:
let fuehreAus = parameter1 => {Anweisung}
Parameter übergeben
Weiter oben bei der Beschreibung der Syntax von Funktionen haben wir gesehen, dass wir der Funktion in runden Klammern Parameter übergeben können. Mit Parametern kann man die Ausführung beeinflussen. Schauen wir uns das an ein paar Beispielen an.
let fuehreAus = function (parameter1) {
alert("Hallo " + parameter1);
}
fuehreAus("Welt");
Hier wird zunächst einer Funktion ein Parameter namens “parameter1” übergeben und anschließend in einem Alert zusammen mit einem String verknüpft. Die letzte Zeile des Codes führt die Funktion aus. Hier wird jedoch in runden Klammern ein Parameter mit einem Inhalt mitgegeben. Dieser Inhalt landet zunächst oben in runden Klammern und im Anschluss im Alert. Nach dem Seitenaufruf würde die Funktion “Hallo Welt” ausgeben.
Vorteil, der sich hierdurch ergibt: Nach dem man die Funktion definiert hat, kann man im Anschluss – beim Ausführen der Funktion – einen beliebigen Parameter mitgeben, der die Ausführung der Funktion beeinflusst (wie anfangs erwähnt). So könnte man weiter unten im Code mit…
fuehreAus("Mars");
…den String “Mars” als Parameter übergeben, der in unserer Funktion landet und im Anschluss “Hallo Mars” ausgibt.
Zusätzlich ist es möglich weitere Parameter zu übergeben. Diese müssen in runden Klammern durch ein Komma getrennt werden:
let fuehreAus = function (parameter1, parameter2) {
alert("Hallo " + parameter1 + parameter2);
}
fuehreAus("Welt", " und Universum");
Im Ausführungsblock müssen dann ebenfalls beide Parameter durch ein Komma getrennt mitgegeben werden. Diese landen dann oben in runden Klammern und dann in der Funktion selbst. Unser Code würde dann “Hallo Welt und Universum” ausgeben.
Default Parameter
JavaScript gibt uns auch die Möglichkeit mit Standard-Parametern zu arbeiten, deren Wert zurückgegeben wird, falls kein anderer Parameter-Wert übergeben wurde. Bei diesen Parameter spricht man vom Default Parameter. Die Syntax ist wie folgt:
let greeting = function (name = 'Unbekannter') {
console.log('Hallo ' + name + '!');
}
greeting('Max'); // Ausgabe: Hallo Max!
greeting(); // Ausgabe: Hallo Unbekannter!
Callback-Funktion
Wenn man in einer Funktion als Parameter eine andere Funktion übergibt, dann spricht man von Callback-Funktionen (Rückruffunktionen). Hier ein einfaches Beispiel:
let a = function (b) {
console.log(b);
}
let c = function () {
console.log("Ich bin c.");
}
a(c);
In diesem Fall wird Funktion a ausgeführt. Funktion c landet in Parameter b. Und b wird dann per console.log ausgegeben. Wichtig ist, dass hier Funktion c nicht ausgeführt wird, sondern nur ausgegeben. Möchte man Funktion c ausführen, so müsste man dies direkt in Funktion a machen:
let a = function (b) {
console.log(b);
b();
}
let c = function () {
console.log("Ich bin c.");
}
a(c);
Rückgabewert
Wenn ein Wert innerhalb der Funktion nicht sofort ausgegeben (z.B. mittels alert() oder console.log()), sondern nur “zwischengespeichert” werden soll, um mit dem Wert später nochmal zu arbeiten (insbesondere bei Rechnungen), dann kann man return verwenden. Beispiel:
let summe = function (a, b) {
return a + b;
}
let ergebnis = summe(1, 2);
Hier wird die Berechnung 1 + 2 ausgeführt und das Ergebnis 3 zwischengespeichert. Mit dem return wird die aktuelle Anweisung beendet. Sprich, alles was nach dem return folgt wird nicht ausgeführt. Beendet man die Funktion nicht mit einem return wird undefined zurückgegeben.
Funktionen auslagern
Werden bestimmte Funktionen immer wieder verwendet, so kann es Sinn machen diese Funktionen in eine eigene Datei auszulagern. Dadurch kann man sich selbst eine Funktionsbibliothek erschaffen. So ist bspw. auch jQuery entstanden. In der Praxis würde man also zunächst in eine eigene Datei alle Funktionen schreiben. Die Datei wird dann über den Head-Bereich direkt eingebunden, damit die Funktionen aufrufbar sind:
<script src="funktionen-bibliothek.js"></script>
Beispiele für Funktionen
Nachfolgend liste ich ein paar JavaScript-Funktionen, die in der täglichen Arbeit mit dem Google Tag Manager helfen können bestimmte Werte zu speichern und an Google Analytics für die Webanalyse zu schicken.
Lowercase
Mit der nachfolgenden Funktion wird der Return-Wert klein geschrieben. Besonders hilfreich ist der Einsatz bei den integrierten Variablen des Google Tag Managers, da man hier sonst keine Einstellungsmöglichkeiten hat. Mit folgender Anweisung wird z.B. die integrierte Variable “Video Title” klein geschrieben.
function () {
return {{Video Title}}.toLowerCase();
}
PDF-Dateinamen
Mit folgender Funktion kann man sich bei Klick auf ein PDF die angeklickte URL innerhalb einer Variable speichern (inkl. Kleinschreibung):
function() {
return {{Click URL}}.match(/([^\/]+\.pdf)/)[1].toLowerCase();
}
Title
Nachfolgende Funktion speichert den HTML-Dokument-Title in einer Variable ab (inkl. Kleinschreibung):
function() {
return document.title.toLowerCase();
}
Button-Text
Folgende Funktion holt sich den Text innerhalb eines Buttons:
function() {
return document.getElementsByClassName('button')[0].value;
}
Hash-URL
Will man die URL inkl. Hash in einer Variable abspeichern, so kann man folgende Funktion einsetzen:
function() {
return window.location.pathname + window.location.search + window.location.hash;
}
Datei-Typ
Um sich bei einer angeklickten URL den Datei-Typ zu holen, kann man folgende Funktion einsetzen:
function() {
var url = {{Click URL Path}};
return url.substr(url.lastIndexOf('.')+1);
}
Leere Variable
Mit nachfolgender Funktion kann man prüfen, ob eine Variable leer ist. Die benutzerdefinierte JavaScript-Funktion kann man wiederum als Ausnahme-Trigger konfigurieren, damit ein Tag bei einer leeren Variable nicht auslöst.
function () {
return !({{form field}} &} !== ”);
}
Text-Suche
Wenn du nach einem bestimmten Text oder Begriff innerhalb des HTML-Dokuments suchen willst, kann du folgendes einsetzen:
function () {
var content = document.body.innerText;
var query="Begriff";
if (content.search(query) > -1 ) {
return true;
} else {
return false;
}
}
