Send Load Time Details Into GA: Performance.Timing var + GTM

Background:

This will be a long read so hang in there. The standard page load time reports in Google Analytics are helpful in identifying pages that need an improvement. However, if you want to send additional page load time data, you absolutely can.

This method works for HTML sites that use a full round trip and not asynchronously loading technologies [AJAX, React, Angular JS] where the initial fist page load would load all the header/footer. onClick, the content would change without the need for a URL change.

performance.timing method in angular.JPG

This can be best explained by showing Performance.Timing var details. Performance timing vars are built-in into all major browsers to provide details on how long navigation requests and resource load requests take, breaking them down into:

Domain lookup
Redirect time
DOM load time
Content load time

If you want to lookup on these values, press F12 in Chrome to load up the dev console and type in “performance.timing”. This should show up:

If you’re also wondering why you’re seeing a 13 digit number instead of something in seconds, congrats! You are not alone. I had look this up. The number shown here is a specific point in time. Performance.timing uses UNIX time, which is the time (in milliseconds) that has elapsed since 1 Jan 1970 00:00:00 UTC (GMT), excluding leap seconds. Wiki page of UNIX time
Let’s use one example of UNIX time from the above performance.timing values. So:

connectStart: 1586974880682 // Wed Apr 15 2020 18:21:20
connectEnd: 1586974881274 // Wed Apr 15 2020 18:21:21

Firefox site has a good document on what all of the navigation timing metrics mean.

Using a online UNIX converter, we now now that it took 1 sec for connectEnd - connectStart metric.

You could apply this type of example across response time, content load time etc. If you continually did this across all pages, you would now know what’s happening with your page load time details.

Connection to Google Analytics?

Google Analytics, by default, measures these metrics in Site Speed section under Behaviour:

Average page load time
The average amount of time (in seconds) it takes that page to load, from initiation of the pageview (e.g., click on a page link) to load completion in the browser. Avg. Page Load Time consists of two components: 1) network and server time, and 2) browser time.
Average redirection time
The time spent in redirection before fetching the page. If there are no redirects, the value for this metric is expected to be 0.
Average domain lookup time
The average amount of time spent in DNS lookup for the page
Average server connection time
The time needed for the user to connect to your server
Average server response time
The time for your server to respond to a user request, including the network time from the user’s location to your server
Average page download time
The time to download your page
Average document content interactive time
The average time (in seconds) that the browser takes to parse the document (DOMInteractive), including the network time from the user's location to your server.
Average document content loaded time
The average time (in seconds) that the browser takes to parse the document and execute deferred and parser-inserted scripts (DOMContentLoaded), including the network time from the user's location to your server.

Source for above: Taken from Google Analytics support link. https://support.google.com/analytics/answer/2383341?hl=en

In summary, your page load time would be the UNIX time difference between loadEventEnd and navigationStart. Google Analytics also has you covered for DNS lookup time, redirection time, Server connection/response and DOM timings.

Let’s say, you’d also like to add the TCP time [time taken to establish connection], you could use connectEnd-connectStart to know this of your pages.

Where would you send this data in Google Analytics?

Behavior > Site Speed > User Timings is a section for sending custom timing metrics.

Here’s the Google Analytics developer guide link for this report requirements.

The easiest way to summarize this section is that it’s almost like a GA event section but with custom timings. timingCategory to group the type of data, a timing var (that would be equivalent to event action), timingValue in integer and timingLabel, an optional field. In the above example:

TCP could be timingCategory while load time could be timingVar and time taken for TCP load would be the timingValue while timingLabel could be the page path.

Sending this data via Google Tag Manager

For this to happen, you will need:

Variables to capture the connectStart and connectEnd values
A Custom JS var that subtracts connectStart from connectEnd AND converts the milliseconds to seconds
A Google Analytics timing event to push this hit to Google Analytics

Variables to read connectStart and connectEnd values

Create two Javascript variables in GTM to start. connectStart and connectEnd.

When you preview your page load in GTM, it would look like the below - where you start start and end times in milliseconds.

Now, we need a third variable to calculate the difference between connectEnd and connectEnd. This will be a Custom JS var type. Let’s just creatively called this connectEnd - connectStart var.

function() {
  var x = {{connectEnd}};
  var y = {{connectStart}};
return ((x-y)/1000);
}

This Custom JS will subtract the connectStart time from connectEnd and return it in milliseconds [Remember, it’s in UNIX time]. You can then divide the result by 1000 to get the same time in seconds.

Here’s how the GTM tag will look as a Google Analytics timing event.

and here’s the GTM preview for the tag firing on DOM Ready.

That’s pretty much it. This post is just an example and you could customize it to send timing events between any X and Y points of a page load to examine the bottlenecks in your page load.

Happy tagging.

Source: Google Chrome Dev Console Details on Navigation and Resource Timing : https://developers.google.com/web/fundamentals/performance/navigation-and-resource-timing