{"id":694,"date":"2013-01-21T10:00:27","date_gmt":"2013-01-21T09:00:27","guid":{"rendered":"https:\/\/d-mueller.de\/blog\/?p=694"},"modified":"2013-01-21T21:03:03","modified_gmt":"2013-01-21T20:03:03","slug":"browserscope","status":"publish","type":"post","link":"https:\/\/d-mueller.de\/blog\/browserscope\/","title":{"rendered":"Browserscope"},"content":{"rendered":"

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.<\/p><\/blockquote>\n

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 \u00fcbergeben, die typischerweise etwa A\/B-Tests sind oder Browser-Feature-Pr\u00fcfungen der Benutzer meiner Webseite. Die Informationen werden dann an Browserscope \u00fcbertragen und sch\u00f6n \u00fcbersichtlich dargestellt. Super, wenn ich etwa testen will, wann ich ein Feature f\u00fcr alle Besucher meiner Webseite freischalten kann.<\/p>\n

Wie funktionierts?<\/h2>\n

Sign In<\/a> rechts oben mit dem Google-Account. Auf der Settings-Page<\/a> steht der API-Key, auch ein neuer Test l\u00e4sst sich dort anlegen.<\/p>\n

\"Browserscope-Test\"<\/a>

Browserscope-Test<\/p><\/div>\n

Das wars auch genau genommen schon. Mit folgendem Seitenaufbau k\u00f6nnen wir an den Start gehen:<\/p>\n

\r\n<!doctype html>\r\n<head>\r\n<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.1\/jquery.min.js"><\/script>\r\n<script src="http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/modernizr\/2.6.2\/modernizr.min.js"><\/script>\r\n\r\n<script>\r\n\tvar _bTestResults = {\r\n\t  'test_websockets': Modernizr.websockets ? 1 : 0,\r\n\t  'test_boxshadow': Modernizr.boxshadow ? 1 : 0,\r\n\t  'text_geolocation': Modernizr.geolocation ? 1 : 0,\r\n\t  'text_webgl': Modernizr.webgl,\r\n\t  'text_width': screen.width,\r\n\t  'text_height': screen.height\r\n\t};\r\n\t\r\n\tconsole.log(_bTestResults);\r\n\r\n\tfunction afterBrowserScope()\r\n\t{\r\n\t\tconsole.log("browserscope was called!");\r\n\t}\r\n\r\n\t(function(document) {\r\n\t  var newScript = document.createElement('script'),\r\n              firstScript = document.getElementsByTagName('script')[0];\r\n\t  newScript.src = 'http:\/\/www.browserscope.org\/user\/beacon\/[test_key]?callback=afterBrowserScope&sandboxid=[sandbox_id]';\r\n\t  firstScript.parentNode.insertBefore(newScript, firstScript);\r\n\t}(document));\r\n\t<\/script>\r\n\r\n<\/head>\r\n<body>\r\n\t<h1>Browserscope Test<\/h1>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Duch ersetzen von [test_key]<\/i> bzw. [sandbox_id]<\/i> 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\u00f6tig ist. Wer m\u00f6chte, kann seinen Benutzern – die ja gewisserma\u00dfen ohne ihr Wissen an eurem Test teilnehmen – auch direkt noch eine Auswertung auf der Seite pr\u00e4sentieren, das l\u00e4uft per Einbindung eines Script-Tags irgendwo auf der Seite:<\/p>\n
\r\n<script src="http:\/\/www.browserscope.org\/user\/tests\/table\/[test_key]?o=js"><\/script>\r\n<\/pre>\n
Sieht dann so aus:<\/p>\n
\"Browserscope-Auswertung\"<\/a>
Browserscope-Auswertung<\/p><\/div>\n
Nat\u00fcrlich gibt’s noch zich Abarten, wie man diese Darstellung variieren kann, findet sich alles auf der Howto-Page<\/a> von Browserscope, die ich \u00fcbrigens sehr gelungen finde – kurz und knapp!<\/p>\n
Im Backend von Browserscope selbst gibt es noch alle Ergebnisse als CSV oder JSON zum Weiterverarbeiten sowie eine sch\u00f6ne, tabellarische Auflistung. Wenn mans mal braucht, leistet Browserscope tolle Dienste. Wieder so ein „Macht genau das was es soll“-Tool.<\/p>\n
\"JSON-Auswertung\"<\/a>
JSON-Auswertung<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"
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 … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,3],"tags":[],"class_list":["post-694","post","type-post","status-publish","format-standard","hentry","category-javascript","category-webdev"],"_links":{"self":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/comments?post=694"}],"version-history":[{"count":0,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/posts\/694\/revisions"}],"wp:attachment":[{"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/media?parent=694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/categories?post=694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-mueller.de\/blog\/wp-json\/wp\/v2\/tags?post=694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}