Omniture SiteCatalyst - YouTube Player Tracking Plugin v0.1c
This is the outdated version v0.1c which is not multiplayer compatible, but works very well for instances where only 1 YouTube player can be playing at the same time.
The current version can be accessed here.
Automatic Tracking - using the plugin:
The steps you need to do:
- Add the Omniture Media tracking module to your s_code.js (or similar). You need to have code version of H.15.1 or newer. You'll get this Media module from your Account Manager, Implementation Consultant or ClientCare.
A sample configuration could be:
s.loadModule("Media");
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackSeconds=30;
s.Media.trackVars="None";
s.Media.trackEvents="None";
which would send the tracking information every 30s to Omniture, not track any custom props/eVars and not track any other players like Windows Media Player, QuickTime Player or RealPlayer. Check the Omniture implementation manual for your desired configuration.
- make sure you embed the video with the API turned on e.g. http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer
If you use SWFObject (which I strongly suggest):
<div id="ytcontainer"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer",
"ytcontainer", "425", "356", "8", null, null,
{allowscriptaccess:"always",allowfullscreen:"true"}, {id:"myytplayer"});
</script>
where ytcontainer is your <div>-tag you want to have the player in. You can/should host the swfobject.js on your server, so change the code above appropriately.
- put the following plugin into your s_code.js (or similar). Should be placed somewhere after your config section and before the "DO NOT ALTER ANYTHING BELOW THIS LINE !" warning.
/*
* Plugin: YouTube Tracking v0.1c - track embedded YouTube Player
* Author: Andreas Dierl - http://adlytics.de/adytt
*/
adytt={};adytt.gqp=function(a,b){var c=a.indexOf('?');var d=a.indexOf('#');if(c<0){return""}var e=a.substr(c+1);
if(d>0){e=a.substring(c+1,d)}var f=e.split('&');for(var i=0;i<f.length;i++){var g=f[i].split('=');g[0]=unescape(g[0]);
if(g[0]==b){g[1]=unescape(g[1]);if(g[1].indexOf('"')>-1){var h=/"/g;g[1]=g[1].replace(h,'\\"')}
if(g[1].indexOf('+')>-1){var j=/\+/g;g[1]=g[1].replace(j,' ')}return g[1]}}return""};
adytt.addEH=function(a,b,c){if(typeof a=='object'&&a!==null){if(a.attachEvent){a['e'+b+c]=c;
a[b+c]=function(){a['e'+b+c](window.event)};a.attachEvent('on'+b,a[b+c])}else{a.addEventListener(b,c,false)}}};
adytt.p=null;adytt.id="";adytt.op=false;adytt.pl=false;adytt.po=0;adytt.du=0;adytt.bl=0;adytt.tp=false;
adytt.i=function(a){var b=0;if(!b){if(typeof s!="object"){b=3}}if(!b){adytt.p=document.getElementById(a);
if(adytt.p){adytt.p.addEventListener("onStateChange","adytt.st");
adytt.addEH(window,"unload",function(e){if(adytt.op){if(typeof adytt.sc=='function'){adytt.sc(adytt.po,true)}}})}}};
adytt.sc=function(a,b){if(adytt.pl){s.Media.stop(adytt.id,a);adytt.pl=false;adytt.tp=false}
if(b&&adytt.op){s.Media.close(adytt.id);adytt.op=false;clearInterval(adytt.tf)}};
function onYouTubePlayerReady(a){adytt.sc(Math.floor(adytt.po),true);adytt.i(decodeURIComponent(a))}
adytt.st=function(a){adytt.tp=false;switch(a){case 0:adytt.sc(adytt.du,true);break;
case 1:adytt.du=Math.floor(adytt.p.getDuration());if(!adytt.op){var b=adytt.p.getVideoUrl();
adytt.id="YT|"+adytt.gqp(b,'v');if(typeof adytt.getID=='function'){adytt.id=adytt.getID({url:b})}
s.Media.open(adytt.id,adytt.du,"YouTube Embedded Player");adytt.tf=setInterval(adytt.ti,500);adytt.op=true}
adytt.tp=true;break;case 2:adytt.po=adytt.p.getCurrentTime();adytt.sc(Math.floor(adytt.po),false);break;
case 3:adytt.bl=adytt.p.getVideoBytesLoaded();adytt.po=adytt.p.getCurrentTime();
if(adytt.bl==-1){adytt.sc(Math.floor(adytt.po),true)}else{adytt.sc(Math.floor(adytt.po),false)}break;}};
adytt.ti=function(){if(adytt.p&&(adytt.p.getPlayerState()==1||adytt.tp)){adytt.po=adytt.p.getCurrentTime();
adytt.bl=adytt.p.getVideoBytesLoaded();if(adytt.tp&&adytt.bl>0){s.Media.play(adytt.id,Math.floor(adytt.po));
adytt.pl=true;adytt.tp=false}}};
//adytt.getID = function(o) { return o.url; }
Notes:
- when using traditional object tag, make sure you don't have two tags with the same ID, but make sure the tag has an ID that matches the playerapiid parameter.
- default naming is YT|VideoID, e.g. "YT|8pB5sRsX5OU". Unfortunately YouTube does not make the video name available via API. So you need to classifiy the videos later in SiteCatalyst. (Update: help is coming)
- if you want to change the default naming, simply uncomment the adytt.getID function (last line of the plugin), change the code and return the name you want.
- The code is not multi-player compatible. So if you have more than one player on a page and both playing at the same time, it will mess up the data. As a workaround you can easily load the YouTube player in a layer (LightBox, ...) to only have one player playing at a time.
- The plugin adds an events handler to the window.onunload event to catch users that just leave the page. It tries to close the video and send the call to Omniture before leaving the page.
- Use the code above at your own risk. Always test before putting to production environments.
If you really don't want to follow my recommendation to use SWFObject, this way to implement the video manually seems to be the most-browser compatible. Make sure the plugin is loaded before the YouTube Player initializes!
<object id="myytplayer" width="425" height="344" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="myytplayer2" src="http://www.youtube.com/v/8pB5sRsX5OU?fs=1&rel=0&enablejsapi=1&playerapiid=myytplayer2" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
Would be nice if you'd drop me a line if this works for you.
This plugin is published under the license of postcardware as long as you don't remove the header.
Special thanks to Ben Gaines [@benjamingaines formerly known as @OmnitureCare] for beta testing and the feedback!
Have fun with video measurement!
Andreas
Version History:
2010-01-23 - 0.1
initial postcardware version
2010-06-10 - 0.1b
added decodeURIComponent for init
2010-10-05 - 0.1c
rewritten play/pause/.. handling, since API meant to say state=playing but bytesloaded=-1