Capturing Pixel Density with Google Analytics

Google Analytics lets you see how many of your users are on mobile devices, but the information you can pull on those devices is woefully limited. One such oversight is pixel density ratio.

Andy Rossi put together a workable code snippet that uses the value of window.devicePixelRatio to determine high or normal resolution and writes that as a custom variable to Google Analtyics.

The only trouble with it is that not all browsers support devicePixelRatio consistently, IE10 being the primary culprit. The other problem is that it lumps all pixel densities above 1.5 into “high” and anything below that into “low”. We’ve been discovering that a lot of devices reporting 1.3, so we decided we wanted a more specific look at what ratios people were using.

So I decided to put together a more reliable test based on Tyson Matanich’s handy GetDevicePixelRatio script.

Just include the GetDevicePixelRatio script and the GA code on your site, then the following code should start pushing your visitor’s pixel density to Google Analytics (probably best to include in a document ready function):

// Track Device Pixel Ratio
var pixelRatio = window.getDevicePixelRatio();
_gaq.push(['_setCustomVar', 1, 'Pixel Ratio', pixelRatio, 2 ]);