tracking html5/css3 support with analytics and modernizr
You may think that html5 and css3 is going to become widespread in something akin to a geologic time scale. The truth is that many html5 and css3 features have currently widespread support.
Below, there is an small snippet to track the browser support for these advanced features for your user base, using google analytics and modernizr.
Modernizr is a small footprint javascript library that let you test the support of html5 and css3 features. With the combination of modernizr and analytics custom vars, we can track which percent of our users support a particular html5 or css3 feature.
So suppose we want to know the user base support for: sessionstorage, localstorage, canvas, fonfaces and borderradius.
Our analytics tracking code would look like:
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ?
"https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost +
"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript" src="/media/js/modernizr-1.1.min.js"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-YYYYY-X");
pageTracker._setCustomVar(1, "sessionstorage", Modernizr.sessionstorage , 2 );
pageTracker._setCustomVar(2, "localstorage", Modernizr.localstorage, 2 );
pageTracker._setCustomVar(3, "fontface", Modernizr.fontface, 2 );
pageTracker._setCustomVar(4, "canvas", Modernizr.canvas, 2 );
pageTracker._setCustomVar(5, "borderradius", Modernizr.borderradius, 2 );
pageTracker._trackPageview();
} catch(err) {}</script>
After you append this to your site html body the results are going to appear on analytics under “visitors > custom variables”
Using a similar snippet we found that at www.wegif.com more than 80% of our users support all these features. Cool right?
For more info about how all this works, continue reading at:
http://code.google.com/intl/en/apis/analytics/docs/tracking/gaTrackingCustomVariables.html
