Skip to Content

createVimeoPlayers()

Add detected Vimeo videos to the Nebula players object.

JavaScript June 10, 2017

Usage

This function runs automatically, so it is not called manually. Is this incorrect?

Additional Notes

This function looks for any iframe with a src that contains “vimeo”.

Source File

Located in /assets/js/nebula.js on line 4917.

JavaScript
nebula.createVimeoPlayers = function(){
    jQuery('iframe[src*="vimeo"]').each(function(i){ //This is not finding lazy loaded videos
        if ( !jQuery(this).hasClass('ignore') ){ //Use this class to ignore certain videos from tracking
            var id = jQuery(this).attr('data-video-id') || jQuery(this).attr('data-vimeo-id') || jQuery(this).attr('id') || false;
            if ( !id ){
                if ( jQuery(this).attr('src').indexOf('player_id') > -1 ){
                    id = jQuery(this).attr('src').split('player_id=').pop().split('&')[0]; //Use the player_id parameter. Note: This is no longer used by the Vimeo API!
                } else {
                    id = jQuery(this).attr('src').split('/').pop().split('?')[0]; //Grab the ID off the end of the URL (ignoring query parameters)
                }

                if ( id && !parseInt(id) ){ //If the ID is a not number try to find a number in the iframe src
                    id = /\d{6,}/g.exec(jQuery(this).attr('src'))[0];
                }

                jQuery(this).attr('id', id);
            }

            if ( typeof nebula.videos[id] === 'object' ){ //If this video is already being tracked ignore it
                return; //Continue the loop
            }

            //Fill in the data object here
            nebula.videos[id] = {
                player: new Vimeo.Player(jQuery(this)),
                element: jQuery(this),
                platform: 'vimeo', //The platform the video is hosted using.
                autoplay: jQuery(this).attr('src').indexOf('autoplay=1') > 0, //Look for the autoplay parameter in the iframe src.
                id: id,
                current: 0, //The current position of the video. Units: Seconds
                percent: 0, //The percent of the current position. Multiply by 100 for actual percent.
                engaged: false, //Whether the viewer has watched enough of the video to be considered engaged.
                seeker: false, //Whether the viewer has seeked through the video at least once.
                seen: [], //An array of percentages seen by the viewer. This is to roughly estimate how much was watched.
                watched: 0, //Amount of time watching the video (regardless of seeking). Accurate to 1% of video duration. Units: Seconds
                watchedPercent: 0, //The decimal percentage of the video watched. Multiply by 100 for actual percent.
                pausedYet: false, //If this video has been paused yet by the user.
            };

            //Title
            nebula.videos[id].player.getVideoTitle().then(function(title){
                nebula.videos[id].title = title; //The title of the video
            });

            //Duration
            nebula.videos[id].player.getDuration().then(function(duration){
                nebula.videos[id].duration = duration; //The total duration of the video. Units: Seconds
            });

            //Play
            nebula.videos[id].player.on('play', function(e){
                var thisEvent = {
                    category: 'Videos',
                    action: ( nebula.isInView(jQuery(nebula.videos[id].element)) )? 'Play' : 'Play (Not In View)',
                    title: nebula.videos[id].title,
                    autoplay: nebula.videos[id].autoplay
                };

                ga('set', nebula.analytics.metrics.videoStarts, 1);
                ga('set', nebula.analytics.dimensions.videoWatcher, 'Started');

                if ( nebula.videos[id].autoplay ){
                    thisEvent.action += ' (Autoplay)';
                } else {
                    nebula.videos[id].element.addClass('playing');
                }

                nebula.dom.document.trigger('nebula_event', thisEvent);
                ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title);
                nebula.crm('event', 'Video Play Began: ' + thisEvent.title);
                nebula.dom.document.trigger('nebula_playing_video', nebula.videos[id].title);
            });

            //Time Update
            nebula.videos[id].player.on('timeupdate', function(e){
                nebula.videos[id].duration = e.duration;
                nebula.videos[id].current = e.seconds;
                nebula.videos[id].percent = e.percent;

                //Determine watched percent by adding current percents to an array, then count the array!
                nowSeen = Math.ceil(nebula.videos[id].percent*100);
                if ( nebula.videos[id].seen.indexOf(nowSeen) < 0 ){
                    nebula.videos[id].seen.push(nowSeen);
                }
                nebula.videos[id].watchedPercent = nebula.videos[id].seen.length;
                nebula.videos[id].watched = (nebula.videos[id].seen.length/100)*nebula.videos[id].duration; //Roughly calculate time watched based on percent seen

                if ( nebula.videos[id].watchedPercent > 25 && !nebula.videos[id].engaged ){
                    if ( nebula.isInView(jQuery(nebula.videos[id].element)) ){
                        var thisEvent = {
                            category: 'Videos',
                            action: ( nebula.videos[id].autoplay )? 'Engaged' : 'Engaged (Autoplay)',
                            title: nebula.videos[id].title,
                            autoplay: nebula.videos[id].autoplay
                        };

                        ga('set', nebula.analytics.dimensions.videoWatcher, thisEvent.action);
                        nebula.dom.document.trigger('nebula_event', thisEvent);
                        ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title, {'nonInteraction': true});
                        nebula.crm('event', 'Video Engaged: ' + thisEvent.title);
                        nebula.videos[id].engaged = true;
                        nebula.dom.document.trigger('nebula_engaged_video', nebula.videos[id].title);
                    }
                }
            });

            //Pause
            nebula.videos[id].player.on('pause', function(e){
                jQuery(this).removeClass('playing');

                var thisEvent = {
                    category: 'Videos',
                    action: 'Paused',
                    playTime: Math.round(nebula.videos[id].watched),
                    percent: Math.round(e.percent*100),
                    title: nebula.videos[id].title,
                    autoplay: nebula.videos[id].autoplay
                };

                ga('set', nebula.analytics.dimensions.videoWatcher, thisEvent.action);
                ga('set', nebula.analytics.metrics.videoPlaytime, thisEvent.playTime);
                ga('set', nebula.analytics.dimensions.videoPercentage, thisEvent.percent);

                if ( !nebula.videos[id].pausedYet && !nebula.videos[id].seeker ){ //Only capture first pause if they didn't seek
                    ga('send', 'event', thisEvent.category, 'First Pause', thisEvent.title);
                    nebula.videos[id].pausedYet = true;
                }

                nebula.dom.document.trigger('nebula_event', thisEvent);
                ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title);
                ga('send', 'timing', thisEvent.category, thisEvent.action, Math.round(e.seconds*1000), thisEvent.title);
                nebula.crm('event', 'Video Paused: ' + thisEvent.title);
                nebula.dom.document.trigger('nebula_paused_video', nebula.videos[id]);
            });

            //Seeked
            nebula.videos[id].player.on('seeked', function(e){
                var thisEvent = {
                    category: 'Videos',
                    action: 'Seek',
                    position: e.seconds,
                    title: nebula.videos[id].title,
                    autoplay: nebula.videos[id].autoplay
                };

                nebula.dom.document.trigger('nebula_event', thisEvent);
                ga('set', nebula.analytics.dimensions.videoWatcher, thisEvent.action);
                ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title + ' [to: ' + thisEvent.position + ']');
                nebula.crm('event', 'Video Seeked: ' + thisEvent.title);
                nebula.videos[id].seeker = true;
                nebula.dom.document.trigger('nebula_seeked_video', nebula.videos[id]);
            });

            //Ended
            nebula.videos[id].player.on('ended', function(e){
                jQuery(this).removeClass('playing');

                var thisEvent = {
                    category: 'Videos',
                    action: ( nebula.isInView(jQuery(nebula.videos[id].element)) )? 'Ended' : 'Ended (Not In View)',
                    title: nebula.videos[id].title,
                    playTime: Math.round(nebula.videos[id].watched),
                    progress: Math.round(nebula.videos[id].watched*1000),
                    autoplay: nebula.videos[id].autoplay
                };

                ga('set', nebula.analytics.metrics.videoCompletions, 1);
                ga('set', nebula.analytics.metrics.videoPlaytime, thisEvent.playTime);
                ga('set', nebula.analytics.dimensions.videoWatcher, thisEvent.action);

                if ( nebula.videos[id].autoplay ){
                    thisEvent.action += ' (Autoplay)';
                }

                nebula.dom.document.trigger('nebula_event', thisEvent);
                ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title, {'nonInteraction': true});
                ga('send', 'timing', thisEvent.category, thisEvent.action, thisEvent.progress, thisEvent.title); //Roughly amount of time watched (Can not be over 100% for Vimeo)
                nebula.crm('event', 'Video Ended: ' + thisEvent.title);
                nebula.dom.document.trigger('nebula_ended_video', nebula.videos[id]);
            });

            nebula.dom.document.trigger('nebula_vimeo_player_created', nebula.videos[id]);
        }
    });

    if ( typeof videoProgress === 'undefined' ){
        var videoProgress = {};
    }
};

Override

To override or disable this JavaScript function, simply redeclare it with the exact same function name.

JavaScript
nebula.createVimeoPlayers = function(){
    //Write your own code here, leave it blank, or return false.
}