Vimeo Tracking for Tealium

vimeoTealiumTracking.js

//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);