Analytics Expert Blog

In 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 Fields

The 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 Videos

The 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 Actions

Above 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 movement

Whenever 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 Together

We’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 Data

Once 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.

Conclusion

We 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 .