JWPlayer - Listener.html

<script>
//TODO: Anyone using this script will likely want to extend. This is a guide to get started

(function(dataLayer){
  var i = 0;
  //array of percentages at which progress notifications are pushed to the dataLayer
  var markers = [10,25,50,75]; //adjust these values if you want different progress reports
  var playersMarkers = [];

  function findObjectIndexById(haystack, key, needle) {
    for (var i = 0; i < haystack.length; i++) {
      if (haystack[i][key] == needle) {
        return i;
      }
    }
    return null;
  }
  //Function call to push to dataLayer, passing in current scope of this, 
  // the eventType value and the eventInteraction value for the DL push
  function eventToDataLayer (thisObject, eventType, eventInteraction) {
    var eventName;
    if (thisObject.getPlaylistItem().title) {
      eventName = thisObject.getPlaylistItem().title;
    } else {
      eventName = 'not set';
    }
    //TODO: Be sure to create additional Data Layer Variables to reference the keys in our dataLayer model below
    //      You can use these additional variables as custom dimensions or in your GA Event Tags as labels
    //      This model can be extended following the JW Player JS API reference guide to meet your needs
    dataLayer.push({
      event: eventType,
      jwp_player_id: thisObject.id,
      jwp_video_name: eventName, // DL Variable: JWPlayer - DL - Video Name
      jwp_interaction: eventInteraction, // DL Variable: JWPlayer - DL - Interaction
      jwp_video_url: thisObject.getPlaylistItem().file,
      jwp_duration: thisObject.getDuration(),
      jwp_width: thisObject.getWidth(),
      jwp_height: thisObject.getHeight(),
      jwp_position: thisObject.getPosition(),
      jwp_resolutions: [].map.call(thisObject.getQualityLevels(), function(obj) { return obj.label;}),
      jwp_volume: thisObject.getVolume(),
      jwp_player_type: thisObject.renderingMode
    });
  }

//loops through all JWPlayers on the page
  while (window.jwplayer(i).id) {
    var player = window.jwplayer(i++);

    //Pushes an object of player.id and progress markers to the array playersMarkers
    playersMarkers.push({
      'id': player.id,
      'markers': []
    });
    
  //TODO: You can add other API event listeners like bufferChange, buffer, idle, seek, seeked, mute, etc...
  //      These are some 
    player.on('setupError',
      function(e) {
        eventToDataLayer (this, 'setup-error', e.message); 
      }
    );

    player.on('play',
          function(e){
            var playResume ;
            if (this.getPosition() < 2) {
              playResume = 'Play';
            } else {
              playResume = 'Resume';
            }
            eventToDataLayer (this, 'playback-play', playResume);
          }
        );

    player.on('pause',
      function(e){
        eventToDataLayer (this, 'playback-pause', 'Pause');
      }
    );

    player.on('complete',
      function(e){
        eventToDataLayer (this, 'playback-complete', 'Complete');
      }
    );

    player.on('time',
      function(e){
        var percentPlayed = Math.floor(e.position*100/e.duration);
        var playerMarkerIndex = findObjectIndexById(playersMarkers,'id',this.id); 
        if(markers.indexOf(percentPlayed)>-1 && playersMarkers[playerMarkerIndex].markers.indexOf(percentPlayed)==-1)
          {
          playersMarkers[playerMarkerIndex].markers.push(percentPlayed);
          eventToDataLayer (this, 'Progress', 'Progress ' + percentPlayed + '%');
        }
      }
      );

    player.on('playlistItem',
      function(e) {
        var playerMarkerIndex = findObjectIndexById(playersMarkers,'id',this.id);
        playersMarkers[playerMarkerIndex].markers = [];
        eventToDataLayer (this, 'playlist-item','Playlist item number: ' + (e.index+1));
      }
    );

    player.on('error',
      function(e){
        eventToDataLayer (this, 'playback-error', e.message); 
      }
    );
    
    // TODO: Add more listeners here. Use the JW Player JS API as a reference
    
  }
})(window.dataLayer = window.dataLayer || []);
</script>