Online Video Analytics – Tracking Embedded YouTube VideosIn part I we described some of the metrics and KPIs that may be useful to content providers who wish to analyze end-user engagement with their online videos. Now we would like to show a real world example of how to use YWA to capture audience behavior while using the internet’s most popular video platform: YouTube. Many companies now embed YouTube marketing videos directly into their website. Hosting these videos through YouTube reduces bandwidth costs and takes the headache out of setting up a hosted video platform. Companies looking to dive deeper into the performance of these embedded videos can use YWA to analyze the video metrics of value to them. For our example we are going to measure positive and negative consumption actions determined by the viewers interaction with the slider bar.
Defining Custom Actions and FieldsThe first step is to configure your YWA project for video analytics. We will use Custom Actions and Custom Fields to record the incoming video analytics data. We’ll define each unique action that our end users might make on the embedded video:
The custom fields are used to record section block number, time section block number, video title, video channel and video type:
Embedding YouTube API Enabled VideosThe next step will be to use SWFObject embed the video into our webpage and enable the YouTube API on it. We define the following JavaScript function that will initialize an embed YouTube Player identified as “myytplayer”:
function embedYoutube(){
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/" + video_id +
"&border=0&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "640", "385", "8", null, null, params, atts);
}
An API Enabled YouTube Player will call the onYouTubePlayerReady() function when it is fully initialized. We will use this function to initialize all of our YWA tracking routines:
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
setInterval('video_check_times()', 1000);
}
We can then embed the video in anywhere in our website using the following code: <div id="ytapiplayer">You need Flash player and JavaScript to view this video.</div> <script type="text/javascript">embedYoutube();</script> Tracking ActionsAbove we told our YouTube player to call the onytplayerStateChange() function each time the player changes state. We’ll use the function to fire off action tracking data to YWA:
function onytplayerStateChange(newState) {
switch (newState){
case 0: // Media Ended
my_submit_action(video_has_ended);
break;
case 1: // Playing
my_submit_action(video_playing);
break;
case 2: // Paused
video_paused_position=0;
video_paused_position=ytplayer.getCurrentTime();
video_paused_position = parseInt(video_paused_position);
my_submit_action_with_position(""+video_paused_seconds,""
+video_cf_paused_position,""+video_paused_position);
my_submit_action(video_paused);
break;
case 3: // Buffering
my_submit_action(video_buffering);
break;
case 5: // Ready
my_submit_action(video_ready);
break;
}
}
Checking for slider bar movementWhenever an end user uses the slider bar, they could be initiating a positive or negative consumption action. For instance if they fast forward to the end of the video because they were bored, this could be interpreted as a negative consumption action. However if they rewind the video it could be because they found that particular section compelling, a positive consumption action. In addition we can also keep track of the actual position the slider bar was moved from, and moved to. This is accomplished using an action to signal previous position event – ‘video_playing_position_changed_backward_seconds_prev’ in conjunction with and an action based custom field to actually record the video position in seconds called ‘video_cf_old_position’ with value passed in ‘video_old_position’. Similarly for the position the slider bar is moved to, we use another action: ‘video_playing_position_changed_forward_seconds_new’; and a custom field called: ‘video_cf_new_position’, with a value in seconds passed in ‘video_new_position’ . We can use these custom fields to generate a custom report using the custom report wizard to show the actual time in seconds where a end user begins sliding the slider bar, and ends sliding the slider bar. An example report to show sections where slider bar activity occurred could use ‘video_cf_old_position’ as a group and a metric of action ‘video_playing_position_changed_backward_seconds_prev ‘ ; as well as additional grouping for video title, channel, type. There is no callback event handler for user initiated slider changes and so a periodic timer event is used to call our video_check_times() function to check if the play time has been fast forwarded or rewound by the user:
function video_check_times()
{
video_check_times_counter++;
video_position = ytplayer.getCurrentTime();
video_position_change = video_position - video_old_position ;
if( (video_position_change < -3) || (video_position_change > 5) ){
SliderPositionChangeEvt(video_old_position , video_position );
}
video_old_position = video_position ;
}
We use the setInterval JavaScript function to run this function every 1 second to check for user initiated slider changes. If we do detect a user initiated change, we’ll then call the SliderPositionChangeEvt function:
function SliderPositionChangeEvt(video_old_position, video_new_position){
video_old_position = parseInt(video_old_position);
video_new_position = parseInt(video_new_position);
my_submit_action(video_playing_position_changed);
if(video_new_position > video_old_position) {
my_submit_action_with_position(""+video_playing_position_changed_forward_seconds_prev,
""+video_cf_old_position,""+video_old_position);
my_submit_action_with_position(""+video_playing_position_changed_forward_seconds_new,
"" +video_cf_new_position,""+video_new_position);
my_submit_action(video_playing_position_changed_forward);
my_submit_action(""+video_negative_consumption);
}
else {
my_submit_action_with_position(""+video_playing_position_changed_backward_seconds_prev,
""+video_cf_old_position,""+video_old_position);
my_submit_action_with_position(""+video_playing_position_changed_backward_seconds_new,
"" +video_cf_new_position,""+video_new_position);
my_submit_action(video_playing_position_changed_backward);
my_submit_action(""+video_positive_consumption);
}
}
Putting It All TogetherWe’ve combined all of the above code fragments into a live test page you can view at: http://www.yanalyticsblog.com/sandbox/ywa_yt/example1.html We’ve also added some realtime diagnostics information so you can see the state changes that we are tracking. You can download the zipped up source code here: example . Please note the example code has to be run from a proper http://www… web url and not from just a local hard disk file c://… to function correctly. Viewing the DataOnce you’ve collected some data you’re going to need to put together a report to view it. We’ll select our desired actions as the metrics in the Custom Report Wizard:
Running the report we can now see that our embedded video is generating more negative consumption actions than positive:
This could indicate that we need to edit the video to make it more interesting to our viewers. ConclusionWe hope this example does show you the power of leveraging YouTube’s open API with YWA’s versatile tracking code. In future posts we’ll demonstrate some more complex techniques, including one that uses video segmentation to analyze the most popular sections of a video and which sections of video drive conversion clicks. For those eager readers who wish to try this video time segmentation code in advance, it is available here: YWA_Video_YouTube . 6 Responses to “Online Video Analytics – Tracking Embedded YouTube Videos” |
|
Along with tracking the videos being watched, how does one track if someone is downloading videos or pictures from the site (ie right click – save as, not with an intentional download link).
Hi Casey,
I am not sure there actually is an option to save YouTube videos to hard disk.
For the general action of pressing the right mouse button, it is possible to track this.
An event handler piece of code would need to be written to capture the mousedown onmousedown event, and then this code set to send tracking data to YWA to say that the right button has been pressed. There are many good examples of how to connect to the right mouse button down event available on the internet by searching Yahoo! for “javascript event right button”.
Thanks Tim and Tony .
But is there a way to track videos from other providers like dailymotion, vim etc?
Hi Milind
Many of the popular video players provide a Javascript API. Often these APIs provide similar functionality to the YouTube player example in this article such as play state change monitoring. Dailymotion provides just that sort of Javascript API with onstatechange event handling. Details of the daily motion API can be found at:
http://www.dailymotion.com/en/doc/api/player/javascript_api
Using this API it is similarly possible to connect these player state monitors to YWA tracking code and then track online video analytics statistical data.
Is there anything consistent or similar across streaming video which we can use for analytics? Anything we can “detect” when the video is played to track basic usage? A beacon of some sort emitted by the player, perhaps?
Hi Louise,
There is a similarity between the players in that many of them offer an API that can supply user play, pause, slider, volume change activity information.
In this blog we show how to connect to one such API YouTube in this example case) in order to emit tracking beacons and then be able to report on this kind of user activity.