Skip to Content

createVimeoPlayers()

Add detected Vimeo videos to the Nebula players object.

JavaScript February 7, 2021

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/modules/video.js on line 544.

No Hooks

This function does not have any filters or actions available. Request one?
JavaScript
nebula.createVimeoPlayers = function(){
    jQuery('iframe[src*="vimeo"]').each(function(){ //This is not finding lazy loaded videos
        if ( !jQuery(this).hasClass('ignore') ){ //Use this class to ignore certain videos from tracking
            let 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').includes('player_id') ){
                    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);
            }

            nebula.videos = nebula.videos || {}; //Always make sure this is defined

            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').includes('autoplay=1'), //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){
                let 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)) ){
                        let 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');

                let 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){
                let 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');

                let 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' ){
        let 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.
}