Track HTML5 Elements in Google Analytics

October 12th, 2010 Seth Meranda 4 Comments

This week, I’ve had the opportunity to attend HighEdWeb, the 2010 edition. During this conference, I’ve been excited to hear institutions are experimenting with and leveraging the new technologies available in HTML5. Whether it’s Christopher Schmitt’s presentation, casual conversations in the hall or even discussions with some of the vendors, HTML5 is on the minds of many developers.

While HTML5 promises to bring much-needed advancements to the web, it is still only in working draft-mode and has not been officially adopted as the new standard. Nonetheless, many browsers have already begun to implement these technologies. For example, the webkit browsers Safari and Chrome have geolocation. Firefox 3.6, webkit and even IE9 have support for the HTML5 video element.

However, none of the browsers support every HTML5 element. Furthermore, the matrix of which browsers support which elements is large and cumbersome. findmebyIP.com has done a great job of presenting this information, but it would be great if Google Analytics could track this for me.

Well, Google Analytics can track this for you! There are two ways to do this: 1) Report on individual browsers and version, compare to the findmebyIP.com tables specific to a particular HTML5 element, and determine if you’ve hit a threshold worthy of utilizing the technology; or 2) use my new script to track this inside Google Analytics for you!

trackHTML5inGA

Today, I’m releasing an easy-to-implement Javascript code which will utilize the powerful Modernizr HTML5 detection library to track specific elements inside Google Analytics. It’s a simple implementation:

  1. Download the latest files (available with dual BSD & MIT license, so fork away!).
  2. Make the Javascript files available on your server.
  3. Add the JS code below to your pages (preferably alongside your current GA implementation). Check out the example.html file for an, well, example.
  4. Change the “featuresToTrack” array to allow for the elements you want to track. A list of features is available in Readme.textile or on the github page.
<script type="text/javascript">
    featuresToTrack = ['video','audio', 'geolocation', 'localstorage']; // set this array with the features you want to track. **Note max character count is 55 inclusive
    (function(d, t) {
        var s=d.createElement(t),x=d.getElementsByTagName(t)[0];
        s.async=1;s.src='js/trackHTML5inGA.js';
        x.parentNode.insertBefore(s,x);
    })(document, 'script');
</script>

A few things to keep in mind with this code:

  1. This is experimental. While I have tested in FF 3.6, Chrome 6, Safari 5, IE 7 & IE 8, and everything is working correctly, individual implementations may have issues. Let me know if something goes wrong, and I’ll do my best to help.
  2. This will only work if you’re using the latest Google Analytics Asynchronous Tracking. If you’re not using Async, this script will not only fail to work, it could cause JS errors.
  3. Due to character limits in Google Analytics Custom Variables, only a few items can be tracked (total character length needs to be less than 55, inclusive of all tracked features). So pick your items strategically; though, you can always change which items you want to track at any time.
  4. Speaking of custom variables, this will be stored in slot #5 of GA. If you don’t know what this is, don’t worry. If you do, and you are using slot #5, go ahead and change the script.

Where are the Reports?

You will find these reports in your Visitor Tracking, available under Custom Variables (Visitor > Custom Variables). There will be an entry titled HTML5, and drilling-down farther you will have a list of possible combinations of tracked features based on browser support. From here, you can build Advanced Segments that will help you to better understand visitors to your site with certain HTML5 capabilities and how this trends over time (I see another post in the near future on this topic alone).

Comments, thoughts, suggestions

If you’re having a problem, or you have a better idea, drop in a comment. If you’ve found this helpful or have some examples of how you’re using it, let the community know also with a comment!

  • muc089

    Hi,

    is this tool still working?
    Cant find any variables in the backend :(.

    How can i see if i use the Asynchronous Tracking of GA?

    Thanks.
    Muci

  • http://seomektebi.blogspot.com/ SEO Mektebi

    Thank you very much for this high quality information you provide

  • http://1reklam1market.blogspot.com/ 1reklam1market

    Thank you very much for this high quality information you provide about html5

  • Pingback: Team Cooper » Should you use Flash or HTML5 for your digital marketing?


x
Heard of my Newsletter yet?
  • Higher Ed News & Trends
  • Top Posts from Higher Ed Bloggers
  • Events & Conferences
  • New Jobs

Get Karine Joly's newsletter every Wednesday - like 2,615 of your higher ed colleagues!

Not sure? Give it a try! You can unsubscribe whenever you want.