HTML5 and Analytics

/

HTML5 is the next generation of HTML, the markup language that the web is written in. Its features are slowly being adopted by browsers), and there are a few that have some ramifications for analytics.

<video> tag

Embedding video in your site these days usually involves a Flash-based player of some kind. Often this is an easily embeddable player from a site like YouTube or Vimeo. But what if you want to track when your visitors click the play button, or whether they watch the video all the way to the end?

Well, it’s certainly possible. Google Analytics offers Flash tracking, for example. So you have to take the video file, wrap it in a Flash-based player of your own devising (or maybe an open-source one like FlowPlayer), and implement some Event Tracking, for example. As you can imagine, even at its easiest, this is a lot more difficult than just pasting some code from YouTube to embed a video.

HTML5 offers a <video> tag, much like the familiar <img> tag. (There’s also an <audio> tag.) Instead of relying on a Flash-based player, it uses browser plugins to support native video files. And best of all, it supports a variety of events. You might be familiar with the “onclick” event attribute, for example. For a video, there are event attributes such as “onplay” and “onended”, so we can employ pretty simple JavaScript to track these events. No more Flash, just standards-based HTML and JavaScript.

Browsers are already starting to support the <video> tag, but not all of them are there yet. Over time support will become more widespread and tracking this sort of thing will be much easier.

rel=noreferrer

While the <video> tag represents a way that HTML5 can potentially make analytics easier, the second issue I want to cover potentially makes it more difficult.

We’re all familiar with links; they’re the currency of the web, after all. A link looks like this:

In addition to the href attribute (which tells you where the link goes), there’s an optional attribute called rel, which tells you how the linked page is related to the page the link is on. There are a variety of possible values, but HTML5 introduces a new value that’s of special interest for analytics.

rel=noreferrer tells the link not to pass referrer information along to the destination page. So, for example, if a link from example.com went to your site, you would usually see “example.com / referral” as a source and medium in Google Analytics. However, if example.com used the rel=noreferrer attribute on the link, you wouldn’t get any referral information and the link would be counted as “direct / (none)”.

Is this a big deal? rel=noreferrer is really intended to protect private resources. For example, suppose the link was in someone’s gMail, or in an internal wiki, or something like that. There’s the possibility that passing along the URL where the link came from could reveal some private information or present a security risk, which is why rel=noreferrer was introduced. It does present a potential problem for accuracy in analytics, especially if it is used for reasons other than its intended purposes. But let’s remember that (1) analytics are never perfect, and (2) we should have a healthy respect for the privacy choices that people make on the web.

In any case, no browsers yet support rel=noreferrer, but you can expect it to emerge eventually and you should be aware of it.

Jonathan Weber is our Data Evangelist, focusing on bringing the strategic value of data analysis to our customers. He spreads the principles of analytics through our training seminars and is currently writing a book on Google Analytics & Tag Manager. Before he caught the analytics bug, he worked in information architecture. Away from the computer you can find him as a flower farmer and plant geek.

  • http://libcom.org/user/76329 webinars unleashed

    Just subscribed to your feeds. Thanks for posting informative articles.

  • http://www.eBizROI.com Rick Noel

    Nice post Jonathan. If I understand the post correctly, it appears that you have to integrate the Google Analytics code into your flash player to track events like play, pause, stop, etc. html5 offers some other tracking capabilities. My client has 77 instances of html5 audio tags with a flash fall back mechanism to support playback of audio samples non-compliant html5 browsers. She would like to be able to track playbacks of her samples regardless of technology used to playback audio. I am looking for a way to use Google Analytics to track events whether they are html5 or flash supported. Do you know of any good resources that would have examples on how this is implemented? Thanks for sharing.

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.