javascript - Tracking video milestones from a custom HTML5 video player to Omniture Media Module? - Stack Overflow

admin管理员组

文章数量:1334342

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 pleted 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?

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 pleted 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?

• javascript
• html
• video
• dom-events
• adobe-analytics

Share Improve this question Follow edited May 8, 2021 at 13:19 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 14, 2011 at 19:38 MaciekMaciek 3,38266 gold badges3030 silver badges3535 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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;
        }
    }

You seem to be missing a call which informs s.Media of the duration:

    s.Media.open("some_video_name", videoDuration, videoSrc);

This, in bination with the play/pause/seek events, should let them know approximately where the video is as a percent of total playback.

I say approximately because I suspect they're basically running their own internal stopwatch which can still drift from the video playhead. For example,in HTML5 video you'd need to catch the "waiting" event in addition to pause. The stopwatch would assume a real-time playback rate, and not handle other, non-event firing reasons why a video can be playing but not advancing in time (the browser could refuse to play due to a video already playing elsewhere in the page/site ). Presumably their stopwatch is good enough for their tracking purposes.

I am not sure whether you already figured out the solution for this. But to trackMilestone's you can add the following piece of code in your scode's Media monitor code.

var tracked10=false; //Variables used as "flags" to prevent the same code from running
var tracked90=false; //twice in the same video play.
s.Media.monitor = function (s,media) {

//Use this code with either JavaScript or Flash.
// eVar1 = Media Name
// event1 = Video Begins
// event2 = Reached 10%
// event3 = Reached 90%
// event4 = Reached 100%
if (media.event == "Open") { //Executes when the video opens.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event1";
s.events="event1";
s.eVar1 = media.name;
s.Media.track(media.name);
}
if ((!tracked10) && (media.percent >= 10) { //Executes at 10% plete.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event2";
s.events="event2"
s.eVar1 = media.name;
s.Media.track(media.name);
tracked10 = true;
}
if ((!tracked90) && (media.percent >= 90)) { //Executes at 90% plete.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event3";
s.events="event3"
s.eVar1 = media.name;
s.Media.track(media.name);
tracked90 = true;
}
if (media.event == "CLOSE") { //Executes when the video pletes.
s.Media.trackVars = "eVar1,events";
s.Media.trackEvents = "event4";
s.events="event4"
s.eVar1 = media.name;
s.Media.track(media.name);
var tracked10=false; //Reset flags values at Media.close if visitors can play
var tracked90=false; //additional videos without reloading the page.
}
};

本文标签：