Skip to content

Instantly share code, notes, and snippets.

@jtokib

jtokib/vimeoTealiumTracking.js Secret

Last active Nov 11, 2019
Embed
What would you like to do?
Vimeo Tracking for Tealium
//Create global player array
window.vimeoMediaObjs = [];
//Loads vimeo API on the page
var vimapi = document.createElement('script');
vimapi.src = "https://player.vimeo.com/api/player.js";
var scriptref = document.getElementsByTagName('script')[0];
scriptref.parentNode.insertBefore(vimapi, scriptref);
//Wraps in setTimeout so above API is ready before we enter code block
setTimeout(function() {
//find all vimeo iframes
var elements = $('iframe[src*="vimeo"]');
//loop through all the iframes and push to global array
for (var i = 0; i < elements.length; i++) {
vimeoMediaObjs.push(elements[i]);
}
var makeLink = function(eventAction, duration, id, title){
return {
event_category: "Video",
event_action: eventAction,
event_label: title,
event_name: "video_tracking",
is_engagement_event: "1",
video_platform: "Vimeo",
video_duration: duration,
video_id: id
};
}
//function that tracks each player event
var initVimeoCriteria = function(mediaIdx) {
var percentWatched, videoId, videoTitle;
//Get Video ID and Title - promise fulfilled before user interaction
vimeoMediaObjs[mediaIdx].getVideoId().then(function(id) {
videoId = id.toString();
vimeoMediaObjs[mediaIdx].getVideoTitle().then(function(title) {
videoTitle = title;
});
});
//Track tag fires on Play event
vimeoMediaObjs[mediaIdx].on('play', function(data) {
var duration = data.duration;
var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8);
utag.link(makeLink("Video Start", durationFormatted, videoId, videoTitle));
});
//Track tag fires on pause event
vimeoMediaObjs[mediaIdx].on('pause', function(data) {
var duration = data.duration;
var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8);
utag.link(makeLink("Video Paused", durationFormatted, videoId, videoTitle));
});
//Track tag fires on ended event
vimeoMediaObjs[mediaIdx].on('ended', function(data) {
var duration = data.duration;
var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8);
utag.link(makeLink("Video Complete", durationFormatted, videoId, videoTitle));
});
//Track Milestones -- change percent watched values in array if needed
var milestones = [25, 50, 75]
var milestoneReached = []
vimeoMediaObjs[mediaIdx].on('timeupdate', function(data) {
percentWatched = Math.round(data.percent * 100);
for (var i = 0; i < milestones.length; i++) {
var currentMilestone = milestones[i];
if (milestoneReached.length <= i && percentWatched > currentMilestone) {
var duration = data.duration;
var durationFormatted = new Date(1000 * duration).toISOString().substr(11, 8);
utag.link(makeLink(percentWatched - 1 + "% Viewed", durationFormatted, videoId, videoTitle))
milestoneReached.push('1');
}
}
});
}
//Create vimeo player on each array index
for (var k = 0; k < vimeoMediaObjs.length; k++) {
//Create the player
vimeoMediaObjs[k] = new Vimeo.Player(vimeoMediaObjs[k]);
//initialize the tracking function
initVimeoCriteria(k);
}
}, 500);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment