How to Enable Navigation Timing data

[#1]

Introduction

The Navigation Timing API provides data that can be used to measure the performance of a website. Unlike other JavaScript-based mechanisms that have been used for the same purpose, this API can provide end-to-end latency data that can be more useful and accurate.

Enablement

First, update your Tealium Collect template to the latest version of the template (tag version 20064.20160308).

Second, set the sampling rate for the percentage of traffic you'd like to gather information. Note, the sampling rate is exclusive to the event data being collected, meaning if sampling is set to 5% Tealium will still trigger 100% of event data to AudienceStream, EventStore, and/or EventDB (Tealium Collect).

Third, Save/Publish the update.

The Data

First, the following data points are captured within the Tealium Collect tag:

• "timing.domain" = The domain where the timing data was collected
• "timing.pathname" = The path name (web page) where the timing data was collected
• "timing.query_string" = The query string value in URL where the timing data was collected
• "timing.timestamp" = The date/time when the timing data was collected (epoch time of client's web browser)
• "timing.dns" = t.domainLookupEnd - t.domainLookupStart
• "timing.connect" = t.connectEnd - t.connectStart
• "timing.response" = t.responseEnd - t.responseStart
• "timing.dom_loading_to_interactive" = t.domInteractive - t.domLoading
• "timing.dom_interactive_to_complete" = t.domComplete - t.domInteractive
• "timing.load" = t.loadEventEnd - t.loadEventStart
• "timing.time_to_first_byte" = t.responseStart - t.connectEnd
• "timing.front_end" = t.loadEventStart - t.responseEnd
• "timing.fetch_to_response" = t.responseStart - t.fetchStart
• "timing.fetch_to_complete" = t.domComplete - t.fetchStart
• "timing.fetch_to_interactive" = t.domInteractive - t.fetchStart

Second, the data is stored in Local Storage in key "tealium_timing".

Third, on the next page load, Local Storage is read and the data is added to the Data Layer.

We can’t send the Navigation TIming data on the same page event call because we don’t have all the data; for example, we don’t have timing data for the load event because most likely we’ve fired the Collect tag on the "interactive" event. This means we would have to trigger another call, effectively doubling, which effects the number of events set in the contract. Therefore, we send on the next pageview to prevent a negative effect to the event count of the contract.

EventDB Requirements

TiQ > Data Layer > Click the "Add Data Source" drop-down > Bulk Import Data Sources from CSV > Copy/Paste the following:

"timing.domain","UDO Variable","",www.tealiumecommerce.com
"timing.pathname","UDO Variable","","/"
"timing.query_string","UDO Variable","",""
"timing.timestamp","UDO Variable","",1459274326166
"timing.dns","UDO Variable","",75
"timing.connect","UDO Variable","",1
"timing.response","UDO Variable","",1
"timing.dom_loading_to_interactive","UDO Variable","",3987
"timing.dom_interactive_to_complete","UDO Variable","",3570
"timing.load","UDO Variable","",2
"timing.time_to_first_byte","UDO Variable","",1002
"timing.front_end","UDO Variable","",7570
"timing.fetch_to_response","UDO Variable","",1082
"timing.fetch_to_complete","UDO Variable","",8653
"timing.fetch_to_interactive","UDO Variable","",5083

This will declare the data sources so that Visualization tools have access to the data. This step is not needed for EventStore.

Here is a sample report where you can see how long pages are taking to load. For example, if you have requirements that pages must load in under 3 seconds (3000 milliseconds) then you know the "Chelsa Tee" and "Tealium Ecommerce Demo" pages need improvement.

 

Resources

• W3C Navigation Timing 
• Navigation Timing API
• How TripAdvisor uses HTML5 Navigation Timing to investigate how a users' phone actually loads a website