HTML5 data attributes are made to #measure

flickr-robynlou8-4808929775

Often when writing web apps, it’s nice to report errors (or just some kind of event) to the user in a calm and unassuming manner, but at the same time flag these events to the developers in an entirely different and likely more geeky manner.

One way of doing this is simply to log the event to the server logs and move on. This is fine if you then back this up with some kind of server logs search engine, e.g. Splunk or LogLogic.

If that’s out of reach or not relevant to you, why not make use of your favorite web analytics platform. You can log anything here as an event and then leverage the richness of the reporting engine to build custom reports on your chosen event metric. This has the real advantage of easy access to historical data so you can quickly establish patterns of activity and adapt your web app as required.

But wait, didn’t I mention something about HTML5 in the title?

HTML5 introduced custom data attributes. Simply put, any attribute that starts with “data-” is treated as a storage area for private data that the end user will not see. This is a perfect place to store secret data that you wish to collect with your favorite web analytics platform.  For example, Google Analytics gives you the ability to track events (or indeed create virtual pageviews). 

Combine both of these and you have a very useful reporting mechanism. 

Take this simple HTML markup:

<div class="measure" 
  data-analytics-action="Example action for Google Analytics"  
  data-analytics-category="Example category for Google Analytics"  
  data-analytics-label="Example label for Google Analytics">
    Keep calm and carry on.
</div>

…and this simple drop of jQuery:

jQuery('.measure').each(function(){
  _gaq.push(['_trackEvent', 
    jQuery(this).attr('data-analytics-action'),
    jQuery(this).attr('data-analytics-category'), 
    jQuery(this).attr('data-analytics-label')
  ]); 		
});

When used in combination, it provides:

  • Something warm and fluffy for the end user
  • The potential for detailed reporting for your web developer

Handy if you want to add human friendly error messages to your page, but track developer-friendly error messages.

Photo credit: does it measure up? by Robynlou Kavanagh.

David is a senior developer and solutions architect at AppFusions based in Nottingham, England.

AppFusions
AppFusions solves mixed-technology integration problems. We bring engineering and business workflows together, you can work better, faster and smooter.

AppFusions is headquartered in San Francisco, California and works with enterprise vendors and partners such as IBM, Jive, Egnyte, DropBox, Box and Atlassian.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

WP-SpamFree by Pole Position Marketing