Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment