Track Your FLV Video Files With Omniture & FlowPlayer

EDIT:  After I wrote this I found a new video player that will play flv, wnv, and youtube videos.

I’ve been working on our Omniture integration for a while now and recently I started working on the task of tracking our videos. I know that Omniture has some very nice features you can use with Action Source code, but what if all you have access to is the end result of the flv file? With no tools to edit a player, or the ability to embed the code in the files/players? It’s a bit of a challenge to say the least.

I needed a way to track flv files with the same amount of details that the Action Source would provide in a reliable, easy to duplicate fashion. My search for this led me to an FLV player called FlowPlayer. It is a nice easy to implement player with easy access to the API and the events.

Download the player and move the swf and js files to the directories of your choice. When you initialize the player, you simply add a script for the events you want to track to the page.

<script src="/includes/mediaPlayers/flowplayer/flowplayer-3.1.1.js"></script>
<cfoutput>
<a
href="#variables.mediaFilePath#"
style="display:block;width:500px;height:440px;"
id="player">
</a>
</cfoutput>

<script language="JavaScript">
flowplayer("player", "/includes/mediaPlayers/flowplayer/flowplayer-3.1.1.swf");
</script>
<cfoutput>
<script>
$f("player", "/includes/mediaPlayers/flowplayer/flowplayer-3.1.1.swf", {
clip: {
// track start event for this clip
onStart: function(clip) {
//alert("Start " + clip.fullDuration);
omniInitMediaTracking('#variables.mediaFileName#',clip.fullDuration,'#variables.playerName#');
},

// track pause event for this clip. time (in seconds) is also tracked
onPause: function(clip) {
//	alert("Pause " + parseInt(this.getTime()));
omniMediaTrackingStop('#variables.mediaFileName#',parseInt(this.getTime()));
},

//track Resume of player
onResume: function(clip) {
//alert("Resume");
omniMediaTrackingResume('#variables.mediaFileName#',parseInt(this.getTime()));
},

// track stop event for this clip. time is also tracked
onStop: function(clip) {
//	alert("Stop " + clip.url);
omniMediaTrackingStop('#variables.mediaFileName#',parseInt(this.getTime()));
},

// track finish event for this clip
onFinish: function(clip) {
//alert("Done");
omniMediaTrackingDone('#variables.mediaFileName#');
},

// track FF or REV
onSeek: function(clip) {
//alert("Skipped to: " + parseInt(this.getTime()));
omniMediaTrackingResume('#variables.mediaFileName#',parseInt(this.getTime()));
}
},

// show stop button so we can see stop events too
plugins: {
controls: {
stop: true
}
}
});
</script>
</cfoutput>

Then make sure you have the following functions set up in your Omniture code. This assumes that you have the media tracking module in your s_code.js file.

function omniInitMediaTracking(mediaName,mediaLength,playerName) {
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackMilestones="25,50,75,100";
s.Media.open(mediaName,mediaLength,playerName);
s.Media.play(mediaName,0);
}

function omniInitMediaAutoTracking(mediaName,mediaLength,playerName) {
s.Media.autoTrack=true;
s.Media.trackWhilePlaying=true;
s.Media.trackMilestones="25,50,75,100";
s.Media.open(mediaName,mediaLength,playerName);
s.Media.play(mediaName,0);
}

function omniMediaTrackingStop(mediaName,mediaPosition) {
s.Media.stop(mediaName,mediaPosition);
s.t();
}

function omniMediaTrackingResume(mediaName,mediaPosition) {
s.Media.play(mediaName,mediaPosition);
s.t();
}

function omniMediaTrackingDone(mediaName) {
s.Media.stop(mediaName,mediaPosition);
s.Media.close(mediaName);
s.t();
}

The code I used is based on a ColdFusion 8 server, with jQuery installed. Both of which play very nice with this integration. This has been working great for us with all browsers/os.

This won’t help you with wmv files but if you can control the format of the video files you can work with, this might be an easy solution to use. More information about the FlowPlayer API can be found here.

-Rudi

Leave a Reply to Jason S. Cancel reply

Your email address will not be published. Required fields are marked *

Are you human? Or are you Dancer? *

6 thoughts on “Track Your FLV Video Files With Omniture & FlowPlayer”