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.