video7-playerThis post is part of an on-going series on video mea­surement tips, tricks, and best practices.

HTML5 video player tech­nol­ogy is gain­ing pop­u­lar­ity because the player tech­nol­ogy is sup­ported across more browsers and devices than any other video player tech­nol­ogy. In this post, we will look at how to imple­ment video mea­sure­ment for a very sim­ple HTML5 video player.  I believe this exam­ple will pro­vide you with the most basic expla­na­tion of how to add ana­lyt­ics to your HTML5 player.

Most likely, if your video player is HTML5, it has addi­tional code libraries asso­ci­ated with it that add enhance­ments and fea­tures beyond basic HTML code. If you are using this kind of enhanced HTML5 player, then the instruc­tions within the Player Map­ping area may need to be mod­i­fied for your player.  Please check with the devel­op­ers and doc­u­men­ta­tion for the video player code you are using.

In the pre­vi­ous Flash Video Mea­sure­ment post, I men­tioned a grow­ing trend for Flash play­ers to be Hybrid play­ers, where video play­back will occur within Flash when avail­able and fall-back to using an HTML5 video player in envi­ron­ments where Flash is not avail­able.  Hybrid play­ers have a very sim­i­lar imple­men­ta­tion to this HTML5 exam­ple; how­ever, in the Player Map­ping sec­tion, a Hybrid player will rely on the JavaScript API code rather than the stan­dard HTML5 JavaScript.  Again, your video player devel­op­ers should pro­vide more doc­u­men­ta­tion describ­ing how to map the player.

As cov­ered in my basic video mea­sure­ment imple­men­ta­tion post, video track­ing is all about the player tech­nol­ogy.  The player is the uni­fy­ing point for all things video, from meta­data to play­back loca­tion, mak­ing it the ideal place to add ana­lyt­ics code.

Get­ting Started

In order to imple­ment video ana­lyt­ics for your HTML5 video player, you will need the fol­low­ing items:

Access to s_code.js file:  This solu­tion requires the addi­tion of code within the s_code.js file.

Abil­ity to add code to your site: In addi­tion to s_code changes, you may also need to add addi­tional js code to the player.

A copy of the most recent ver­sion of the Media Mod­ule mea­sure­ment library:  The Media Mod­ule JavaScript code is cur­rently avail­able through tag man­ager or from Client Care.

Mea­sure­ment Plan

I am not going to cover the mea­sure­ment plan here, but I strongly encour­age you to map out what aspects of video play­back you need to cap­ture and select the Site­Cat­a­lyst vari­ables you will use before you start mod­i­fy­ing your code.  A mea­sure­ment plan will help with imple­men­ta­tion and pro­vide doc­u­men­ta­tion into the future.

Mea­sure­ment Library

After design­ing a mea­sure­ment plan, reach out to Client Care and request the lat­est ver­sion of the Media Mod­ule JavaScript code.  The Media Mod­ule will need to be added to your s_code file below the plug-ins area.  See an exam­ple of the Media Mod­ule in this s_code.js file for the sam­ple player. If you are using Tag Man­ager, you don’t need to copy and paste the Media Mod­ule code. Instead, add the Video Track­ing com­po­nent found under Prod­uct Code > Site­Cat­a­lyst > Video Track­ing to auto­mat­i­cally add the mea­sure­ment library.

Player Map­ping

In order for the Media Mod­ule library to know when video play­back is hap­pen­ing, we need to map the HTML5 video events to the Media Mod­ule code.  There are two pieces to this, (1) adding event lis­ten­ers and (2) call­ing the Media Mod­ule func­tions when the video events occur.  View source on the sam­ple player to see the player mapping.

The W3C has defined stan­dards for video events.  More infor­ma­tion is avail­able here:  http://​www​.w3​.org/​2​0​1​0​/​0​5​/​v​i​d​e​o​/​m​e​d​i​a​e​v​e​n​t​s​.​h​tml.  In my sam­ple player I am look­ing for play, seeked, seek­ing, pause, and ended.  I have assigned my video player ele­ment on the page the id value of “movie”.  The chunk of code that looks for the video player events is the following:

video7-event-listeners

In the same block of JavaScript, I am also map­ping the player events to the Media Mod­ule func­tions.  For the start of the video, I am look­ing for the play event, and I am also check­ing the posi­tion of the player-head, to make sure the video is at the start of play­back.  I need to do this because the play event can also be called after paus­ing or scrub­bing.  I uti­lize the mediaOff­set vari­able to store the player-head posi­tion.  You may also need to per­form a sim­i­lar check for video com­plete, depend­ing on how your video player events are coded.

The basic logic goes like this: If the video play event fires, then check to see if the player-head is at 0. If it is at 0, then call the s.Media.open func­tion (which ini­ti­ates the Media Mod­ule object) and the s.Media.play func­tion (which indi­cates that the video is now play­ing).  The other video events fol­low a sim­i­lar logic of set­ting either s.Media.play or s.Media.stop, depend­ing on whether the video event indi­cates the video play­back has started or stopped.  When the video player reaches the end of the video, then we also need to send s.Media.close, which ends the Media Mod­ule object.

Seek­ing and buffer­ing func­tion­al­ity are not well sup­ported within stan­dard HTML5 play­ers at this time and will require addi­tional player cod­ing to work prop­erly.  If you are using an enhanced HTML5 player, then addi­tional seek­ing and buffer­ing events are most likely pro­vided as part of the video code.  Check your video player documentation.

video7-media-module-functions

Vari­able Mapping

Once you have your player events mapped to Media Mod­ule func­tions, the final step is to add the vari­able map­ping to the s_code file.  Fol­low your mea­sure­ment plan for proper fre­quency and vari­able usage.  In the sam­ple player I am set­ting quar­tiles and also adding two addi­tional eVars to track page name and ath­lete name for each video call.

video7-variable-mapping

A few things to note about this sam­ple code:

Enable Video Track­ing:  I rec­om­mend wrap­ping the vari­able map­ping in a true/false vari­able.  In this exam­ple I am using s.enableVideoTracking.  This allows a devel­oper to eas­ily turn on and off the video track­ing and also con­tains the vari­able map­ping within one function.

Track Vars:  Make sure to include all the vari­ables and events in the s.Media.trackVars and s.Media.trackEvents vari­ables or the vari­ables may not show up in your track­ing calls.

Auto Track:  s.Media.autoTrack is set to false because we added player spe­cific event lis­ten­ers in the player map­ping code.

Media Mon­i­tor:  Media mon­i­tor is required to set the addi­tional eVars for page name and ath­lete name.  If you are not set­ting addi­tional vari­ables, then media mon­i­tor can be left out of the code.  You can find out more about Media Mon­i­tor in the Site­Cat­a­lyst doc­u­men­ta­tion.

Val­i­da­tion

That com­pletes the imple­men­ta­tion steps.  Now sim­ply load your files into a browser and use a packet snif­fer to check the track­ing calls.  The calls you see should match the calls out­lined in your mea­sure­ment plan.

video7-packet-sniffer

2 comments
sfmi
sfmi

Hi,

I followed these steps and I'm getting the basic start and complete calls, but no milestone calls. What might I have missed?