add analytics event tracking for shadowbox player and

rig the 'notice-developers-video' style links to also use shadowbox for video playback

Change-Id: Ib48a7c5243ad926345ce9ae9bd572d59aea035f4
This commit is contained in:
smain@google.com 2014-11-24 09:42:59 -08:00
parent 698fff028a
commit f75ee21c34

View file

@ -560,7 +560,7 @@ false; // navigate across topic boundaries only in design docs
/* setup shadowbox for any videos that want it */ /* setup shadowbox for any videos that want it */
var $videoLinks = $("a.video-shadowbox-button"); var $videoLinks = $("a.video-shadowbox-button, a.notice-developers-video");
if ($videoLinks.length) { if ($videoLinks.length) {
// if there's at least one, add the shadowbox HTML to the body // if there's at least one, add the shadowbox HTML to the body
$('body').prepend( $('body').prepend(
@ -583,9 +583,7 @@ false; // navigate across topic boundaries only in design docs
startYouTubePlayer(videoId); startYouTubePlayer(videoId);
}); });
}); });
} }
}); });
// END of the onload event // END of the onload event
@ -601,7 +599,8 @@ function startYouTubePlayer(videoId) {
width: '940', width: '940',
videoId: videoId, videoId: videoId,
events: { events: {
'onReady': onPlayerReady 'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
} }
}); });
} else { } else {
@ -616,7 +615,7 @@ function onPlayerReady(event) {
function closeVideo() { function closeVideo() {
try { try {
youTubePlayer.stopVideo(); youTubePlayer.pauseVideo();
$("#video-container").fadeOut(200); $("#video-container").fadeOut(200);
} catch(e) { } catch(e) {
console.log('Video not available'); console.log('Video not available');
@ -624,6 +623,22 @@ function closeVideo() {
} }
} }
/* Track youtube playback for analytics */
function onPlayerStateChange(event) {
// Video starts, send the video ID
if (event.data == YT.PlayerState.PLAYING) {
ga('send', 'event', 'Videos', 'Play', youTubePlayer.getVideoUrl().split('?v=')[1]);
}
// Video paused, send video ID and video elapsed time
if (event.data == YT.PlayerState.PAUSED) {
ga('send', 'event', 'Videos', 'Paused', youTubePlayer.getVideoUrl().split('?v=')[1], youTubePlayer.getCurrentTime());
}
// Video finished, send video ID and video elapsed time
if (event.data == YT.PlayerState.ENDED) {
ga('send', 'event', 'Videos', 'Finished', youTubePlayer.getVideoUrl().split('?v=')[1], youTubePlayer.getCurrentTime());
}
}
function initExpandableNavItems(rootTag) { function initExpandableNavItems(rootTag) {