We are trying our hard to track the you tube video milestone. We have some what tracked video playing and ended events. However, still trying to figure out the solution to pass the events whenever user pass on any particular milestone. Mentioned code will work only whenever user pause the video, the respective milestone event will get trigger but we want to track the milestone while user cross the respective percentage like 25, 50 and 75.
Would be good if someone able to help on this tracking. Please let me know if any.
var players=[];
var n=0;
var twentyFlag = false;
var fiftyFlag = false;
var seventyFlag = false;
console.log("Var Defined");
//var player;// player is the iframe id on the page
window.onYouTubeIframeAPIReady = function() {
console.log("onYouTubeIframeAPIReady");
console.log("IframeAPI = Ready");
var player = new YT.Player('player0', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
console.log("myplayerisready");
event.target.playVideo();
}
function onPlayerStateChange(event){
var videoTitle = event.target.getVideoData().title;
console.log(videoTitle);
_satellite.cookie.set("videoTitle",videoTitle);
s.linkTrackvars='eVar5,prop17';
s.eVar5=s.prop17=videoTitle;
var totalTime=event.target.getDuration();
console.log("Total duration of the video" + totalTime);
s.linkTrackVars='eVar7';
s.eVar7=totalTime;
var currentTime=event.target.getCurrentTime();
console.log("current Time" + currentTime);
s.linkTrackVars='eVar6';
s.eVar6=currentTime;
var percentage=parseInt((currentTime/totalTime)*100);
console.log("Percentage:"+parseInt((currentTime/totalTime)*100));
if(percentage>25 && percentage<=50 && !twentyFlag){
twentyFlag = true;
s.linkTrackVars='events';
s.events='event2';
s.tl();
console.log("25% Percent");
}
else if(percentage>50 && percentage<=75 && !fiftyFlag){
fiftyFlag = true;
s.linkTrackVars='events';
s.events='event3';
s.tl();
console.log("50% Percent");
}
else if(percentage>75 && percentage<=99 && !seventyFlag){
seventyFlag = true;
s.linkTrackVars='events';
s.events='event4';
s.tl();
console.log("75% Percent");
}
if (event.data==YT.PlayerState.ENDED){
console.log("Video Ended");
s.linkTrackVars='events';
s.events='event5';
s.tl();
}
if (event.data==YT.PlayerState.PLAYING){
console.log("Video Playing");
s.linkTrackVars='events';
s.events='event1';
s.tl();
}
if (event.data==YT.PlayerState.PAUSED){
console.log("Video paused");
s.linkTrackVars='events';
s.events='event6';
s.tl();
}
}var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);Thank you, Jay.
