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

Flash based video play­ers con­tinue to be the most com­mon type of video player on-line today, and they are a good start­ing point for a col­lec­tion of blog posts on how to imple­ment Adobe Ana­lyt­ics for spe­cific player technologies.

As I cov­ered in my basic 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, which makes it the ideal place to add ana­lyt­ics code.

When we talk about Flash video play­ers, there are two basic cat­e­gories; stan­dard Flash play­ers and Hybrid Flash with HTML5 play­ers.  In stan­dard Flash play­ers, video play­back only takes place using Flash tech­nol­ogy, whereas with Hybrid play­ers video play­back takes place using Flash unless Flash is not avail­able and then the player auto­mat­i­cally switches to an HTML5 player.  Hybrid play­ers are gain­ing pop­u­lar­ity, espe­cially for com­pa­nies that are look­ing for a uni­fied video solu­tion that includes desk­top and mobile video playback.

Stan­dard Flash video play­ers require that the ana­lyt­ics code be added directly to the Flash video player code using Action­Script.  Hybrid video play­ers often include a JavaScript API that allows the ana­lyt­ics code to uti­lize JavaScript, rather than plac­ing the ana­lyt­ics code directly into the player.  For today’s post I will be cov­er­ing the stan­dard Flash video player ana­lyt­ics imple­men­ta­tion.  You can see the sam­ple Flash player with ana­lyt­ics code here.

Get­ting Started

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

The video player source code:  This will be a .fla file with addi­tional fold­ers and sup­port­ing files.  The .fla file is the uncom­piled video player code and is used to cre­ate the .swf file, which is the final video player file used by websites.

The App­Mea­sure­ment library:    The library con­tains all the basic code instruc­tions for how to track video and can be found in the Code Man­ager within Adobe Site­Cat­a­lyst.  I will pro­vide more details on this below.

The Adobe Flash Pro­fes­sional and Adobe Exten­sion Man­ager soft­ware:  This soft­ware is avail­able within Adobe Cre­ative Suite and will allow you to add the Action­Script code and the App­Mea­sure­ment library to the video player.

There are four tech­nical 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.

Mea­sure­ment Plan

I am not going to cover the mea­sure­ment plan here, but I strongly encour­age you to plan 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 the 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

Once the mea­sure­ment plan is final­ized, down­load the App­Mea­sure­ment library from Site­Cat­a­lyst and add it to your video player source code.  Log-in to Site­Cat­a­lyst and select Admin > Admin Con­sole > Code Man­ager.  From within the Code Man­ager, select Action­Script (Flash/Flex), set your options, and click Gen­er­ate Code.

In the Gen­er­ated Code win­dow, select the Com­po­nent Files Tab.  You will see a list of com­po­nent files.  When imple­ment­ing a stan­dard Flash video player, select AppMeasurement.mxp (Flash Pro Com­po­nent), which is the top option in the Flash Pro and Flash Builder Com­po­nents section.

video6-code-manager-mxp

Once you have down­loaded the AppMeasurement.mxp file, open the file using Adobe Exten­sion Man­ager.  The Exten­sion Man­ager will add the App­Mea­sure­ment library to Flash Pro­fes­sional, mak­ing the library avail­able to add to your video player project.  Make sure the Enabled check mark is checked.

video6-extension-manager

Close the Exten­sion Man­ager.  Now open your video player .fla file using Adobe Flash Pro­fes­sional, and go to the Com­mands drop down menu.  The last item in the menu should be “Omni­ture — Add App­Mea­sure­ment to Library”.  Click on this item and you will see App­Mea­sure­ment appear inside your library win­dow.  This indi­cates that the mea­sure­ment library has now been added to your video player.

video6-AppMeasurement-component

Player Map­ping

Video player map­ping is required if your video player does not use stan­dard terms for video player events.  In this exam­ple, since I’m using a sim­ple Flash player, there is no need for addi­tional player map­ping.  If you are not sure about your video player, start with the assump­tion that no addi­tional player map­ping will be needed.  If the mea­sure­ment calls are not com­ing through as expected, you may need to go back to your video player doc­u­men­ta­tion to see how video player actions are referenced.

Vari­able Mapping

The final imple­men­ta­tion step is to add the vari­able map­ping Action­Script to the player. The code needs to be added to the first frame of the first scene of the player.  With the .fla file open, go to the time­line win­dow and make sure that 1 is selected, and then from the top menu select Win­dow > Actions.  The actions edi­tor win­dow will open.  Select scene 1 frame 1.  This is where you will add the ana­lyt­ics code.

Start with the exam­ple code within Site­Cat­a­lyst.   Grab the Action­Script Exam­ple code from within the Code Man­ager.  The code is in the oppo­site tab from where you down­loaded the App­Mea­sure­ment library.  Copy the Action­Script code and paste it into scene 1 frame 1 within your Actions window.

video6-code-manager-code

Now edit the code to match your mea­sure­ment plan.  See my sam­ple AS3 code here.

Fol­low­ing are a few key steps asso­ci­ated with this sam­ple code that I will point out.

Add s.Media.trackVars and s.Media.trackEvents equal to all the vari­ables and events to be used within the video mea­sure­ment.  If any of the vari­ables or events are left out of these lists, they may not come through in your track­ing calls.

video6-trackVars-trackEvents

Con­fig­ure your Media Mod­ule func­tions, includ­ing set­ting auto­Track to true and nam­ing your video player.

video6-media-module-2

Finally, if you have addi­tional vari­ables that you need to track dur­ing video play­back, add the media mon­i­tor func­tion.  In my exam­ple, I’m using the media mon­i­tor to pop­u­late the ath­lete name in eVar14 at start, each mile­stone, and com­plete.  The media mon­i­tor func­tion is only needed if you are track­ing addi­tional vari­ables; oth­er­wise it can be left out of the code.

video6-media-monitor-flash

Your vari­able map­ping is now com­plete.  Close the Actions win­dow and save your .fla project.  To test, you can pub­lish your flash player swf by going to File > Pub­lish.  This will cre­ate a swf file and html file.  Load the files into a web browser and test using a packet snif­fer.  If all is cor­rect, your calls will match those out­lined in your mea­sure­ment plan.  You can see the sam­ple Flash player with ana­lyt­ics code here and below is the call being sent for the 75% milestone.

video6-flash-blog-packet

In my next blog post I will cover the basics of imple­ment­ing HTML5 video and dis­cuss Hybrid flash player tracking.

 

 

1 comments