Skip to Content

scrollDepth()

Initialize scroll depth tracking for basic page engagement data.

JavaScript June 12, 2017

Usage

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

Additional Notes

This function listens for (and times) the initial scroll by the user as well as when (if) the user reaches the end of the page. To supplement this data, implement MaxScroll using the autotrack.js library.

Source File

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

JavaScript
nebula.scrollDepth = function(){
    if ( window.performance ){ //Safari 11+
        var scrollReady = performance.now();
        var reachedBottom = false; //Flag for optimization after detection is finished
        var excessiveScrolling = false; //Flag for optimization after detection is finished
        var lastScrollCheckpoint = nebula.dom.window.scrollTop(); //Set a checkpoint of the current scroll distance to subtract against later
        var totalScrollDistance = 0;
        var excessiveScrollThreshold = nebula.dom.document.height()*2; //Set the threshold for an excessive scroll distance

        var scrollDepthHandler = function(){
            //Only check for initial scroll once
            nebula.once(function(){
                nebula.scrollBegin = performance.now()-scrollReady; //Calculate when the first scroll happens
                if ( nebula.scrollBegin > 250 ){ //Try to avoid autoscrolls on pageload
                    var thisEvent = {
                        category: 'Scroll Depth',
                        action: 'Began Scrolling',
                        scrollStart: nebula.dom.body.scrollTop() + 'px',
                        timeBeforeScrollStart: Math.round(nebula.scrollBegin)
                    };
                    thisEvent.label = 'Initial scroll started at ' + thisEvent.scrollStart;
                    nebula.dom.document.trigger('nebula_event', thisEvent);
                    ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.scrollStart, thisEvent.scrollStartTime, {'nonInteraction': true}); //Event value is time until scrolling.
                }
            }, 'begin scrolling');

            //Check scroll distance periodically
            nebula.throttle(function(){
                //Total Scroll Distance
                if ( !excessiveScrolling ){
                    totalScrollDistance += Math.abs(nebula.dom.window.scrollTop() - lastScrollCheckpoint); //Increase the total scroll distance (always positive regardless of scroll direction)
                    lastScrollCheckpoint = nebula.dom.window.scrollTop(); //Update the checkpoint
                    if ( totalScrollDistance >= excessiveScrollThreshold ){
                        excessiveScrolling = true; //Set to true to disable excessive scroll tracking after it is detected

                        nebula.once(function(){
                            var thisEvent = {
                                category: 'Scroll Depth',
                                action: 'Excessive Scrolling',
                                label: 'User scrolled ' + excessiveScrollThreshold + 'px (or more) on this page.',
                            };
                            nebula.dom.document.trigger('nebula_event', thisEvent);
                            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.label, {'nonInteraction': true});
                        }, 'excessive scrolling');
                    }
                }

                //When user reaches the bottom of the page
                if ( !reachedBottom ){
                    if ( (nebula.dom.window.height()+nebula.dom.window.scrollTop()) >= nebula.dom.document.height() ){ //If user has reached the bottom of the page
                        reachedBottom = true;

                        nebula.once(function(){
                            var thisEvent = {
                                category: 'Scroll Depth',
                                action: 'Entire Page',
                                distance: nebula.dom.document.height(),
                                scrollEnd: performance.now()-(nebula.scrollBegin+scrollReady),
                            };

                            thisEvent.timetoScrollEnd = Math.round(thisEvent.scrollEnd);

                            nebula.dom.document.trigger('nebula_event', thisEvent);
                            ga('send', 'event', thisEvent.category, thisEvent.action, thisEvent.distance, thisEvent.timetoScrollEnd, {'nonInteraction': true}); //Event value is time to reach end
                            window.removeEventListener('scroll', scrollDepthHandler);
                        }, 'end scrolling');
                    }
                }

                //Stop listening to scroll after no longer necessary
                if ( reachedBottom && excessiveScrolling ){
                    window.removeEventListener('scroll', scrollDepthHandler); //Stop watching scrolling– no longer needed if all detections are true
                }
            }, 1000, 'scroll depth');
        };

        window.addEventListener('scroll', scrollDepthHandler); //Watch for scrolling ("scroll" is passive by default)
    }
};

Override

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

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