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.


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 went to your site, you would usually see “ / referral” as a source and medium in Google Analytics. However, if 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 even wrote 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.

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

  • 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.

Follow Us



We'll get back to you
in ONE business day.
Our Locations
THE FOUNDRY [map] LunaMetrics

24 S. 18th Street
Suite 100

Pittsburgh, PA 15203


4115 N. Ravenswood
Suite 101
Chicago, IL 60613


2100 Manchester Rd.
Building C, Suite 1750
Wheaton, IL 60187