Understanding Video Measurement Implementation

This post is part of an on-going series on video mea­sure­ment tips, tricks and best practices.

Though it is often viewed as a road­block, imple­ment­ing video mea­sure­ment does not need to be a bar­rier to suc­cess.  The most impor­tant con­cept in video imple­men­ta­tion is that video mea­sure­ment is all about the video player.  The player will deter­mine how you will imple­ment, what you can imple­ment, and even where the code will be placed.  In this post I’m going to pro­vide a gen­eral overview that should work for most video play­ers.  In future posts I will cover instruc­tions for imple­ment­ing video mea­sure­ment for spe­cific video players.

Do you know what video player is on your site?  An easy place to start is by open­ing a web browser and play­ing a video.  While the video is play­ing, right click within the player.  You should see a menu of options that can tell you a lot about your player tech­nol­ogy.  If you see options like “About Adobe Flash Player”, it means this player is using Flash tech­nol­ogy to dis­play the video.  If you don’t see any­thing about Flash, then there is a good chance that your player is uti­liz­ing HTML5 tech­nol­ogy.  The options may also include a video ven­dor name like Bright­cove, The Plat­form or JW Player.  Note down your find­ings so you can refer to them later.

If you are just get­ting started with video on your site and have not set­tled on a video player ven­dor, remem­ber to  find out what ana­lyt­ics inte­gra­tions are sup­ported and what data points are avail­able when eval­u­at­ing dif­fer­ent ven­dors.  Most mod­ern video play­ers are eas­ily inte­grated into the Adobe Ana­lyt­ics tools.

Dur­ing this post I will be using a sam­ple player that can be found here:  http://​mar​ijka​.host​.adobe​.com/​v​i​d​e​o​/​h​t​m​l​5​-​b​l​o​g​.​h​tml  This very basic HTML5 video player will play videos on most devices with a web browser.

The Video Player

Before I dive into a code dis­cus­sion, let’s take a step back.  Why does the video player mat­ter so much? What about the videos them­selves, or the device, or the app? Aren’t all the pieces important?

Indeed, all the pieces mat­ter, and the dia­gram to the left shows the tech­nol­ogy lay­ers involved in video display.

Device: The phys­i­cal machine that runs com­puter pro­grams.  It includes desk­top pc, mobile phone, tablet, game con­sole, set-top TV box, etc.

Site or Appli­ca­tion: The basic pro­gram, which may be a web browser or stand-alone appli­ca­tion, such as a mobile app.

Video Player: Code that dis­plays video assets and pro­vides a user inter­face for video play­back.  The code is designed to work with spe­cific appli­ca­tions and devices, mak­ing it “aware” of the envi­ron­ment in which it is placed.

Video Asset:  Indi­vid­ual video files, usu­ally stored in a video asset man­age­ment sys­tem.  Video assets them­selves do not con­tain any meta­data; they are sim­ply raw files.  Meta­data about video assets is stored and asso­ci­ated through asset man­age­ment systems.

Every­thing we want to mea­sure revolves around the user inter­ac­tion with the video.  The video player con­trols how the users view the video.  In order for the video player code to work, it must inter­act with all the lay­ers of tech­nol­ogy in the dia­gram.  By uti­liz­ing what the player already knows, we gain access to all the data we need about where and what was viewed.  The video player also con­trols play­back so we can cap­ture exactly when a video plays. The video player is really the brain of the oper­a­tion and this is why the mea­sure­ment code needs to work with the video player.

The Imple­men­ta­tion

There are four tech­ni­cal com­po­nents to imple­ment­ing video ana­lyt­ics; the mea­sure­ment plan, the mea­sure­ment library, the player map­ping, and the vari­able mapping.

The mea­sure­ment plan was cov­ered in the pre­vi­ous post.  If you haven’t designed a mea­sure­ment plan yet, it is the first step to video imple­men­ta­tion, because it lays out the key data points you want to col­lect for video.  For the sam­ple video player, I’m using the mea­sure­ment plan from the pre­vi­ous post, plus a few addi­tional data points, and for sim­plic­ity we are just going to exam­ine the long-form player. Let’s take a quick look at the table below.

The blue and green col­umn val­ues are mapped to spe­cific vari­ables using the vari­able map­ping code.  The six green columns (video name, page name, ath­lete name, domain, player name, and length) are set in the player map­ping code. Data for these types of vari­ables often comes from meta­data found in the video asset man­age­ment sys­tem or in con­tex­tual data from the app, site or device.  The blue columns are vari­ables auto­mat­i­cally set when you choose to track and seg­ment by mile­stones, which is the rec­om­mended method for long-form videos.  These vari­ables are con­trolled by the mea­sure­ment library.

The mea­sure­ment library is a col­lec­tion of code that con­tains all the basic func­tions needed to track videos, includ­ing cal­cu­la­tions for time elapsed and how to han­dle paus­ing and scrub­bing.  As part of Adobe Ana­lyt­ics, we offer a col­lec­tion of video mea­sure­ment libraries to fit your device and video player.  These libraries include the Media Mod­ule for JavaScript and the App Mea­sure­ment Libraries for Flash and mobile devices.  The Media Mod­ule is pro­vided by client care and is placed within your s_code JavaScript file.  The Flash App­Mea­sure­ment library can be found within the Adobe Mar­ket­ing Cloud under Admin Con­sole > Code Man­ager > Action­Script (Flash/Flex).  For the mobile App­Mea­sure­ment libraries see the Devel­oper Con­nec­tion.  Fol­low the instruc­tions for adding the library to your site or app code.  The sam­ple video player is HTML5, so I’ve added the Media Mod­ule JavaScript code to my base s_code.js file.

Once the mea­sure­ment library is in place you can map your video player actions to the library func­tions; this is the player map­ping.  The mea­sure­ment library is look­ing for some key points within video play­back includ­ing open, start, stop, close, scrub start, scrub stop, pause start, pause stop, video name, player name, and video off­set.  Your video player may use dif­fer­ent names for these video points than the video library, which is why the player map­ping is needed.  For instance, in the sam­ple video player, I have mapped the HTML5 video points to the video func­tions expected by the Media Mod­ule video library.  You can see that video com­plete is called “ended” in HTML5 and is called s.Media.close in the media mod­ule library.  To see this code, view source on the html page. 

After you’ve mapped the player names to the mea­sure­ment names, you then need to map the mea­sure­ment names to spe­cific Adobe Ana­lyt­ics vari­ables.  This hap­pens in the vari­able map­ping code.  There are three options for vari­able map­ping; in order from sim­ple to com­plex, they are basic media track­ing, media mon­i­tor cus­tom track­ing and full cus­tom track­ing.  Deter­min­ing which map­ping you need depends on what data points you want to cap­ture and whether the mea­sure­ment library sup­ports the track­ing you require.  Basic media track­ing sup­ports a lim­ited but essen­tial set of data points includ­ing mile­stones or sec­onds, video asset name, seg­ment name, and time spent.  If you need a few addi­tional data points, such as ath­lete name and par­ent page name, then add some media mon­i­tor func­tions to your map­ping; exam­ine the sam­ple s_code.js to see how I’ve used media mon­i­tor.   If your mea­sure­ment needs are highly cus­tomized it may be eas­i­est to imple­ment a fully cus­tom track­ing plan, though cus­tom track­ing is out of scope for this post.  Adobe Con­sult­ing or Client Care can point you in the right direc­tion for cus­tom implementations.

The Test

Once you have all your code pieces in place, it is time to test your track­ing calls.  The eas­i­est way to test is to com­pare the rows of your mea­sure­ment spread­sheet to the indi­vid­ual track­ing calls fired from your video player.  To see the calls being fired, use a packet sniff­ing tool like Charles, Fid­dler, HTTP Scoop, Fire­bug, or the Chrome Devel­oper Tools.  In the packet snif­fer you should see each video mile­stone send­ing a call and you should see each vari­able equal an expected value.  Give it a try with the sam­ple player.  For video start you should see some­thing like this:

 

The Data Collection

After test­ing with the packet snif­fer, it is time to ver­ify the data is reach­ing Site­Cat­a­lyst and to set-up your video vari­ables and reports.  In the next post I will walk through the basics of video report­ing set-up and analysis.