Screen Resolution ≠ Browser Window – Dovada

Zilele trecute, după ce am citit articolul lui Chris Coyier despre cât de inexacte sunt statisticile referitoare la dimensiunile browserului vs rezoluția ecranului, am zis că se poate face ceva și fără baze de date custom și alte minuni de genul ăsta, mai ales dacă folosești Google Analytics.

Plecând de la premisa că folosim codul nou (cel asincron), modificările aduse sunt următoarele:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
// de aici incepe codul nou
var windowSize = [0,0];
if( typeof( window.innerWidth ) == 'number' ) {
	windowSize = [ window.innerWidth, window.innerHeight ];
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
	windowSize = [ document.documentElement.clientWidth, document.documentElement.clientHeight ];
}
_gaq.push([ '_trackEvent', 'Rezolutie', 'Window VS Screen', windowSize[0] + ' x ' + windowSize[1] + ' vs ' + screen.width + ' x ' + screen.height ]);

Tot ce trebuie să faci este să intri în contul GA->Content->Event Tracking->Actions->Window vs Screen (sau Content->Events->Top Event->Rezolutie în interfața nouă) după cel puțin 24h și să-ți admiri statisticile. :)

Notă importantă!

  1. Toată șmecheria asta va face ca Google Analytics să nu afișeze corect bounce rate. Încă nu știu dacă e o un bug sau un feature, dar cert este că există în documentația oficială.

Un comentariu to “Screen Resolution ≠ Browser Window – Dovada”

  1. Și dacă utilizatorul face resize / maximize la browser după ce încarcă pagina?…
    Ca să ai o evidență cât mai bună cred că ar trebui extins puțin scriptul astfel încât să reții asignezi windowSize unei variabile globale, să compari într-un setInterval rezoluția curentă cu cea memorată și să faci _trackEvent și o nouă asignare atunci când ele diferă.

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>