I thought I’d write this one given the general lack of information available on the web around getting Flowplayer reporting into SiteCatalyst v15.

I recently worked with a client who uses Flowplayer and we needed to get them ready to upgrade to v15.  The challenge was, Flowplayer has no information about integration and what’s out there on the web seems to be for v14 code.  Additionally, with Flowplayer you can’t use the AppMeasurementExtension – you have to use the JavaScript methods.

So, with a little struggling and some help from Chris Meares (a fellow beta tester) over at Semphonic, we managed to get it all working properly.

I’ve added code files for you at the bottom of this post because the formatting is not the greatest.

Step 1 – Configure Video Measurement

Firstly, you need to assign your eVars, s.props and events for video measurement and configure them in the admin UI of SiteCatalyst.  Note that you’ll need to give one of the eVars full-subrelations.  Also you’ll need to enable pathing on the prop if you want to see video paths.

As per the previous post, you need 3 eVars, 7 events and an s.prop.

Once you saved your configuration the new video reports will become available in the reporting interface.

Step 2 – Media Module

Get the latest media module and put it into your s_code file.

I’ve made available the media module that I used as I could no longer find it anywhere in the admin.  Replace your existing media module (if you have one), with this one.

If you don’t have a media module, then this goes into your s_code, just after the section named

/****************************** MODULES *****************************/
/* Module: Media */

[paste the media module here]

/************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/
var s_code=”,s_objectID;function s_gi(un,pg,ss){var …

Step 3 – Add media variables to s_code

Just before the Media Module section of your s_code and just after your tracking server value, you will need to add in the media variables:

s.loadModule(“Media”)
s.Media.autoTrack=false;
s.Media.trackMilestones=”25,50,75,100″;
s.Media.segmentByMilestones =true;
s.Media.playerName=”Flowplayer”;
s.Media.trackWhilePlaying=true;
s.Media.trackUsingContextData =true;
s.Media.trackVars=”events,eVar31,eVar51,eVar52,prop31″;
s.Media.trackEvents=”event9,event55,event56,event57,event58,event59,event60″;
s.Media.contextDataMapping = {
“a.media.name”:”eVar31,prop31″,
“a.media.segment”:”eVar51″,
“a.contentType”:”eVar52″,
“a.media.timePlayed”:”event55″,
“a.media.view”:”event9″,
“a.media.segmentView”:”event57″,
“a.media.milestones”:{
25:”event58″,
50:”event59″,
75:”event60″,
100:”event56″
}
}

You’ll need to modify the variables as per your configuration from Step 1.  Make sure you put them all in the right place and use all of the variables that you set up.

Step 4 – Modify your video player code

This step requires that you go back to your video player code and add in special handlers to “listen” so that they react when certain things happen.

With Flowplayer, you’ll have access to the clip: function.  This is where the handlers are put so that you can call the applicable Omniture video tracking functions:

<script type=”text/javascript”>
var omniMediaDetails = {“title”:”Test Video”}; // Name of Video
$f(“fzplayer”, { src: “flowplayer.commercial-3.2.5.swf”, wmode: “transparent”  }, {
clip: {
/* ——————————- */
// track start event for this clip
onStart: function(clip) {
s.Media.open(omniMediaDetails.title,clip.fullDuration,clip.url);
s.Media.play(omniMediaDetails.title,0);
},
/* ——————————- */
// track pause event for this clip. time (in seconds) is also tracked
onPause: function(clip) {
s.Media.stop(omniMediaDetails.title,parseInt(this.getTime()));
},
/* ——————————- */
// track resume event for this clip. time (in seconds) is also tracked
onResume: function(clip) {
s.Media.play(omniMediaDetails.title,parseInt(this.getTime()));
},
/* ——————————- */
// track stop event for this clip. time is also tracked
onStop: function(clip) {
s.Media.stop(omniMediaDetails.title,parseInt(this.getTime()));
},
/* ——————————- */
// track fast foward and rewind. time is also tracked
onSeek: function(clip) {
s.Media.play(omniMediaDetails.title,parseInt(this.getTime()));
},
/* ——————————- */
// track finish event for this clip
onFinish: function(clip) {
s.Media.stop(omniMediaDetails.title,parseInt(this.getTime()));
s.Media.close(omniMediaDetails.title);
}
},
/* ——————————- */
// show stop button so we can see stop events too
plugins: {
controls: {
stop: true
}
}
});

</script>

Step 5 – Verify

To verify that the correct variables are being sent at the correct time, use WASP or Charles or Fiddler.  The output should be something like what’s shown below.  You’ll get an event/events fired off at the start/25/50/75/100% milestones:

If you see something similar to what’s shown below as your pev3 variable, then you’re not using the correct Media Module:

No fixed length video?

If you are streaming videos with no end, (e.g. a running newscast or something like that), then you’ll need to change your tracking to s.media.trackSeconds instead of s.media.segmentByMilestones.

We added a variable into the player code (s_videolive) to set whether it was a “live” feed or if it was a known-length video, and then modified the in-page footer code as follows:

   if(s_videolive && s_videolive == “false”){
// Non Streaming Video
s.Media.trackMilestones=”25,50,75,100″;
s.Media.segmentByMilestones =true;
}else{
// Streaming Video
s.Media.trackSeconds = 30;
s.Media.segmentByMilestones =false;
}
var s_code=s.t();
if(s_code)document.write(s_code);

If it’s not a live feed then its tracked using start/25/50/75/100 milestones, otherwise, it’s tracked every 30 seconds.

Files

Adobe Omniture SiteCatalyst v15 Media Module

Media Variables

Flowplayer Sample Code

Help Files

Adobe has also put together some very good documentation on measuring video, especially around the use of the AppMeasurementExtension.

Example Video

Watch a video measured using SiteCatalyst, Flowplayer, and TagManager.

Related Posts

• Time spent by Traffic Source
• Success Event Pathing
• Brightcove Video in SiteCatalyst 15
• What are our members doing?
• Hello 15!
• Elusive engagement – Part II – Visitor scoring
• Deeper internal search insights that’ll help with content needs
• Moving beyond business-based segmentation
• Migration frustration – SiteCatalyst 15
• New products announced at Adobe Omniture Summit 2011