Multimedia Tracking- Analytics - Omniture JWplayer

Omniture Adobe

This code is designed to track multimedia interaction of users on a website. It utilizes Longtail's video player, JW Player, and Omniture's SiteCatalyst tracking tool. In order for this to function properly content in brackets must properly be populated.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Top C Video Tracking</title>
</head>
<!--header info-->      
<body>
<script type='text/javascript'><!--
var s_account="accountname"; //--- Must fill Omniture account name here and in the omniture img tag below
//--></script>
<script type='text/javascript' src='incs/s_code.js'></script>        
 
<!--Utilize Google's library increases load time--> 
<script src="incs/swfobject.js" type="text/javascript"></script>
<div align="center" id='mediaspace'></div>
 
<script type='text/javascript'>
    var videoFileName = "NameofYourVid.flv"; //--- Set the video source must place this in the incs directory 
    var placeHolderImage = "screen-shot.jpg";  //--- Set the video's holder screenshot place in incs directory as well
    var videoTitle = "Video Title"; //--- Set the video title
    var height = "525";  //--- Set the height of the video 
    var width  = "440";  //--- Set the width of the video                                  
</script>
 
<script type='text/javascript' src='incs/video_tracking.js'></script>  
 
<!--START SITE CATALYST TRACKING CODE-->
<script type='text/javascript'><!--
s.pageName = ''; //All vars must be populated here
s.channel = '';
s.hier1 = '';
s.prop1 = '';
s.server=location.hostname 
var s_code=s.t();
if(s_code)document.write(s_code)
//-->
</script>
<script type="text/javascript"><!--
if(navigator.appVersion.indexOf("MSIE")>=0)document.write(unescape("%3C")+"\!-"+"-")
//--></script>
<noscript><div><img src='http://siteURL.122.2o7.net/b/ss/accountname/1/H.21--NS/0?pageName=&ch=' style='height:1px;width:1px;border:0px;' alt='Tracking' /></div></noscript>
 
 <!-- footer info  to be populated below --> 
</body>
</html>

Video tracking file JavaScript

// Author: Brian Thopsey <a href="http://topcweb.com" title="http://topcweb.com">http://topcweb.com</a>    - thanks to Rudi Shumpert
// Code for tracking of video player, Longtail - JWplayer on Omniture SC
// variables to help populate player
var currentBuffer = 0;
var currentPosition = 0;
var currentState = "NONE";
var defaultState = "NONE";       
var currentLoad = 0;
var clipDuration = 0;
var player;    
var playerLocation = "incs/player-licensed.swf"; //--- Location of the JWplayer file
//unfortunately this is the piece that I cannot include and must be purchased here longtailvideo.com
var skinLocation = "incs/stijl.swf";  //--- Location of the JWplayer buttons file
//The skin will also come with the player download
//var videoFileName = "name_of_video.flv"; //-- set this on in the html so that you can use this a centralized file
 
/* additional vars that are not neccessary */
  var autoPlay; 
  var viralShare;
  var captions;
  var captionFile;
 
 
 
// Function for instatiating player
function playerReady(obj) {
    //alert('the videoplayer '+obj['id']+' has been instantiated');
    player = document.getElementById(obj['id']);
     addListeners()
};
 
 
//set the variables up for SWF object for loading the flash into the page 
var so = new SWFObject(playerLocation,'mpl',height,width,'9');
  so.addParam('allowfullscreen','true');
  so.addParam('allowscriptaccess','always');
  so.addParam('wmode','opaque');
  so.addVariable('author','Kaspersky Lab');
  so.addVariable('file',videoFileName);
  so.addVariable('image', placeHolderImage);
  so.addVariable('title',videoTitle);
  so.addVariable('skin',skinLocation);
  if (autoPlay == true){so.addVariable('autostart', 'true');}
  if (viralShare== true){so.addVariable('plugins', 'viral-2');}
  if (captions == true){
    so.addVariable('plugins', 'captions-1');
    so.addVariable('captions.file', captionFile);
  }
 
  so.write('mediaspace');   
 
function addListeners() {
  //load the JWplayer event listners
  if (player) {
      addAllModelListeners(); 
  }
}
 
function addAllModelListeners() {
   if (typeof player.addModelListener == "function") {    
     player.addModelListener("BUFFER", "doNothing"); //{percentage,id,client,version}.
     player.addModelListener("ERROR", "doNothing"); //{message,id,client,version}.
     player.addModelListener("LOADED", "doNothing"); //{loaded,total,offset,id,client,version}.
     player.addModelListener("META", "doNothing"); //{variable1,variable2,variable3,...,id,client,version}.
     player.addModelListener("STATE", "stateListener");//{newstate,oldstate,id,client,version}.
     player.addModelListener("TIME", "positionListener"); //{position,duration,id,client,version}.
  }
}
 
function doNothing(obj) { //nothing
}
 
function positionListener(obj) {  
  //let's us know where we are in the video
  currentPosition = obj.position ;  
  clipDuration = obj.duration ; 
}
 
function stateListener(obj) {    
  oldState = obj.oldstate;                      
  if (defaultState == "NONE") {
      defaultState = "started";
      getTimeValue();
  }   
  currentState = obj.newstate;  
  //currentTime = obj.position;   
 
  //pass the event to Omniture     
  if (currentState == "COMPLETED"){
      omniMediaTrackingDone(videoFileName,currentPosition);
    }
  if (currentState == "PLAYING"){             
       //alert('play');    //testing
       if (currentPosition  != "0"){    
        omniMediaTrackingResume(videoFileName,currentPosition);
       }
  }
  if (currentState == "PAUSED"){ 
    //alert('paused');      //testing
    //alert(videoFileName);      //testing
    //alert(currentPosition);      //testing
    omniMediaTrackingStop(videoFileName,currentPosition);
  }
}
 
// according to Rudi you can not combine the listener events, so the functions below are a workaround to get the length/pos of the video file
function getTimeValue(){  
  if (currentPosition  == "0"){      
     //needed to allow the video to load in in order to capture the parameters
     setTimeout("getTimeValue()",100);
  }else{
     omniInitMediaTracking(videoFileName,clipDuration,'JWplayer');
  }
}

s_code JavaScript

//This is just a snippet of the s_code 
//author: Brian Thopsey -thanks to Rudi Shumpert
 
s.loadModule("Media")  //media module should be in s_code as well I am not sure the legality of sharing - contact me for questions <a href="http://topcweb.com/contact/" title="http://topcweb.com/contact/">http://topcweb.com/contact/</a>   
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 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 omniMediaTrackingStop(mediaName,mediaPosition) {
   s.Media.stop(mediaName,mediaPosition);
}
 
function omniMediaTrackingResume(mediaName,mediaPosition) {
    s.Media.play(mediaName,mediaPosition);
}
 
function omniMediaTrackingDone(mediaName,mediaPosition) {
    s.Media.stop(mediaName,mediaPosition);
    s.Media.close(mediaName);
}
 
 /****************************** MODULES *****************************/
/* Module: Media Module Code Goes here*/

Total package zipped

Please feel free to use this. I would love to see comments where the code is being utilized.

Important testing notes!

Make sure the s_code is set above all the JavaScript.
There are several alert lines commented out that can be used to help test where issues may arise.
A packet sniffer like httpfox can be utlized to see the Omniture data being passed
Image requests are only passed upon the marked milestones that you set. (25% 50% 75% 100%")

Special thanks to Rudi Shumpert who provided the original code. Currently in the process of attempting to upgrade to use SWF Object 2.2 in order to take advantage of Google libraries.

In order for this to fully function the media module plug-in is needed in the Omniture JavaScript code (s_code). Feel free to contact us for any questions or comments.

Resources:
http://code.google.com/p/jw-flv-player/
http://www.rudishumpert.com/2009/08/19/one-player-to-rule-them-all/