I've got a mobile Javascript application that occasionally dynamically-creates a <video>
element on the screen. I need to track video plays with Omniture. I have bound the play
, pause
, ended
, seeking
and seeked
events to track that the user started a video, paused, resumed, and stopped (or that they completed viewing the video). This is all implemented with calls like
s.Media.play("some_video_name", timePosition);
and
s.Media.stop("some_video_name");
Etc. This all currently works.
What I want to now do is track the positional milestones of 0, 25, 75, and 100%, with the trackMilestones
option, but I don't understand how any of the examples I've found online actually inform the Omniture s.Media
object of where they are. Omniture wouldn't be able to magically know where my video is unless it attaches event handlers to my video element. Is that what they're doing?
Is there some method I can call on the s.Media
object to inform it of my position as my player is playing video?
Here is a working example that tracks 1/4 milestones (25,50,75,100).
1.Ensure you have the following in your s_code.js
file
s.loadModule("Media");
s.Media.autoTrack=false;
s.Media.trackWhilePlaying=true;
s.Media.trackMilestones="25,50,75,100";
Media module is required within s_code as well. Here's an excerpt of what you'll need
s.m_Media_c="var m=s.m_i('Media');m.cn=function(n){var m=this;return m.s.rep(m.s.rep(m.s.rep(n,\"\\n\",''),\"\\r\",''),'--**--','')};m.open=function(n,l,p,b){var m=this,i=new Object,tm=new Date,a='',"
+"x;n=m.cn(n);if(!l)l=-1;if(n&&p){if(!m.l)m.l=new Object;if(m.l[n])m.close(n);if(b&&b.id)a=b.id;if(a)for (x in m.l)if(m.l[x]&&m.l[x].a==a)m.close(m.l[x].n);i.n=n;i.l=l;i.o=0;i.x=0;i.p=m.cn(m.playerNa"
+"me?m.playerName:p);i.a=a;i.t=0;i.ts=0;i.s=Math.floor(tm.getTime()/1000);i.lx=0;i.lt=i.s;i.lo=0;i.e='';i.to=-1;i.tc=0;i.fel=new Object;i.vt=0;i.sn=0;i.sx=\"\";i.sl=0;i.sg=0;i.sc=0;i.lm=0;i.lom=0;m.l"
+"[n]=i}};m._delete=function(n){var m=this,i;n=m.cn(n);i=m.l[n];m.l[n]=0;if(i&&i.m)clearTimeout(i.m.i)};m.close=function(n){this.e(n,0,-1)};m.play=function(n,o,sn,sx,sl){var m=this,i;i=m.e(n,1,o,sn,s"
+"x,sl);if(i&&!i.m){i.m=new Object;i.m.m=new Function('var m=s_c_il['+m._in+'],i;if(m.l){i=m.l[\"'+m.s.rep(i.n,'\"','\\\\\"')+'\"];if(i){if(i.lx==1)m.e(i.n,3,-1);i.m.i=setTimeout(i.m.m,1000)}}');i.m."
+"m()}};m.stop=function(n,
2.Bind HTML5 video player to Omniture
var html5Player = document.getElementById('video');
html5Player.addEventListener('loadedmetadata',playerHandler,false);
html5Player.addEventListener('play',playerHandler,false);
html5Player.addEventListener('pause',playerHandler,false);
html5Player.addEventListener('ended',playerHandler,false);
var videoOpened = false;
var currentTime = 0;
function playerHandler(e){
// window.console.log(e);//video meta
//window.console.log(e.type);
if (html5Player.currentTime > 0) {
currentTime = html5Player.currentTime;
}
switch(e.type){
case 'play':
if(!videoOpened){
window.console.log('opened');
s.Media.open(videoPageName, html5Player.duration, publicationName);
s.Media.play(videoPageName, 0);
}else{
window.console.log('play');
s.Media.play(videoPageName, currentTime);
}
// alert('currentTime: ' + currentTime);
// alert('duration: ' + Math.floor(html5Player.duration));
// alert('videoPageName: ' + videoPageName);
videoOpened = true;
break;
case 'pause':
window.console.log('pause');
s.Media.stop(videoPageName,currentTime);
break;
case 'ended':
window.console.log('ended');
s.Media.stop(videoPageName,currentTime);
s.Media.close(videoPageName);
break;
default:
break;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With