Google Analytics and the Retina Display

07-18-12 Andy Rossi

A quick and simple post with a helpful little script to track site visitors who have a high pixel density display — retina or otherwise.

Do you want to know how many visitors are viewing your site with a “retina” or similar high-density display? Well, do you use Google Analytics?

You do?! Excellent.

The solution is pretty simple. Here’s the gist.

// Create the test
var pixelRatio = (window.devicePixelRatio >= 1.5) ? "high" : "normal";

// Pass it along through GA
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);

// params: event method, custom variable slot, variable name, variable value, scope level
// more info:
_gaq.push(['_setCustomVar', 1, 'Pixel Ratio', pixelRatio, 2 ]);

// Then start the trackin'

(function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

You can get to this information in your Google Analytics account through the Custom Variables area. Neat, eh? It may take a while to start collecting (up to an hour), but it will eventually appear.

Thanks to @chandlervdw for coming up with the problem to solve. Also, check out Rob Tarr’s article on Google Analytics and the resize event.

Related Content

Check out the 2022 Design Systems Survey!

Over 200 web professionals responded with their design system experiences. Let's learn from this year's findings.

More Details