Event-Tracking: Klicks speichern und auswerten

Events abfangen, registrieren, speichern und auswerten

Ob ein Klick per Maus, eine Eingabe per Tastatur oder eine Berührung (Touch) eines Touchscreens, in allen Fällen handelt es sich um Ereignisse und diese Ereignisse (Events) lassen sich mit Hilfe von JavaScript abfangen, registrieren, auswerten, weiterverarbeiten oder speichern. Nachfolgend zwei einfache Beispiele.

Platzhalter 1

Erstes Beispiel: Beim ersten Aufruf dieser Seite sind zwei als Platzhalter dienende Bereiche zu sehen, die bis auf den Vermerk Platzhalter noch keinen weiteren Inhalt besitzen. Beim Überfahren (nicht klicken, nur überfahren) der oberen Menüleiste sollten im Bereich des ersten Platzhalters die URL und der Linktext des gerade mit der Maus überfahrenen Links eingeblendet werden.

Platzhalter 2

Zweites Beispiel: Beim Überfahren der in der Sidebar verlinkten Kategorie-Verweise sollten im Bereich des zweiten Platzhalters der Name der jeweiligen Kategorie und eine Kurzbeschreibung der Kategorie eingeblendet werden. (Beide Beispiele sind nicht funktionsfähig, wenn JavaScript im Browser des Betrachters deaktiviert wurde.)

Übersicht Event- und Klick-Tracking:

Einzelheiten zum Abfangen und Auswerten von Events

Zum Abfangen von Events bietet JavaScript unterschiedliche Event-Handler, aus denen sich ein Programmierer den Event-Handler aussuchen kann, der für die jeweilige Aufgabenstellung am geeignetsten ist. In beiden Beispielen wurde onmouseover als Event-Handler eingesetzt. Dieser Event-Handler reagiert auf Mausbewegungen beim Überfahren eines Elements. Für onmouseover könnte jedoch ebenso gut der Event-Handler onclick zum Einsatz kommen, um alle Klick-Events in einem ausgewählten Bereich oder im gesamten Dokument abfangen, speichern und auswerten zu können. Nachfolgend ein Code-Beispiel, mit dem es möglich wäre, alle Klicks, die in der oberen Menüleiste getätigt wurden zu erfassen.

Wenn alle Klicks innerhalb eines Dokuments oder innerhalb eines ausgewählten Bereiches erfasst und für eine spätere Auswertung abgespeichert werden, kann dieses Erfassen und Auswerten als Event-Tracking oder Klick-Tracking (Click-Tracking) bezeichnet werden. Mit Hilfe des Klick-Trackings ließe sich zum Beispiel feststellen, welche Links innerhalb eines Dokumentes besonders häufig von den Besuchern einer Seite geklickt werden.
Im Unterschied zum einfachen Klick-Tracking, bei dem es nur um die Erfassung von Klick-Events geht, können durch ein erweitertes Event-Tracking zeitliche Abläufe erfasst werden. Der Unterschied liegt dabei weniger bei der clientseitigen Programmierung oder bei der Erfassung von Events, sondern mehr in der serverseitigen Auswertung der erfassten Daten. Zum Beispiel könnte die durchschnittliche Verweildauer von Usern auf einer Seite aus den gespeicherten Daten berechnet werden.

Wie bereits erwähnt, wurde im ersten Code-Beispiel die obere Menüleiste für das Tracking ausgewählt, wobei für die Auswahl die DOM-Methode getElementById() mit der ID des Bereiches der Navigation benutzt wird. Da ältere Versionen des Internet Explorers auf Events anders reagieren als andere Browser, wird eine Fallunterscheidung verwendet.

Erstes Code-Beispiel:

<script type="text/javascript">
"use strict";

var bereich = document.getElementById("site-navigation");

bereich.onclick = function (ereign) {

    var welches;

    if (window.event)           ereign  = window.event;       // ältere IE (MSEventObj)
    if (ereign.target)          welches = ereign.target;      // andere Browser
    else if (ereign.srcElement) welches = ereign.srcElement;  // ältere IE

    if (welches.nodeName.toLowerCase() == "a") {

        var speichere_att = welches.getAttribute("href");
        var speichere_val = welches.firstChild.nodeValue;
        alert(speichere_att +" - "+ speichere_val);

        /*---------------------------------------------------------------------------
         An dieser Stelle könnte die Ausgabe von alert() durch eine Funktion ersetzt
         werden, welche die in den Variablen speichere_att und speichere_val ent-
         haltenen Werte an ein PHP Script übergibt. Das PHP-Script wiederum könnte
         diese Werte daraufhin in eine Datei schreiben oder in einer Datenbank-
         Tabelle speichern. Zusätzlich wäre nur noch ein Script zur Auswertung
         erforderlich. Vor einer Speicherung sollten die Werte gefiltert werden.
         ----------------------------------------------------------------------------
        */
    }
}
</script>

Im zweiten Code-Beispiel, bei dem an Stelle von onmouseover ebenfalls onclick verwendet werden könnte, wurde, im Gegensatz zum ersten Beispiel, nicht die Schreibweise Eventhandler = Funktion verwendet. Diese Schreibweise ist zwar kürzer, könnte jedoch mit Problemen verbunden sein, wenn ein Event-Handler mehrmals innerhalb eines Dokumentes verwendet wird. So würde zum Beispiel bei mehrmaliger Verwendung von window.onload = function nur die zuletzt definierte Funktion ausgeführt. Besser ist es aus besagtem Grund, möglichen Problemen durch die Methoden addEventListener und attachEvent (für ältere IE) aus dem Wege zu gehen.

Zweites Code-Beispiel:

<script type="text/javascript">
"use strict";

var bereich = document.getElementById("categories-2");

if (window.addEventListener) {
    bereich.addEventListener("mouseover", trackeEreignis, false); // andere Browser
}
else if (window.attachEvent) {
    bereich.attachEvent("onmouseover", trackeEreignis);           // ältere IE
}

function trackeEreignis(ereign) {

    var welches;
    var dieses = document.getElementById("platzhalter-01");
    var muster = /[^a-zäöüÄÖÜß0-9&\s_-]/gi;

    if (window.event)           ereign  = window.event;       // ältere IE (MSEventObj)
    if (ereign.target)          welches = ereign.target;      // andere Browser
    else if (ereign.srcElement) welches = ereign.srcElement;  // ältere IE

    if (welches.nodeName.toLowerCase() == "a") {

        var schreibe_att = welches.getAttribute("title");
        var schreibe_val = welches.firstChild.nodeValue;
            schreibe_att = schreibe_att.replace(muster, "");
            schreibe_val = schreibe_val.replace(muster, "");

        dieses.innerHTML = "Name der Kategorie: "+ schreibe_val +"<br />"+
                           "Beschreibung: "+ schreibe_att;
    }
}
</script>

Ob ein JavaScript mit Script-Tags innerhalb eines Dokumentes eingebunden wird oder ohne Script-Tags in eine Datei mit der Endung .js ausgelagert und nur in mehreren HTML-Seiten eingebunden wird, liegt im Entscheidungsbereich eines Programmierers. Anders sieht es mit der Platzierung aus. Mit den unterschiedlichen DOM-Methoden kann erst dann auf ein Element zugegriffen werden, wenn dieses bereits im Dokumentbaum vorhanden ist, bzw. bereits durch einen Browser als Knoten in die Baumstruktur einer Webseite eingefügt wurde. Ein geeigneter Platz für ein Script, welches DOM-Methoden verwendet, läge somit im Bereich des Footers einer Webseite.

weiterlesen: Klick-Events (auf Images weiterleiten)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *