Last active
August 5, 2022 05:49
-
-
Save ryanpraski/96a0b31dda67fdc041824c222b307c2f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript"> | |
(function(dataLayer) { | |
var i = 0; | |
var jwpVideoIsPlaying = false; | |
//array of percentages at which progress notifications are pushed to the dataLayer | |
var markers = [10, 25, 50, 75, 90]; //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'; | |
} | |
//Set Viewablity Yes or No | |
if (thisObject.getViewable() == 1) { | |
var jwpViewable = "viewable" | |
} else { | |
var jwpViewable = "not viewable" | |
} | |
dataLayer.push({ | |
event: eventType, | |
jwp_player_id: thisObject.id, | |
jwp_video_name: eventName, // DL Variable: JWPlayer - DL - Video Name- not currently set on theCHIVE | |
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, | |
jwp_viewable: jwpViewable | |
}); | |
} | |
var t; | |
var player; | |
function checkForJwplayer() { | |
try { | |
if ((typeof window.jwplayer != 'undefined') && (typeof window.jwplayer(0).id != 'undefined')) { | |
//console.log('jwplayer found jwplayer with id'); | |
clearTimeout(t); | |
//loops through all JWPlayers on the page | |
while (window.jwplayer(i).id) { | |
player = window.jwplayer(i++); | |
//Pushes an object of player.id and progress markers to the array playersMarkers | |
//console.log('jwplayer found : ' + player.id.toString()); | |
playersMarkers.push({ | |
'id': player.id, | |
'markers': [] | |
}); | |
//JWP Event Listeners | |
player.on('setupError', | |
function(e) { | |
eventToDataLayer(this, 'jwp-setup-error', e.message); | |
} | |
); | |
player.on('play', | |
function(e) { | |
//console.log('tracking jwplayer play: ' + this.getPosition().toString()); | |
var playResume; | |
if ((this.getPosition() == 0) && !jwpVideoIsPlaying) { | |
playResume = 'Play'; | |
jwpVideoIsPlaying = true; | |
} else { | |
playResume = 'Resume'; | |
} | |
eventToDataLayer(this, 'jwp-playback-play', playResume); | |
} | |
); | |
player.on('pause', | |
function(e) { | |
//console.log('tracking jwplayer pause'); | |
eventToDataLayer(this, 'jwp-playback-pause', 'Pause'); | |
} | |
); | |
player.on('complete', | |
function(e) { | |
//console.log('tracking jwplayer complete'); | |
eventToDataLayer(this, 'jwp-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, 'jwp-progress', 'Progress ' + percentPlayed + '%'); | |
} | |
} | |
); | |
player.on('playlistItem', | |
function(e) { | |
var playerMarkerIndex = findObjectIndexById(playersMarkers, 'id', this.id); | |
playersMarkers[playerMarkerIndex].markers = []; | |
eventToDataLayer(this, 'jwp-playlist-item', 'Playlist item number: ' + (e.index + 1)); | |
} | |
); | |
player.on('error', | |
function(e) { | |
eventToDataLayer(this, 'jwp-playback-error', e.message); | |
} | |
); | |
// Event Listener for Sharing Click in video player | |
player.getPlugin('sharing').on('click', | |
function(e) { | |
dataLayer.push({ | |
event: 'jwp-share-click', | |
jwp_sharing_method: e.method | |
}); | |
} | |
); | |
// Event Listener for Related Video Play- click or autoplay at the end of the video | |
player.getPlugin('related').on('play', | |
function(e) { | |
//Set Discover Related Autoplay Yes or No | |
if (e.auto == 1) { | |
var jwpRelatedAutoPlay = "related autoplay" | |
} else { | |
var jwpRelatedAutoPlay = "related click to play" | |
} | |
dataLayer.push({ | |
event: 'jwp-related-play', | |
//jwp_related_item: e.item, //no meta data video name currently set so commented out | |
jwp_related_position: e.position, | |
jwp_related_autoplay: jwpRelatedAutoPlay | |
}); | |
} | |
); | |
} // End loop through players | |
} else { | |
t = setTimeout(checkForJwplayer, 100); | |
} | |
} catch (err) { | |
//console.log(err.message); | |
} | |
} | |
checkForJwplayer(); | |
})(window.dataLayer = window.dataLayer || []); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment