- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
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.
// 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);
---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"; }
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
Copyright All Rights Reserved © 2008-2021