Timing Details Extension

[#1]

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