I recently had a client with a Drupal site who wanted to be able to track whether or not his site members were watching videos on his site completely, and also wanted to know at what point site members were leaving the videos. The client currently uses SiteCatalyst for analytics, and is using the JW Media Player. After a lot of research, I came across this blog post, which gave some terrific insight regarding how to connect events in the JW Media Player to Omniture. However, the code samples did not apply to SiteCatalyst. The author of the blog post suggested using the s.tl() function in the SiteCatalyst code to track events. After a lot more research, I finally came up with a solution that tracks when users play a video, pause a video, watch a video until the end, and if the user navigates away from the video before it has completed. The current time of the video is also tracked for each of these events. Using this methodology, one could easily extend the tracking to include other events such as seek and playlist events. My code is below.
// Detect if the user navigates away from the video window.onbeforeunload = confirmExit; var currentPosition = 0; var currentVolume = 0; var currentMute = false; var currentState = "NONE"; var defaultState = "NONE"; var clipduration = 0; var player = null; var s = null; function playerReady() { player = document.getElementById('swfobject-1'); addListeners(player); } function addListeners(player) { if (player) { addAllModelListeners(player); } else { setTimeout("addListeners("+player+")",100); } } function addAllModelListeners(player) { if (typeof player.addModelListener == "function") { player.addModelListener("BUFFER", "doNothing"); player.addModelListener("ERROR", "doNothing"); player.addModelListener("LOADED", "doNothing"); player.addModelListener("META", "doNothing"); player.addModelListener("STATE", "stateListener"); player.addModelListener("TIME", "positionListener"); } } function doNothing(obj) { //nothing } function positionListener(obj) { currentPosition = obj.position; clipduration = obj.duration; } function stateListener(obj) { s = s_gi('sitecatalyst_id'); currentState = obj.newstate; switch(obj.newstate) { case 'PLAYING': s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="video_play"; s.prop1=secondsToMinutes(currentPosition); s.eVar1=secondsToMinutes(currentPosition); s.events="video_play"; s.tl(this,'o','Play Video'); break; case 'PAUSED': s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="video_pause"; s.prop1=secondsToMinutes(currentPosition); s.eVar1=secondsToMinutes(currentPosition); s.events="video_pause"; s.tl(this,'o','Pause Video'); break; case 'COMPLETED': s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="video_complete"; s.events="video_complete"; s.tl(this,'o','Video Complete'); break; } } function confirmExit() { if(currentState != 'COMPLETED') { s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="video_leave"; s.prop1=secondsToMinutes(currentPosition); s.eVar1=secondsToMinutes(currentPosition); s.events="video_leave"; s.tl(this,'o','Leave Video'); currentState = ''; } } // Helper function to convert seconds to mm:ss format function secondsToMinutes(seconds) { // Parse the minutes minVar = parseInt(Math.floor(seconds/60)); minVar = minVar <10 ? '0' + minVar : minVar; // Parse the seconds secVar = parseInt(seconds % 60); // The balance of seconds secVar = secVar <10 ? '0' + secVar : secVar; return minVar + ':' + secVar; }
Resources:
Recent comments
4 weeks 5 hours ago
8 weeks 3 days ago
8 weeks 3 days ago
2 years 1 week ago
2 years 1 week ago
2 years 22 weeks ago
2 years 22 weeks ago
2 years 29 weeks ago
2 years 39 weeks ago
2 years 12 weeks ago