sailing-videoThis 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

video-onionBefore 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.

video-plan-implement

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:

video-implment-charles

 

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.

 

 

 

4 comments
marijka
marijka

Good question.  Live video and video where the duration is unknown should rely on trackSeconds instead of trackMilestones and the video duration value should be set to -1.

LisaRiggle
LisaRiggle

How do the milestone attributes and length values change when dealing with live streaming broadcasts vs finite videos.

Ahmad Rahman
Ahmad Rahman

Can you please repost the js file.  I'd like to view it for reference.  Thanks.