How can I track HTML5 browser features (modernizr) using Google Analytics?

Question

I've been using Modernizr for a short while to style my site based on the user's browser functions. I've also been using Google Analytics for some time, but haven't done a whole lot with custom variables..

Basically, I'd like to combine these two features; I'd like to report to Google what features the user's browser supports. In Google analytics, I'd like to see what percentage of my users have browsers that support SVG, for instance, or have flexible box support.

How should this problem be approached? I'm aware that Google has a very limited number of Custom Variables at my disposal. If I put all of the body's final classes into a string and post it as one custom variable, will I be able to segment my data appropriately within Google?

Thanks for any ideas or insight.

Answer 1

Google analytics can be called manually in Javascript using calls such as pageTracker._trackPageview();. It's fairly simple code. See the Analytics API manual for the other function calls that are available and example code.

Modernizr sets a Javascript variable for each property it checks. It should be simple enough to write an if() block to look at that property and make different _trackPageview calls dependant on the result of the if().