More and more websites use video to capture user’s attention; I made a system to track some of the events users do while watching video, whether they are hosted on Youtube or self hosied (.flv or .f4v formats), and to report these behaviour in the Google Analytics “Events” report section, without affecting pageviews.
My system is based on TubeLoc library and Youtube chromeless player, and overlays a self-made reconstructed Youtube interface over the video. Tubeloc is necessary because chromeless player API works in ActionScript2, while Google Analytics Flash API is written in ActionScript3; TubeLoc acts as an interface to sum all functionality. When (or better, IF and WHEN) Google will update chromeless API, TubeLoc contribute will be discontinued in this project.
Events tracked by this system:
- audio deactivation and reactivation (mute and unmute)
- Volume changes and the relative values between 0 and 100
- “Jump” to a specific video point, and its value in seconds
Player has not a STOP button, so relationship between the number of PLAY and PAUSE is an indicator for how many users don’t reach the end of video. Users who leave the page during video play are not trackable as a STOP/PAUSE. The number of users who disable the audio can give you an indication of the appreciation of the sound content, while Average Volume may be an indicator for wrong audio volume. Average value for JUMP may help you to identify a key point in your videos, a point users view with pleasure and review using the controller.
- Download videotracker.zip, at the bottom of this post, extract it (3 files and a readme.txt) and upload all files on your site. In this guide I will assume all files will be placed in the root directory.
- System automatically recognizes if user is viewing a youtube or a .flv video. The only thing you need to do is copy-and-paste this code in the page you want your video to appear, and modify it as I explain further
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="400" id="FlvGAPlayer" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="FlvGAPlayer.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="urlvideo=[URL VIDEO]&GAAccount=[GOOGLE ANALYTICS UA]" /> <embed src="FlvGAPlayer.swf" quality="high" bgcolor="#ffffff" width="400" height="400" name="FlvGAPlayer" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" FlashVars="urlvideo=[URLVIDEO]&GAAccount=[GOOGLE ANALYTICS UA]" /> </object>
You have to replace [URL VIDEO] with the complete url of youtube video or the path to your file on your server. Some working examples:
You have to replace [GOOGLE ANALYTICS UA] with User Account for the profile that will collect data; tipically this is the same UA of the GA profile for the website, but you can specify a different profile if you want to track separately only video behaviour. A real example is:
There are two replace for every parameter (total: four replace), because assuring browser compatibility needs to specify Flash variable in both object and embed tag. There are several methods to avoid this, but any developer can address the problem as he prefers.
- end of setup 🙂
I explain my tests, an identical set of actions over two video:
– on a embed youtube video I pressed Play, Pause on second 5, mute, Play, Pause on second 10, jumped to second 4 and then watched until the end. Then Play (video restarts), unmute, changed volume approx to half, then volume approx to 1/4.
– on a self hosted .flv video I pressed Play, pause on second 12, mute, play, unmute, changed volume approx to 70%.
A total of 16 events, 10 on YT video and 6 on .flv video.
On Event Tracking Overview actions over videos are collected into “VIDEO” category, so they are separated from other category events that users can do during the same session, such as download or other events. Here’s what the report CATEGORIES looked like:
In this case, obviously, columns Event value and Avg. Value are meaningless, because they are a sum between JUMP (in seconds) and VOLUME (integer 0-100). Actions report shows us a detail for every users single action, as a sum between all videos. This report helps us to generally understand actions on videos.
As you can see events number per action is exactly as expected: 5 play, 2 pause and so on… Even here columns event value and avg. are meaningless, but they acquire importance if we go deep in analysis clicking a single voice. For example, clicking on volume:
we could see a detail for single video: Darth.flv is my self hosted video file. There is only a volume change, to 59 (I said “about 70%” but in fact you can not be most precise); The other line in report is the youtube video url, and we can see that volume changed two times, for a total of 78 (“abount to half (value 50) and “abount 1/4 (value 25)) and an average change of 39.
Labels report represents the total number of event per single video, in fact it shows 10 for youtube video and six for .flv