Youtube Tracking with Player API
tracks starts, plays, pauses, ends with the video id and section of the video that the event occurred
by nicomiceli
HTML
<div id="player"></div>
JavaScript
//set video values
var video = 'tLt5rBfNucc'
video.h = '390'
video.w = '640'
var player;
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: video.h,
width: video.w,
videoId: video,
events: {
'onStateChange': onPlayerStateChange,
'onError': onPlayerError
}
});
}
function onPlayerStateChange(event) {
switch (event.data) {
case YT.PlayerState.PLAYING:
if (cleanTime()== 0) {
console.log("started " + videoPart());
//ga('send', 'event', 'video', 'started',video.id);
} else {
console.log("playing " + videoPart());
//ga('send', 'event', 'video', 'played',"v: " + video.id + " | t: " + cleanTime());
};
break;
case YT.PlayerState.PAUSED:
if (player.getDuration() - player.getCurrentTime() != 0) {
console.log('paused' + " @ " + videoPart());
//ga('send', 'event', 'video', 'paused',"v: " + video.id + " | t: " + cleanTime());
};
break;
case YT.PlayerState.ENDED:
console.log("ended ");
//ga('send', 'event', 'video', 'ended', video.id);
break;
};
};
function onPlayerError (event) {
console.log(event.data + " - error")
switch(event.data) {
case 2:
console.log('2' + video.id)
break;
case 100:
console.log('100' + video.id)
break;
case 101 || 150:
console.log('101 or 150' + video.id)
break;
}
}
//utilities
function cleanTime(){
return...