Bandbreite messen und mit Piwik tracken

In meinem professionellen Umfeld gab es vor kurzem die Anforderung, die verfügbare Bandbreite eines Web-Clients zu messen und natürlich auch aufzuzeichnen bzw. vergleichbar zu machen. Natürlich lässt sich ein solcher Wert auch mittels Piwik tracken.

Zuallererst ist die Herausforderung aber, Clientseitig verfügbare Bandbreite zu messen und zwar möglichst transparent, automatisch und ohne den Einsatz zusätzlicher Software. Eine naheliegende Möglichkeit ist offensichtlich Javascript zu verwenden. Der Ablauf leuchtet auch sofort ein, es muss folgendes geschehen:

• Zeit nehmen (Startzeit)
• Test-Datei laden
• Erneut Zeit nehmen (Endzeit)
• Bandbreite aus den geladenen Bytes über der vergangenen Zeit berechnen

Javascript behandelt allerdings Ereignisse, so dass der entsprechende Code weniger imperativ abläuft.  z.B. ein Bild nachzuladen, kann folgendermaßen funktionieren[1]:

var imageAddr = "/include/test.jpg";
var download = new Image() ;
download.src = imageAddr;

Natürlich muss in dem Moment, in dem das Bild komplett übertragen ist, die Zeit genommen werden. Mittels dem onload Attributes des Image Objektes lässt sich genau das erfassen:

var imageAddr = "/include/test.jpg";
var download = new Image() ;
download.onload = function() {
// download fertig
}
download.src = imageAddr;

Mit diesem Konstrukt lässt sich alles notwendige bestimmen um die Bandbreite zu berechnen. Im Anschluss gilt es natürlich noch den Wert in Piwik aufzuzeichnen. Die Open Source Software sieht zu diesem Zweck “Custom Variables” vor [2]. Den oben berechneten Wert kann man demzufolge so auzeichnen:

[...]
piwikTracker.setCustomVariable(
  1,           // Index
  "Bandwidth", // Name der Variable
  "11.99"      // Wert der zugewiesen wird
);
piwikTracker.trackPageView();
[...]

Wenn alles zusammengesetzt ist, sieht es folgendermaßen aus:

  var imageAddr = "/include/test.jpg?n=" + Math.random();
  var startTime, endTime;
  var downloadSize = 5279624;
  var duration = 0;
  var bitsLoaded = downloadSize * 8 ;
  var speedBps, speedKbps, speedMbps;

  var download = new Image() ;
  download.onload = function() {
    endTime = (new Date()).getTime();
    duration = (endTime - startTime) / 1000;
    bitsLoaded = downloadSize * 8 ;
    speedBps = Math.round(bitsLoaded / duration) ;
    speedKbps = (speedBps / 1024).toFixed(2) ;
    speedMbps = (speedKbps / 1024).toFixed(2) ;
    result = speedMbps;
    // piwik tracker
    try {
      //ToDo: throws "a1.slice is not a function"??
      piwikTracker.setCustomVariable(1, "bandwidth", "" + result);
    } catch( err ) {
      alert(err);
    }

    try {
      piwikTracker.enableLinkTracking();
      piwikTracker.trackPageView();
    } catch( err ) {
    }
    // show page
  }
  startTime = (new Date()).getTime();
  download.src = imageAddr;

Auswertung der Daten mittels eines Piwik API Calls oder eines Plugins soll Thema eines folgenden Artikels werden.

[1] https://developer.mozilla.org/en/XUL/image

[2] http://piwik.org/docs/javascript-tracking/#toc-custom-variables