Axels Webseite

Javascript Klasse localStats

Besucherzähler mit Javascript (ohne Cookies)

Steckbrief :: localStats

Aufrufstatistik im Localstorage des Besuchers

Typ:
Klasse
Download:
localstats_0.03.zip (3 kB)
Dokumentation:
Axels Docs (en)
Der Tracker ist eine Javascript-Klasse. Es gibt eine Methode zum Tracken und einige Methoden zum Auslesen der Daten und rendern der Tabelle. Letztere geben zurück, wieviele Seitenaufruf es gab, wann der erste Besuch war oder zeichnen die Tabelle.

Lizenz:
  • GNU GPL v3 (Opensource)

Einleitung

Auf meiner Seite ist ein Besucherzähler eingebaut, der rein am Webbrowser die Daten speichert. Dabei wird der localStorage des Browsers als Ablage verwendet es werden keine Daten zum Server übertragen (wie z.B. bei Cookies). Das in der heutigen Zeit der Daten-Sammelwut verschiedener Firmen... :-)

Unten links auf meiner Seite seht ihr den Counter - wird er mit der Maustaste berührt, seht ihr eure persönliche Statistik.

Status:

Das Javaskript ist im Beta-Stadium. Ich habe noch ein paar Ideen, die ich zur ersten Version umzusetzen gedenke.

Einbindung in die Webseite

Tracken eines Aufrufs

Um einen Seitenaufruf durch den Browser speichern zu lassen, muss man einmal die JS-Datei mit der Klasse laden. Man erzeugt eine Instanz und ruft die Methode track() auf.

  <!doctype html>
  <html>
  <head>

    (...)
    <script src="/javascript/localstats.class.js"></script>
    (...)

  </head>
  <body>
    (...)
    Seiteninhalt...
    (...)
    <script>
        var oStats=new localStats();

        // track the request
        oStats.track();
    </script>
  </body>
  </html>

Counter anzeigen

Mit der obigen Methode track() wird noch kein Counter angezeigt, sondern ausschliesslich der Seitenzähler erhöht.

Die Gesamtzahl der Aufrufe kann man mit der Methode getCountTotal() holen. Den Integer-Wert kann man in ein vorhandenes Element auf der Seite einfügen:

<p>
  Anzahl der Seitenaufrufe bisher:
  <span id="spanCounter"></span>
</p>

<script>
  var oStats=new localStats();
  document.getElementById("spanCounter").innerHTML=oStats.getCountTotal();
</script>

Anzeige der kompletten Statistik

Packen wir die Ausgabe-Möglichkeiten einmal zusammen (das ist zu 95% das, was man auf meiner Webseite als Statistik sieht):

  • Auzahl Aufrufe,
  • Anzahl unterschiedlicher Seiten,
  • Zeitpunkt des ersten Aufrufs (das ist ein Date-Objekt - das kann man noch schöner machen)
  • Tabelle Top 20 (für den Balken braucht es im CSS eine KLasse .localstatsbar)

In ein DIV mit der ID "stats" werden alle Daten reingeschrieben:

<!DOCTYPE html>
<html>
    <head>
        <title>localstats-Demo</title>
        <script src="/axel/javascript/localstats/localstats.class.js"></script>
        <style>
            .localstatsbar{background:#ace;}
        </style>
    </head>
    <body>
        <div>Demo der Statistik-Ausgabe</div>
        <div id="stats">[bitte warten ...]</div>
    <script>
        function renderStats(){
            var sHtml='';
            sHtml+='<h2>LocalStats</h2>';
            var oStats=new localStats();
            var myDate=new Date(oStats.getCountSince());

            sHtml+='Aufrufe: <strong>'+oStats.getCountTotal() + '</strong> '
                +'von <strong>'+oStats.getPageCount() 
                +'</strong> verschiedenen Seiten seit <em>' + myDate + '</em> '
                + oStats.renderTopTable(20)
                ;
            document.getElementById("stats").innerHTML=sHtml;
        }

        window.setTimeout("renderStats()", 200);

    </script>
    </body>
</html>

...