Last Updated: February 25, 2016
·
1.478K
· mwetmore

Video JWPlayer w/ Advanced GA tracking.

This is a code snippet to embed a JWPlayer and included Google Analytics events to send additional data to GA about your video. This example help you see where people are dropping off, how many make it fullscreen, how many initial plays, etc. This uses the JWPlayer Javascript API and the Google Analytics javascript. My GA events are using the old GA code, so you might need to tweaks those if you are using the new async ga code.

<script type="text/javascript">
var played = new Array();
played[0] = false;
var section = new Array();
section[0] = false;
section[1] = false;
section[2] = false;
section[3] = false;
section[4] = false;
section[5] = false;
</script>
<script type="text/javascript">
    jwplayer("container").setup({
        levels: [
        {file: '<filename>.mp4' },
        {file: '<filename>.webm', type: 'video/webm' },
       ],
       modes: [
        { type: 'html5', config: {'file': '<filename>.mp4','provider': 'video'}},
        { type: 'flash', src: '<path to player>player.swf' }
       ],
        "height": "272",
        "width": "480",
        "logo.hide": "true",
        "image": "<path to image>.png",
        "skin": "<path to jw skin>.zip",
       "plugins": {
              "gapro": {
                      "trackstarts": "true",
                     "trackpercentage": "true",
                     "trackseconds": "true",
                     "trackingobject": "pageTracker"
              },
              "captions-2": {
                     file: "<path to caption file>.srt",
                     color: "#ff6600",
                     state: false
              }
        },
        events: {
               onTime: function(event) {
                    if(event.position>=0&&event.position<=1&&played[0]==false){
                             pageTracker._trackEvent("Video 1", "Video Plays", "Video Plays");
                            played[0]=true;
                    }
                    if(event.position>=30&&event.position<=31&&section[0]==false){
                            pageTracker._trackEvent("Video 1", "30 Secs", "Viewer made it to 30 seconds");
                            section[0]=true;
                   }
                   if(event.position>=60&&event.position<=61&&section[1]==false){
                           pageTracker._trackEvent("Video 1", "60 Secs", "Viewer made it to 60 seconds");
                            section[1]=true;
                   }
                   if(event.position>=90&&event.position<=91&&section[2]==false){
                           pageTracker._trackEvent("Video 1", "90 Secs", "Viewer made it to 90 seconds");
                            section[2]=true;
                   }
                   if(event.position>=120&&event.position<=121&&section[3]==false){
                           pageTracker._trackEvent("Video 1", "120 Secs", "Viewer made it to 120 seconds");
                            section[3]=true;
                   }

               },
               onComplete: function(complete){
                            pageTracker._trackEvent("Video 1", "Complete", "Viewer made it to the end of the video.");
                             section[0]=false;
                             section[1]=false;
                             section[2]=false;
                             section[3]=false;
                },
                onFullscreen: function(fullscreen){
                            pageTracker._trackEvent("Video 1", "Fullscreen", "Viewer watched this in Fullscreen");
                 }
           }
    });
</script>

For more information on the JW Player Javascript API, please go here: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference/