Overview

This article provides JavaScript code you can add within a JavaScript extension for tracking various loading times of 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 gathers such in a simple manner.

Steps

  1. Add the following five data sources:
    _timing_url
    _timing_domain_lookup
    _timing_start_dom
    _timing_end_dom
    _timing_end_load

  2. Paste the following code into a JavaScript extension.
    // 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.
    
    (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);
  3. Map the desired data sources to a tag.
    For example, for Adobe Analytics you might select 5 props so you can collect the data. You would then start recording data on the various data points:
    ---DOM Start---
    1-25ms: 100 views
    25-50ms: 25 views
    50-75ms: 13 views

    You can easily change the buckets by altering the following function to your liking. Note the following example:

    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";
            }

References

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

Tealium Collect Tag Setup Guide

EventStore Data Guide

 

 

Version history
Revision #:
11 of 11
Last update:
‎10-30-2020 10:20 AM
Updated by: