Bei der täglichen Arbeit mit Tracking, Google Tag Manager und Co. kommt man um JavaScript nicht drum herum. Eine Funktion bzw. Anweisung, die besonders wichtig ist, sind Eventhandler.

Was sind Eventhandler?

Eventhandler sind in JavaScript Anweisungen, die beim Eintreten eines Events ausgeführt werden. Mit Events sind wiederum bestimmte Ereignisse gemeint, die im Browser auftreten. Z.B. sind Mausbewegungen, Scrollen oder das Klicken auf Elemente und Links alles Ereignisse. Um solche Events zu erkennen und darauf Funktionen ausführen zu können bzw. darauf zu reagieren werden Eventhandler benötigt. Einen Eventhandler kann man dabei in 2 grobe Teile aufteilen:

• Auslöser: Es gibt verschiedene Möglichkeiten, wann eine Funktion ausgelöst werden soll: Bei Klick, Mausbewegungen, etc. (mehr dazu unter “Verschiedene Eventhandler” weiter unten).
• Funktion: Nachdem der Auslöser getätigt worden ist, wird die definierte Funktion ausgeführt.

Noch ein paar Randinformationen zu Eventhandlern:

• Eventhandler werden auch als Eventlistener bezeichnet
• Wenn ein Event ausgelöst wird, dann sagt man auch “ein Event wird gefeuert” (daher hat man im Debug-Modus des GTMs die 2 Bereiche “Tags Fired On This Page” und “Tags Not Fired On This Page”)

Verschiedene Eventhandler

In JavaScript gibt es verschiedene Eventhandler, die unterschiedliche Funktionen aufrufen. Nachfolgend eine Auflistung der Gängigsten und auch Wichtigsten bei der täglichen Arbeit mit dem Google Tag Manager:

Eine Liste weiterer Events kannst du hier finden: https://www.w3schools.com/jsref/dom_obj_event.asp.

Event auslösen: 3 Techniken

Um ein Event für ein Element auszulösen stellt JavaScript 3 Techniken bereit:

• Mittels HTML-Attribut
• Als Funktion
• Mit addEventListener()

Mittels HTML-Attribut
Es besteht die Möglichkeit, dass man innerhalb von HTML-Tags wie “a”, “button”, etc. das HTML-Attribut “onclick” hinzufügt, um eine Funktion auszuführen. Die Syntax sieht dabei folgendermaßen aus:

<a href="" onclick="macheEtwas();">

Dadurch könnte man bspw. auch einen dataLayer-Push registrieren:

<a href="#" onclick="dataLayer.push({'event': 'GAEvent'});">Link</a>

Im Array könnte man natürlich noch Event-Kategorie, -Action und -Label mitaufnehmen, um so Daten in den dataLayer zu bekommen. Jedoch sollte man bei dieser Technik einige Punkte beachten:

• Nachteil: Keine Trennung von Struktur und Funktion. Ähnlich wie man CSS und HTML trennen sollte, ist zu empfehlen das JS ebenfalls von HTML sauber zu trennen.
• Nachteil: HTML-Markup wird schnell unübersichtlich.
• Nachteil: Der Eventhandler lässt sich nicht mehr deaktivieren.
• Vorteil: Die Funktion kann schon beim Laden des Elements ausgeführt werden.

Als Funktion
Das Ereignis, welches ausgeführt werden soll, kann auch in einer Funktion sitzen. Dies würde dann bspw. so aussehen:

document.querySelector('#nameID').onclick = macheEtwas;
function macheEtwas() {
// Hier kommt die Funktion rein
}

Folgende Vor- und Nachteile hat diese Technik:

• Vorteil: Sauberes Markup durch Trennung von Struktur und Funktion.
• Vorteil: Man kann den Eventhandler durch “element.onclick = null” wieder entfernen.
• Vorteil: Unterstützt Event-Bubbling.
• Nachteil: Keine Unterstützung von Event-Capturing.
• Nachteil: Funktion kann erst aufgerufen werden, wenn das Element im HTML geladen wurde.

Mit addEventListener()
addEventListener() funktioniert ähnlich wie die genannte Variante mit der Funktion, ist jedoch flexibler. Dies würde dann bspw. so aussehen:

var form = document.getElementById('formID');
form.addEventListener ('submit', macheEtwas , false);
function macheEtwas () {
// Hier kommt die Funktion rein
}


Mit der folgenden, verkürzten Schreibweise würde dies ebenfalls funtionieren:

document.getElementById('formID').addEventListener ('submit', function () {
// Hier kommt die Funktion rein
}, false);


Folgende Vor- und Nachteile hat diese Technik:

• Vorteil: Sauberes Markup durch Trennung von Struktur und Funktion.
• Vorteil: Für ein Element können mehrere Handler-Funktionen für denselben Ereignistyp registriert werden.
• Vorteil: Mit addEventListener() registrierte Events lassen sich auch wieder mit removeEventListener() entfernen.
• Vorteil: Unterstützt Event-Bubbling und -Capturing.
• Nachteil: Damit addEventListener() die Elemente finden kann, muss es entweder am Ende der Seite geladen werden oder man setzt das onload-Event vorher ein, um sicherzustellen, dass die komplette Seite geladen worden ist und dadurch addEventListener() im Anschluss auf die Elemente zugreifen kann.

Bei addEventListener () muss man zudem beachten, dass die Technik im IE ab Version 9, in Edge, Chrome, Safari und Firefox funktioniert. Für IE unter Version 9 (einschließlich Version 8) muss man mit attachEvent() arbeiten.

Event-Objekt

Wird ein Event ausgelöst, steht ein Event-Objekt zur Verfügung. Dort sind weitere wichtige Informationen zum ausgelösten Event gespeichert. Bspw. kann dort bei onkeydown die gedrückte Taste herausgefunden werden.

Um darauf zuzugreifen, muss der Funktion ein Parameter für das Event-Objekt mitgegeben werden. Den Namen kann man frei wählen, meist wird einfach event als Name benutzt. Im Code sieht das folgendermaßen aus:

function macheEtwas(event) {
console.log(event.type);
}


Fast alle Browser unterstützen diese Methode. Bei den Internet Explorern unter Version 9 muss man hingegen über window.event darauf zugreifen.