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 1748.

JavaScript
nebula.scrollDepth = function(){
    if ( window.performance ){ //Safari 11+
        var scrollReady = performance.now();

        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 periodically if the user has reached the bottom of the page
            nebula.throttle(function(){
                if ( (nebula.dom.window.height()+nebula.dom.window.scrollTop()) >= nebula.dom.document.height() ){ //If user has reached the bottom of the page
                    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');
                }
            }, 1000, 'scroll depth');
        };
        window.addEventListener('scroll', scrollDepthHandler); //"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.
}