How to measure page loading speed with GTM

In the current version of GA4 there are no reports or metrics for page loading time. Although Google may add these metrics to GA4 in future, there is a way of tracking this figure now. Let us show how you can use Google Tag Manager to set up measuring page loading time and get useful data directly in Google Analytics 4.

Step 1: creating a variable
Step 2: creating a trigger
Step 3: creating a tag
Showing page loading time in Google Analytics 4 reports
Reporting page loading time in Google Analytics 4

Step 1: creating a variable

First you have to create a custom JavaScript variable containing the following code. This step is essential for tracking page loading time properly with Google Tag Manager.

So go to the "Variables" section in the left panel and click "New".

Google Tag Manager – Variables section and the New button for creating a variable

Then choose the variable type: "Custom JavaScript".

Having chosen the variable type, copy this code into it:

function()
{
          if (window.performance && window.performance.getEntriesByType) {

                   var entries =
window.performance.getEntriesByType("navigation");

                   if (entries.length > 0) {

                             var navTiming = entries[0];

                             var pageLoadTime = navTiming.loadEventEnd -
navTiming.startTime;

                   return Math.round(((pageLoadTime / 1000) + Number.EPSILON)
* 100) / 100;

                   }

          }

}

Below the code field open the drop-down with the item Format Value. Tick the option "Convert undefined to" and enter "0" as the value.

Google Tag Manager – JavaScript variable for page load time converting undefined to 0

That means if the timing fails, the variable returns a zero value. Name the variable and save it.

Step 2: creating a trigger

Go to the Triggers section. Press the "New" button to create a trigger.

Google Tag Manager – Triggers section and the New button

Choose the trigger type "Window Loaded".

Google Tag Manager – selecting the Window Loaded trigger type

Leave the option "All Window Loaded events" and save the trigger. This trigger fires once the page has fully loaded in the browser.

Google Tag Manager – Window Loaded trigger set to all window loaded events

Then create another trigger with a page loading time less than 0. In this case you have to choose the trigger type Custom Event.

Google Tag Manager – selecting the Custom Event trigger type

As the event name enter .* and tick the checkbox to use a regex.

Google Tag Manager – custom event named .* with regex matching enabled

Then we have to choose the option "Some Custom Events" for when the trigger should fire, and choose the JavaScript variable we created - Page Load Time.

Enter a value that is less than 0. That will prevent the tag firing if the variable returns 0. Name the trigger and save it.

Google Tag Manager – trigger for some custom events where page load time is less than 0

Step 3: creating a tag

Now that you have a custom JavaScript variable capturing the page loading time and a trigger, it is time to create a GA4 event tag. This tag will send the loading time to Google Analytics 4.

Go to "Tags" and click "New". Then click Google Analytics and choose the option "Google Analytics: GA4 event".

We assume you have a measurement ID implemented and a Google tag created. Then add the event name as page_load_time, or use your own naming so that you can recognise this value in GA4. When naming the event do not use spaces or diacritics. The event name can be 40 characters long at most.

Then click Event Parameters and add the parameter loading_time_sec, and as the value insert the variable you created, "Page Load Time".

Google Tag Manager – GA4 page_load_time tag with the loading_time_sec parameter

The last step is attaching the triggers to the tag. As the trigger you have to add "Page View - Window Loaded".

Then in the Exceptions section we have to add our other trigger. We choose the trigger "Page load time less than 0". This will prevent the tag firing if the page load time variable has a value less than zero.

Google Tag Manager – Window Loaded trigger and an exception for load time less than 0

Then name the tag and save it. Click preview, enter your site's URL and go to the page. Go back to Tag Assistant (the events window) and you will see the tag has fired.

Tag Assistant – fired GA4 Page load time tag on the Window Loaded event

By clicking "Variables" you will see your variable with the page loading value in seconds.

Tag Assistant – Page load time variable with a value of 1.5 seconds

Having checked that everything works, do not forget to click "Submit" in Tag Manager and so publish your changes.

Showing page loading time in Google Analytics 4 reports

Page loading time is now being sent to Google Analytics. To show it in reports, though, that is not enough. The next thing we have to do is register the loading_time_sec parameter in GA4.

Open your GA4 account > click Admin (bottom left) > Data display > Custom definitions > Custom metrics. Click "Create custom metric".

Google Analytics 4 – Custom definitions and the Create custom metric button

Name the metric Page load time, choose the event parameter we set up in GTM - loading_time_sec, and as the unit of measurement choose Seconds.

Google Analytics 4 – new custom metric Page load time measured in seconds

Save the metric and you will now see it in reports.

Reporting page loading time in Google Analytics 4

Start by going to the "Explore" section and creating a new blank exploration.

Google Analytics 4 – creating a new blank exploration in the Explore section

Let us start by adding the segments and metrics you want to show and importing them into the panel by clicking "+". As the dimension we chose Page path and query string, as the metric Views and our custom metric Page load time. Having chosen the segments and metrics, click "Confirm" in the top right.