d3trax
11/2/2012 - 11:49 AM

Track Navigation Timing data from the Browser in Google Analytics

Track Navigation Timing data from the Browser in Google Analytics

var NAMESPACE = NAMESPACE || {};
NAMESPACE.gaSpeedTrackingJsLoadStart = (new Date()).getTime();

/* All JS ... */

/* Encapsulate "use strict" to this part of the code, while others can still be unstrict. */
(function () {
    "use strict";

    /* Track JS Parsing time (start was set at the Beginning of the JS) */
    NAMESPACE.gaSpeedTrackingJsLoadEnd = (new Date()).getTime();
    if (parseInt(NAMESPACE.gaSpeedTrackingJsLoadStart,10)>0 && parseInt(NAMESPACE.gaSpeedTrackingJsLoadEnd,10)>0) {
        NAMESPACE.gaSpeedTrackingJsLoadDuration = parseInt(NAMESPACE.gaSpeedTrackingJsLoadEnd,10) - parseInt(NAMESPACE.gaSpeedTrackingJsLoadStart,10);
        // 0-60000: prevent ridiculous numbers from false calculation
        if (NAMESPACE.gaSpeedTrackingJsLoadDuration>0 && NAMESPACE.gaSpeedTrackingJsLoadDuration<60000) {
            var _gaq = window._gaq || [];
            _gaq.push(['_trackTiming', 'Navigation Timing', 'JavaScript Parsing', NAMESPACE.gaSpeedTrackingJsLoadDuration]);
        }
    }


    /* Calculate and track Browser's Performance Timing */
    NAMESPACE.getNavigationTimingStats = function () {
        var timing = window.performance.timing;
        return {
            dns:timing.domainLookupEnd - timing.domainLookupStart,
            connect:timing.connectEnd - timing.connectStart,
            ttfb:timing.responseStart - timing.connectEnd,
            basePage:timing.responseEnd - timing.responseStart,
            frontEnd:timing.loadEventStart - timing.responseEnd, 
			domContentLoadedEvent:timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart,
			windowLoadEvent:timing.loadEventEnd - timing.loadEventStart,
			domInteractive:timing.domInteractive - timing.domLoading,
			domComplete:timing.domComplete - timing.domLoading,
			domCompleteToOnload: timing.loadEventStart - timing.domComplete
        };
    };
	
    NAMESPACE.trackNavigationTiming = function () {
        if (window.performance && window.performance.timing) {
            var _gaq = window._gaq || [];
            var ntStats = NAMESPACE.getNavigationTimingStats();

            // 0-60000: prevent ridiculous numbers from false calculation
            if (ntStats.dns > 0 && ntStats.dns < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'DNS', ntStats.dns]);
            }
            if (ntStats.connect > 0 && ntStats.connect < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'Connect', ntStats.connect]);
            }
            if (ntStats.ttfb > 0 && ntStats.ttfb < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'TTFB', ntStats.ttfb]);
            }
            if (ntStats.basePage > 0 && ntStats.basePage < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'BasePage', ntStats.basePage]);
            }
            if (ntStats.frontEnd > 0 && ntStats.frontEnd < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'FrontEnd', ntStats.frontEnd]);
            }
            if (ntStats.domContentLoadedEvent > 0 && ntStats.domContentLoadedEvent < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'domReady Events', ntStats.domContentLoadedEvent]);
            }
            if (ntStats.windowLoadEvent > 0 && ntStats.windowLoadEvent < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'windowLoad Events', ntStats.windowLoadEvent]);
            }			
            if (ntStats.domInteractive > 0 && ntStats.domInteractive < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'domInteractive', ntStats.domInteractive]);
            }
            if (ntStats.domComplete > 0 && ntStats.domComplete < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'domComplete', ntStats.domComplete]);
            }
            if (ntStats.domCompleteToOnload > 0 && ntStats.domCompleteToOnload < 60000) {
                _gaq.push(['_trackTiming', 'Navigation Timing', 'domCompleteToOnload', ntStats.domCompleteToOnload]);
            }

        }
    };

    $(window).load(function () {
        "use strict";
        NAMESPACE.trackNavigationTiming();
    });

}());