Themen 1 ,Browserscope

Browserscope is a community-driven project for profiling web browsers. The goals are to foster innovation by tracking browser functionality and to be a resource for web developers.

So zumindest der Hersteller. Im Grunde geht’s darum: Ich packe mir ein kleines Script von Browserscope auf die Webseite und kann diesem dann verschiedene Parameter übergeben, die typischerweise etwa A/B-Tests sind oder Browser-Feature-Prüfungen der Benutzer meiner Webseite. Die Informationen werden dann an Browserscope übertragen und schön übersichtlich dargestellt. Super, wenn ich etwa testen will, wann ich ein Feature für alle Besucher meiner Webseite freischalten kann.

Wie funktionierts?

Sign In rechts oben mit dem Google-Account. Auf der Settings-Page steht der API-Key, auch ein neuer Test lässt sich dort anlegen.

Browserscope-Test

Das wars auch genau genommen schon. Mit folgendem Seitenaufbau können wir an den Start gehen:

<!doctype html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>  <script> 	var _bTestResults = { 	  'test_websockets': Modernizr.websockets ? 1 : 0, 	  'test_boxshadow': Modernizr.boxshadow ? 1 : 0, 	  'text_geolocation': Modernizr.geolocation ? 1 : 0, 	  'text_webgl': Modernizr.webgl, 	  'text_width': screen.width, 	  'text_height': screen.height 	}; 	 	console.log(_bTestResults);  	function afterBrowserScope() 	{ 		console.log("browserscope was called!"); 	}  	(function(document) { 	  var newScript = document.createElement('script'),               firstScript = document.getElementsByTagName('script')[0]; 	  newScript.src = 'http://www.browserscope.org/user/beacon/[test_key]?callback=afterBrowserScope&sandboxid=[sandbox_id]'; 	  firstScript.parentNode.insertBefore(newScript, firstScript); 	}(document)); 	</script>  </head> <body> 	<h1>Browserscope Test</h1> </body> </html>

Duch ersetzen von [test_key] bzw. [sandbox_id] mit euren eigenen Werten landen die Ergebnisse auch wirklich in eurem Panel. Testweise haben wir hier Modernizr und jQuery eingebunden, was aber zum reinen Betrieb von Browserscope nicht nötig ist. Wer möchte, kann seinen Benutzern – die ja gewissermaßen ohne ihr Wissen an eurem Test teilnehmen – auch direkt noch eine Auswertung auf der Seite präsentieren, das läuft per Einbindung eines Script-Tags irgendwo auf der Seite:

<script src="http://www.browserscope.org/user/tests/table/[test_key]?o=js"></script>

Sieht dann so aus:

Browserscope-Auswertung

Natürlich gibt’s noch zich Abarten, wie man diese Darstellung variieren kann, findet sich alles auf der Howto-Page von Browserscope, die ich übrigens sehr gelungen finde – kurz und knapp!

Im Backend von Browserscope selbst gibt es noch alle Ergebnisse als CSV oder JSON zum Weiterverarbeiten sowie eine schöne, tabellarische Auflistung. Wenn mans mal braucht, leistet Browserscope tolle Dienste. Wieder so ein „Macht genau das was es soll“-Tool.

JSON-Auswertung