Tracking HTML5 Video with Google Analytics (and goodbye to Flash)

A post written by Germán Munuera on www.trucosgoogleanalytics.com and translated into English. You can find the original here.

One of the main problems encountered when trying to analyse how users use our video content is the integration of Google Analytics with Flash with the added difficulty of having to modify the ActionScript code or control the version of the code that we have in production.

These problems may increase further if your Analytics data is not what you expected and you also do not have access to the code that is currently in production.

The future offers a great opportunity to put aside these doubts and not have to integrate various technologies. To do this, we have the new revision of the HTML standard (still in development), the famous HTML5. Besides, we rid ourselves of having to learn another programming language like ActionScript.

Implementation of Google Analytics with HTML5

The knowledge of Javascript required is fairly basic and the HTML5 code is very simple.

<video controls autoplay id=”super-video” width=”250″>

	<source src="videos/video1.ogg">
		Your browser does not support the video tag
	</source>
</video>

The most important thing to note is the initialization of the events of the video player that we want to capture once it has loaded the entire page in the browser and before it is published to be visualised by the user. At that time we will add the JavaScript code that allows us to capture the events that launches the player during playback or during user interaction.

	document.addEventListener("DOMContentLoaded", init, false);
	function init(){
		var video = document.getElementById("super-video");
		video.addEventListener("play", videoPlay, false);
		video.addEventListener("pause", videoPause, false);
		video.addEventListener("ended", videoEnd, false);
	}

In each of the functions that we define (videoplay, videoPause and videoEnd) we make the _trackEvent call to Google Analytics and then we can go to our Analytics and analyze what specific content our users have made use of.

Tracking de eventos de vídeo

Example

To verify that this works correctly, I’ve implemented a small example that launches an event every time you press the Play and / or Pause button or the user reaches the end of the video.

Advantages of using videos with HTML5

  • Eliminate the integration of HTML with Flash and Google Analytics.
  • No need to learn ActionScript.
  • We can easily see what we are analysing in Analytics by taking a look at the corresponding HTML file.
  • We avoid problems of different versions of the video player on our production servers.
  • Our webs that have video content will be seen on IPADs or iPhones without any problems (remember that
    Apple has removed Flash from your devices).
  • Our site will be ready for the future and for our SEO friends, the HTML5 code will be positioned in Google much better than the current one.

Disadvantages of using HTML5

  • Currently not all browsers support HTML5.
  • The version of the HTML5 standard is not finalized and is subject to change.

You can test the code on http://trucosgoogleanalytics.com/html5/video.htm

1 comment en "Tracking HTML5 Video with Google Analytics (and goodbye to Flash)"

Leave a comment

Name
E-mail (not displayed)
Web page
Comments