Here's some starter code to help anyone interested get started. You'll of course need to modify this to fit your use case and naming conventions. I don't work for Tealium so use at your own-risk.
Important note: there's a timing issue so I don't recommend trying to put this all in one pre-loader extension. The first code block loads the Vimeo API script, but the script needs to be fully loaded on the page before you can create the player object on the iframe. Youtube handles this with onYouTubeIframeAPIReady() which ensures the API is ready before creating the object, but Vimeo doesn't appear to have a similar method. I'm sure someone smarter than me can figure out a way to delay this (probably using a Promise or eventListener), but we decided to just wrap it in a setTimeout.
You could also try splitting this up by putting the script to load the API in a preloader and move the rest of the code into a JavaScript extension.
Good luck!
Edit 11/11/19: we refactored our snippet
https://gist.github.com/jtokib/b1272c6b84e7c85f3abab81b21188a68
//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]);
}
//Create the data object we pass on each utag.link call
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);
Expand/CollapseMenu
