HTML5 Video Measurement

http://blogs.adobe.com/digitalmarketing/wp-content/uploads/2013/03/video7-player.jpg
This post is part of an on-going series on video mea­surement tips, tricks, and best practices.

HTML5 video player technology is gaining popularity because the player technology is supported across more browsers and devices than any other video player technology. In this post, we will look at how to implement video measurement for a very simple HTML5 video player. I believe this example will provide you with the most basic explanation of how to add analytics to your HTML5 player.

Most likely, if your video player is HTML5, it has additional code libraries associated with it that add enhancements and features beyond basic HTML code. If you are using this kind of enhanced HTML5 player, then the instructions within the Player Mapping area may need to be modified for your player. Please check with the developers and documentation for the video player code you are using.

In the previous Flash Video Measurement post, I mentioned a growing trend for Flash players to be Hybrid players, where video playback will occur within Flash when available and fall-back to using an HTML5 video player in environments where Flash is not available. Hybrid players have a very similar implementation to this HTML5 example; however, in the Player Mapping section, a Hybrid player will rely on the JavaScript API code rather than the standard HTML5 JavaScript. Again, your video player developers should provide more documentation describing how to map the player.

As covered in my basic video measurement implementation post, video tracking is all about the player technology. The player is the unifying point for all things video, from metadata to playback location, making it the ideal place to add analytics code.

Getting Started

In order to implement video analytics for your HTML5 video player, you will need the following items:

_Access to s_code.js file: _This solution requires the addition of code within the s_code.js file.

Ability to add code to your site: In addition to s_code changes, you may also need to add additional js code to the player.

A copy of t_he most recent version of the Media Module measurement library:_ The Media Module JavaScript code is currently available through tag manager or from Client Care.

Measurement Plan

I am not going to cover the measurement plan here, but I strongly encourage you to map out what aspects of video playback you need to capture and select the SiteCatalyst variables you will use before you start modifying your code. A measurement plan will help with implementation and provide documentation into the future.

Measurement 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 Module code. Instead, add the Video Tracking component found under Prod­uct Code > Site­Cat­a­lyst > Video Track­ing to automatically add the measurement library.

Player Mapping

In order for the Media Module library to know when video playback is happening, we need to map the HTML5 video events to the Media Module code. There are two pieces to this, (1) adding event listeners and (2) calling the Media Module functions when the video events occur. View source on the sample player to see the player mapping.

The W3C has defined standards for video events. More information is available here: http://www.w3.org/2010/05/video/mediaevents.html. In my sample player I am looking for play, seeked, seeking, pause, and ended. I have assigned my video player element on the page the id value of “movie”. The chunk of code that looks for the video player events is the following:

https://blog.adobe.com/media_8ae261554f592e4342c5adc36504346d1026fb88.gif

In the same block of JavaScript, I am also mapping the player events to the Media Module functions. For the start of the video, I am looking for the play event, and I am also checking the position of the player-head, to make sure the video is at the start of playback. I need to do this because the play event can also be called after pausing or scrubbing. I utilize the mediaOffset variable to store the player-head position. You may also need to perform a similar check for video complete, depending 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 function (which initiates the Media Module object) and the s.Media.play function (which indicates that the video is now playing). The other video events follow a similar logic of setting either s.Media.play or s.Media.stop, depending on whether the video event indicates the video playback 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 Module object.

Seeking and buffering functionality are not well supported within standard HTML5 players at this time and will require additional player coding to work properly. If you are using an enhanced HTML5 player, then additional seeking and buffering events are most likely provided as part of the video code. Check your video player documentation.

https://blog.adobe.com/media_4b5a7229bf6dc4a0447727c242bf9d7f6fe58173.gif

Variable Mapping

Once you have your player events mapped to Media Module functions, the final step is to add the variable mapping to the s_code file. Follow your measurement plan for proper frequency and variable usage. In the sample player I am setting quartiles and also adding two additional eVars to track page name and athlete name for each video call.

https://blog.adobe.com/media_f2e795882c08226c893cdf9c709d4f8aff1c727c.gif

A few things to note about this sample code:

Enable Video Tracking: I recommend wrapping the variable mapping in a true/false variable. In this example I am using s.enableVideoTracking. This allows a developer to easily turn on and off the video tracking and also contains the variable mapping within one function.

Track Vars: Make sure to include all the variables and events in the s.Media.trackVars and s.Media.trackEvents variables or the variables may not show up in your tracking calls.

Auto Track: s.Media.autoTrack is set to false because we added player specific event listeners in the player mapping code.

Media Monitor: Media monitor is required to set the additional eVars for page name and athlete name. If you are not setting additional variables, then media monitor can be left out of the code. You can find out more about Media Monitor in the SiteCatalyst documentation.

Validation

That completes the implementation steps. Now simply load your files into a browser and use a packet sniffer to check the tracking calls. The calls you see should match the calls outlined in your measurement plan.

https://blog.adobe.com/media_d7808a81b174384e50c5e1bb0c758ff7563918b5.gif