Track Retina/Hi-dpi visitors with a Google Analytics Custom Variable

Written by - Published on

It’s still early days for the retina/hi-dpi display but it’s pretty clear that it’s here to stay. Many designers, myself included, have begun adopting new retina techniques ready for the ever expanding range of high-resolution devices being launched.

But, you’re anything like me, you might wish to track just how many of your visitors are actually browsing your sites(s) with a retina screen. Thankfully by registering a Custom Variable within Google Analytics, you can do exactly that.

Register the Custom Variable

Using Andrew Rossi‘s JavaScript from his Gist, we can set-up our Custom Variable without even having to log into Google Analytics. Simply add the following code to a sidewide JavaScript file and customise with your unique GA account number:

var pixelRatio = (window.devicePixelRatio >= 1.5) ? "retina" : "normal";
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
_gaq.push(['_setCustomVar', 1, 'Pixel Ratio', pixelRatio, 2 ]);
_gaq.push(['_trackPageview']);
(function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

What to expect within Google Analytics

retina-tracking-analytics

Once you’ve added your JavaScript to the site, just sit back and await the data. Once you’ve got a week’s worth or so, simply log into your Google Analytics account and head over to Reporting > Audience > Custom > Custom Variables.