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

Flash based video players continue to be the most common type of video player on-line today, and they are a good starting point for a collection of blog posts on how to implement Adobe Analytics for specific player technologies.

As I covered in my basic 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, which makes it the ideal place to add analytics code.

When we talk about Flash video players, there are two basic categories; standard Flash players and Hybrid Flash with HTML5 players.  In standard Flash players, video playback only takes place using Flash technology, whereas with Hybrid players video playback takes place using Flash unless Flash is not available and then the player automatically switches to an HTML5 player.  Hybrid players are gaining popularity, especially for companies that are looking for a unified video solution that includes desktop and mobile video playback.

Standard Flash video players require that the analytics code be added directly to the Flash video player code using ActionScript.  Hybrid video players often include a JavaScript API that allows the analytics code to utilize JavaScript, rather than placing the analytics code directly into the player.  For today’s post I will be covering the standard Flash video player analytics implementation.  You can see the sample Flash player with analytics code here.

Getting Started

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

The video player source code:  This will be a .fla file with additional folders and supporting files.  The .fla file is the uncompiled video player code and is used to create the .swf file, which is the final video player file used by websites.

The AppMeasurement library:    The library contains all the basic code instructions for how to track video and can be found in the Code Manager within Adobe SiteCatalyst.  I will provide more details on this below.

The Adobe Flash Professional and Adobe Extension Manager software:  This software is available within Adobe Creative Suite and will allow you to add the ActionScript code and the AppMeasurement 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.

Measurement Plan

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

Measurement Library

Once the measurement plan is finalized, download the AppMeasurement library from SiteCatalyst and add it to your video player source code.  Log-in to SiteCatalyst and select Admin > Admin Console > Code Manager.  From within the Code Manager, select ActionScript (Flash/Flex), set your options, and click Generate Code.

In the Generated Code window, select the Component Files Tab.  You will see a list of component files.  When implementing a standard Flash video player, select AppMeasurement.mxp (Flash Pro Component), which is the top option in the Flash Pro and Flash Builder Components section.

video6-code-manager-mxp

Once you have downloaded the AppMeasurement.mxp file, open the file using Adobe Extension Manager.  The Extension Manager will add the AppMeasurement library to Flash Professional, making the library available to add to your video player project.  Make sure the Enabled check mark is checked.

video6-extension-manager

Close the Extension Manager.  Now open your video player .fla file using Adobe Flash Professional, and go to the Commands drop down menu.  The last item in the menu should be “Omniture – Add AppMeasurement to Library”.  Click on this item and you will see AppMeasurement appear inside your library window.  This indicates that the measurement library has now been added to your video player.

video6-AppMeasurement-component

Player Mapping

Video player mapping is required if your video player does not use standard terms for video player events.  In this example, since I’m using a simple Flash player, there is no need for additional player mapping.  If you are not sure about your video player, start with the assumption that no additional player mapping will be needed.  If the measurement calls are not coming through as expected, you may need to go back to your video player documentation to see how video player actions are referenced.

Variable Mapping

The final implementation step is to add the variable mapping ActionScript 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 timeline window and make sure that 1 is selected, and then from the top menu select Window > Actions.  The actions editor window will open.  Select scene 1 frame 1.  This is where you will add the analytics code.

Start with the example code within SiteCatalyst.   Grab the ActionScript Example code from within the Code Manager.  The code is in the opposite tab from where you downloaded the AppMeasurement library.  Copy the ActionScript code and paste it into scene 1 frame 1 within your Actions window.

video6-code-manager-code

Now edit the code to match your measurement plan.  See my sample AS3 code here.

Following are a few key steps associated with this sample code that I will point out.

Add s.Media.trackVars and s.Media.trackEvents equal to all the variables and events to be used within the video measurement.  If any of the variables or events are left out of these lists, they may not come through in your tracking calls.

video6-trackVars-trackEvents

Configure your Media Module functions, including setting autoTrack to true and naming your video player.

video6-media-module-2

Finally, if you have additional variables that you need to track during video playback, add the media monitor function.  In my example, I’m using the media monitor to populate the athlete name in eVar14 at start, each milestone, and complete.  The media monitor function is only needed if you are tracking additional variables; otherwise it can be left out of the code.

video6-media-monitor-flash

Your variable mapping is now complete.  Close the Actions window and save your .fla project.  To test, you can publish your flash player swf by going to File > Publish.  This will create a swf file and html file.  Load the files into a web browser and test using a packet sniffer.  If all is correct, your calls will match those outlined in your measurement plan.  You can see the sample Flash player with analytics 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 implementing HTML5 video and discuss Hybrid flash player tracking.

 

 

1 comments