Do you want to report on the loading time of your website in GA4, Google Analytics 4?
Have you been looking for 'Page Load Time' metrics but can't find them?
Well, you're in the right place!
In this video, I'm going to show you exactly how to set up and report on the loading time
of your pages.
Okay, if you've been looking through your reports and are stuck because you can't find
any loading time metrics, you're not missing anything.
It's not that they're hidden.
It's that these metrics aren't available in GA4.
I'm guessing they will be added to our reports at some point, but in the meantime, the only
option is to set up page loading time tracking ourselves.
And I'm going to show you how to do this using Google Tag Manager.
So let's head to GTM.
I've opened the GTM container that is installed on my website.
If you're already using GTM, then I'm guessing you already have GA4 implemented, but let's
quickly check this by navigating to 'Tags'.
We can see there is a GA4 configuration tag.
You'll need this in your container too.
If you're just getting started with Google Tag Manager and you don't see a GA4 configuration
tag in your container, then take a moment to watch my Google Tag Manager tutorial.
I've included a link in the description below this video.
And if you already have a GA4 configuration tag, you're ready to go to the next step.
So let's navigate to 'Variables'.
And let's create a new user-defined variable.
Let's name the variable 'Page Load Time'.
Let's select 'Variable Configuration'.
And choose 'Custom JavaScript' as the variable type.
Now let's head to my blog.
Here we can see the custom JavaScript we will use to calculate our pages' loading time.
I've included a link to the post in the description below this video.
Let's copy the code.
This uses the Performance Navigation Timing API and calculates the amount of time, in
milliseconds, between 'loadEventEnd' and 'startTime' which gives us the page load time.
We then take the number of milliseconds and convert them to seconds.
And here's a quick tip: if you wanted to report on milliseconds instead of seconds, you could
adjust the JavaScript.
This would provide more granular reporting in Google Analytics.
Now let's head back to Google Tag Manager.
And paste the JavaScript code.
Now let's select 'Format Value'.
Enable the option 'Convert undefined to.'
And let's enter 'zero' as the value.
This will mean if the navigation timing API fails, then the variable will return a value
of zero.
Now let's save the variable.
The next step is to create a trigger to fire a tag for our page load event, so let's navigate
to 'Triggers'.
Let's click 'New' to create a new trigger.
Let's name the trigger 'Page Loaded'.
And let's select 'Trigger Configuration'.
Now let's select 'Page View, Window Loaded' as the trigger type.
This trigger will fire our tag after a page has completely loaded in the browser.
Let's save the trigger.
And let's create another trigger.
Let's name the trigger 'Page Load Time Less Than Zero'.
Let's select 'Trigger Configuration'.
And choose 'Custom Event' as the trigger type.
Now let's enter 'full stop', 'asterisk' as the 'Event Name'.
And then enable the option to 'Use Regular Expression Matching'.
Now let's select the option for the trigger to fire on 'Some Custom Events'.
And using the drop-down, let's ensure 'Page Load Time' is selected.
Then let's choose 'Less Than'.
And enter 'zero'.
We're going to use this trigger to prevent our tag from firing if our custom JavaScript
variable returns a value less than zero.
Now let's save the trigger.
The next step is to create a GA4 event tag to send the loading time of our pages to Google
Analytics, so let's navigate to 'Tags'.
And let's create a new tag.
Let's name the tag 'Google Analytics GA4 Page Load Time'.
And let's select 'Tag Configuration'.
And let's choose 'GA4 Event' as the tag type.
Now we need to select our GA4 configuration tag using the drop-down.
I mentioned this at the start of the video, but again, if you're just getting started
with GTM, then you can watch my full GTM tutorial to learn about setting this up.
Okay, now let's name our event 'page', 'underscore', 'load', 'underscore', 'time'.
Now we need to select 'Event Parameters'.
And let's add a row.
Now let's name the parameter 'loading', 'underscore', 'time', 'underscore', 'sec'.
And for the value, let's select our 'Page Load Time' variable.
Now we need to select 'Triggering'.
And let's select the 'Page Loaded' trigger we just created.
Then under 'Exceptions' we need to add our other trigger.
Let's select the 'Page Load Time Less Than Zero' trigger.
This will prevent the tag from firing if the page load time variable has a value less than
zero.
Now let's save the tag.
And let's click 'Preview'.
Enter our URL.
And click 'Connect'.
Our website loads and it's connected to Tag Assistant.
Now let's select the tag assistant tab.
And let's select the 'Window Loaded' event on the left.
We can see our page load time event has been fired.
And we can see the amount of time the page took to load.
Once you're happy everything is working correctly, it's time to head back to GTM.
And let's publish the changes.
The loading time of our pages are now being sent to Google Analytics.
Okay, the next thing we need to do is register our 'loading time' parameter in GA4.
To do this, let's head to Google Analytics.
Let's navigate to 'Admin'.
Then select 'Custom Definitions' in the property column.
And let's select 'Custom Metrics'.
And then 'Create Custom Metrics'.
Let's name the metric 'Page Load Time'.
Enter 'loading', 'underscore', 'time, 'underscore', 'sec' as the 'Event Parameter'.
And select 'Seconds' as the unit of measurement.
Now let's save our custom metric.
Moving forward, you will be able to use the metric in your reports.
Now that we're sending loading time to GA4, the next step is to report on the performance
of our pages.
We can do this by creating an exploration report, but I'll show you how you can create
a more actionable report in Looker Studio (which was previously called 'Google Data
Studio').
Let's start by heading back to Google Analytics.
Let's start by navigating to 'Explore'.
And lets create a new blank report.
Let's give our report a name.
And now we need to add the dimensions and metrics we want to use.
Let's start by adding a dimension.
I'm going to add the 'Page Path and Screen Class' dimension to my report, but you can
use any of the page-based dimensions you like.
For example, you could also use 'Page Location', 'Page Title', or 'Landing Page' as the dimension.
Now let's click 'Import'.
Next, we need to add metrics.
I'm going to add the 'Views' metric.
And our custom 'Page Loading Time' metric.
Now we can add the dimensions and metrics as rows and values.
This lets us see the loading time for the pages on our website.
However, as we can see, it presents the total loading time for each page combined.
I'm expecting that Google will let us present averages for our custom metrics in the future,
but currently, we need to either export our data or use Looker Studio.
My preference is Looker Studio, so let's take a look at the steps to view the average loading
time using the data we've collected.
Let's head to Looker Studio.
First, we need to create a report and connect your GA4 property to Looker Studio.
So let's create a new report.
And let's add our GA4 property as the data source.
Now let's adjust the table.
I'm going to add the 'Page Path' dimension.
But again, you can add your preferred page-based dimension.
Now let's adjust the metrics in the table.
Let's add 'Event Count'.
And 'Average Page Loading Time'.
The 'Average Page Loading Time' metric is automatically created in Looker Studio for
us, so that's why I've added this metric.
However, you can also use the 'Page Loading Time' metic, which is what we added to our
exploration report.
Finally, we need to add a filter to our chart because there might be cases where a page
view has been collected without our page load time tag firing.
For example, if you decided to adjust the trigger so the event doesn't fire on every
page, if there was an error, or if the page loading time was calculated as zero seconds
(or less).
So let's add a filter.
Let's name the filter.
And let's ensure 'Include' is selected.
Then we choose 'Event Name'.
Then 'Equal To'.
And enter 'page_load_time'.
This ensures we're only including pages where the page_load_time event was triggered in
the table.
We can now see the average loading times for the pages on our website.
Here's a tip.
Looker Studio automatically displays the loading time metric in the hours, minutes, and seconds
format.
If you prefer to see this reported as a number, you can click the edit icon (the small pencil
icon) next to the metric.
Then change the 'Type' from 'Duration' to 'Number'.
I find this makes it easier to read and interpret the average page loading times in the report.
Now that you're tracking page load time in GA4, you can report on the performance of
your content.
I recommend using the report we created to identify pages with lots of views that are
also slower to load.
You can then optimize those pages to decrease their loading time.
This will improve performance and can lead to more conversions on your website.
If you want to learn even more about Google Analytics 4, then take a moment to subscribe
to this channel.
Every week I release new tutorials covering Google Analytics and Google Tag Manager to
help you boost your skills.
Thanks for watching, and I'll see you in the next video!