Back

Overview

This extension is a quick put-together for tracking various loading times for a page. From the moment a user hits the enter key on a url bar, we can start looking at how long things take to load such as redirect times, dom load times, and more. This extension is an attempt to gather such in a simple manner.

 

To start, add the following five data sources:

_timing_url

_timing_domain_lookup

_timing_start_dom

_timing_end_dom

_timing_end_load

Then, paste the code attached into a javascript extension. Map the desired data sources to a tag. For SiteCatalyst, you might select 5 props so you can correlate data. In SC, you would then start seeing data on the various data points:

 

---DOM Start---

1-25ms: 100 views

25-50ms: 25 views

50-75ms: 13 views

and so forth

 

For what each data source provides and a further description, see the attached tooltips.txt file.

 

As a side note, you can easily change the buckets by altering the following function to your liking:

 

 

g = function(number) {
            // lookup for bucket a number fits in
            if (number < 25) return "0-25ms";
            if (number < 50) return "25-50ms";
            if (number < 100) return "50-100ms";
            if (number < 150) return "100-150ms";
            if (number < 250) return "150-250ms";
            if (number < 500) return "250-500ms";
            if (number < 750) return "500-750ms";
            if (number < 1000) return "750ms-1s";
            if (number < 1500) return "1-1.5s";
            if (number < 2000) return "1.5-2s";
            if (number < 3000) return "2-3s";
            return ">3s";
        }

If this ever was implemented as an extension, it would probably look something like a lookup table where you could add/remove and edit bucket values.

Code Update Notes 

  • 2014-06-23: Added cookie deletion after reading values so other pages won't report false data accidentally.
  • 2015-08-26: Added some additional checks to ensure the performance variable exists (as some older browsers don't support it).
  • 2016-09-26: Modified extension to have 5 second timeout and to update to allow on pages that loads Tealium later than usual.

 

Code To Paste

(function (a,b,c,g,q,r,t,v,u,k) {
    // only do on page loads
    if (a == "view" && typeof performance != "undefined" && typeof performance == "object" && performance.timing) {
        q = utag.loader.SC;
        r = utag.loader.RC;
        g = function(number) {
            // lookup for bucket a number fits in
            if (number < 25) return "0-25ms";
            if (number < 50) return "25-50ms";
            if (number < 100) return "50-100ms";
            if (number < 150) return "100-150ms";
            if (number < 250) return "150-250ms";
            if (number < 500) return "250-500ms";
            if (number < 750) return "500-750ms";
            if (number < 1000) return "750ms-1s";
            if (number < 1500) return "1-1.5s";
            if (number < 2000) return "1.5-2s";
            if (number < 3000) return "2-3s";
            return ">3s";
        }
        v = function() {
            // make sure defined in scope (precaution)
            if (!q) {q=utag.loader.SC;}
            // make sure performance.timing exists so we can use it
            if (performance && performance.timing) {
                t = performance.timing;
                q("utag_main",{"_timing_url":document.URL,
                               "_timing_dp1":g(t.domainLookupStart-t.navigationStart),
                               "_timing_dp2":g(t.domLoading-t.navigationStart),
                               "_timing_dp3":g(t.domComplete-t.navigationStart),
                               "_timing_dp4":g(t.loadEventEnd-t.navigationStart)});
            } else {
                utag.DB("timing stats not available");
            }
        };
        
        // insert previous page values into udo
        u = r("utag_main");
        if (u["_timing_url"]) {
            b['_timing_url'] = u["_timing_url"];
            b['_timing_domain_lookup'] = u["_timing_dp1"];
            b['_timing_start_dom'] = u["_timing_dp2"];
            b['_timing_end_dom'] = u["_timing_dp3"];
            b['_timing_end_load'] = u["_timing_dp4"];
            
            //delete cookie values as to not falsely report elsewhere
            for(k in u) {
                c = {};
                c[k] = "";
                if (k.indexOf('_timing_') === 0)
                    utag.loader.SC("utag_main",c,"d");
            }
        }
        
        // check to see if already loaded, else wait
        (function check(tL){
            if (tL > 0) {
                if (typeof performance != "undefined" && typeof performance.timing != "undefined" && typeof performance.timing.loadEventEnd != "undefined" && performance.timing.loadEventEnd != 0)
                    v();
                else
                    setTimeout(function(){check(tL-100)},100);
            }
        })(5000);
    }
})(a,b);

Sample Mapping Setup

mapping.png

Tooltips

Timing Details

Mini Description:
    This extension gathers information about timing on the page from the moment the user hits enter on the url bar.

Additional Extension Info:
    This extension gathers information about timing on the page from the moment the user hits enter on the url bar. After the page is fully loaded, there are key data points available so you can see how long pages take to load. This extension outputs 5 variables:
        _timing_url: the url associated with the timing details. This outputs the previous page's information to track in something like SiteCatalyst.
        _timing_domain_lookup: the first data point from the moment the user initiates a page request until the actual domain request (after redirects and caching).
        _timing_start_dom: the next data point - until the dom starts loading.
        _timing_end_dom: the next data point - until the dom is done loading.
        _timing_end_load: the last data point - the page is completely loaded.

 

Please note that the Tealium Collect Tag automatically collects timing details. To learn more about this tag, please follow these links: