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

1 files changed, 20 insertions, 5 deletions

diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index 701870a..945cfa7 100644
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -560,7 +560,7 @@ false; // navigate across topic boundaries only in design docs
 
 
   /* 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 there's at least one, add the shadowbox HTML to the body
     $('body').prepend(
@@ -583,9 +583,7 @@ false; // navigate across topic boundaries only in design docs
         startYouTubePlayer(videoId);
       });
     });
-
   }
-
 });
 // END of the onload event
 
@@ -601,7 +599,8 @@ function startYouTubePlayer(videoId) {
       width: '940',
       videoId: videoId,
       events: {
-        'onReady': onPlayerReady
+        'onReady': onPlayerReady,
+        'onStateChange': onPlayerStateChange
       }
     });
   } else {
@@ -616,7 +615,7 @@ function onPlayerReady(event) {
 
 function closeVideo() {
   try {
-    youTubePlayer.stopVideo();
+    youTubePlayer.pauseVideo();
     $("#video-container").fadeOut(200);
   } catch(e) {
     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) {