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

One thought on “Bandbreite messen und mit Piwik tracken”

Leave a Reply

Your email address will not be published. Required fields are marked *