Skip to Content

nebulaYoutubeStateChange()

Record various datapoints when the user changes the Youtube video’s play state.

JavaScript January 10, 2018

Usage

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

Additional Notes

This function checks for the video to play, pause, or end.

When played, nebula_playing_video is triggered.

When paused, nebula_paused_video is triggered.

When ended, nebula_finished_video is triggered.

This function also triggers nebula_engaged_video when the user has watched enough of the video to be considered engaged.

Source File

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

Note: This function contains 1 to-do comment.

JavaScript
function nebulaYoutubeStateChange(e){
    var thisVideo = nebula.videos[nebula.getYoutubeID(e.target)];
    thisVideo.title = nebula.getYoutubeTitle(e.target);
    thisVideo.current = e.target.getCurrentTime();
    thisVideo.percent = thisVideo.current/thisVideo.duration;

    //Playing
    if ( e.data === YT.PlayerState.PLAYING ){
        var thisEvent = {
            category: 'Videos',
            action: ( nebula.isInView(jQuery(thisVideo.element)) )? 'Play' : 'Play (Not In View)',
            title: thisVideo.title,
            autoplay: thisVideo.autoplay
        };

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

        if ( thisVideo.autoplay ){
            thisEvent.action += ' (Autoplay)';
        } else {
            jQuery(thisVideo.element).addClass('playing');
        }

        nebula.dom.document.trigger('nebula_event', thisEvent);
        ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title);
        nebula.nv('event', 'Video Play Began: ' + thisEvent.title);
        nebula.dom.document.trigger('nebula_playing_video', thisVideo);
        var pauseFlag = true;
        var updateInterval = 500;

        var youtubePlayProgress = setInterval(function(){
            thisVideo.current = e.target.getCurrentTime();
            thisVideo.percent = thisVideo.current/thisVideo.duration;
            thisVideo.watched = thisVideo.watched+(updateInterval/1000);
            thisVideo.watchedPercent = (thisVideo.watched)/thisVideo.duration;

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

                    ga('set', nebula.analytics.dimensions.videoWatcher, thisEvent.action);
                    nebula.dom.document.trigger('nebula_event', thisEvent); //@todo "Nebula" 0: This needs the new nebula_event trigger with thisEvent object
                    ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.title, {'nonInteraction': true});
                    nebula.nv('event', 'Video Engaged: ' + thisEvent.title);
                    thisVideo.engaged = true;
                    nebula.dom.document.trigger('nebula_engaged_video', thisVideo);
                }
            }
        }, updateInterval);
    }

    //Ended
    if ( e.data === YT.PlayerState.ENDED ){
        jQuery(thisVideo.element).removeClass('playing');
        clearInterval(youtubePlayProgress);

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

        if ( thisVideo.autoplay ){
            thisEvent.action += ' (Autoplay)';
        }

        ga('set', nebula.analytics.metrics.videoCompletions, 1);
        ga('set', nebula.analytics.metrics.videoPlaytime, thisEvent.playTime);
        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});
        ga('send', 'timing', thisEvent.category, thisEvent.action, thisEvent.progress, thisEvent.title);
        nebula.nv('event', 'Video Ended: ' + thisEvent.title);
        nebula.dom.document.trigger('nebula_ended_video', thisVideo);

    //Paused
    } else {
        setTimeout(function(){ //Wait 1 second because seeking will always pause and automatically resume, so check if it is still playing a second from now
            if ( e.target.getPlayerState() == 2 && pauseFlag ){ //This must use getPlayerState() since e.data is not actually "current" inside of this setTimeout(). Paused = 2
                jQuery(thisVideo.element).removeClass('playing');
                clearInterval(youtubePlayProgress);

                var thisEvent = {
                    category: 'Videos',
                    action: 'Paused',
                    playTime: Math.round(thisVideo.watched),
                    percent: Math.round(thisVideo.percent*100),
                    progress:  thisVideo.current*1000,
                    title: thisVideo.title,
                    autoplay: thisVideo.autoplay
                };

                ga('set', nebula.analytics.metrics.videoPlaytime, Math.round(thisVideo.watched));
                ga('set', nebula.analytics.dimensions.videoPercentage, Math.round(thisVideo.percent*100));
                ga('set', nebula.analytics.dimensions.videoWatcher, thisEvent.action);

                if ( !thisVideo.pausedYet ){
                    ga('send', 'event', thisEvent.category, 'First Pause', thisEvent.title);
                    thisVideo.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, thisEvent.progress, thisEvent.title);
                nebula.nv('event', 'Video Paused: ' + thisEvent.title);
                nebula.dom.document.trigger('nebula_paused_video', thisVideo);
                pauseFlag = false;
            }
        }, 1000);
    }
}

Override

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

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