Website speed directly impacts user experience, bounce rates, and even your search engine rankings. While Universal Analytics had dedicated site speed reports, GA4 takes a more flexible yet complex approach, requiring custom configurations to track specific metrics like page load time.
If you’re looking to understand how your subsites are performing in terms of speed, you’ll need to roll up your sleeves and configure some custom tracking. Fortunately, with GA4 and GTM, you can create a powerful setup to measure and analyze your subsites’ speed effortlessly. Find out how to do it.
Tracking Page Load Speed in GA4 Using Google Tag Manager
Step 1: Create a Custom JavaScript Variable in GTM
To track page load times, the first step is to create a JavaScript variable in GTM that calculates the time taken for a page to load:
1. Go to the Variables section in GTM and click on New.
2. Choose Custom JavaScript as the variable type.
3. After choosing the type, we have to put in custom JavaScript code that will calculate the loading time of our pages.
Use the following code:
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;
}
}
return 0; // Return 0 if performance data is unavailable
}
Note: If you prefer to report in milliseconds instead of seconds, you can make adjustments to the JavaScript code.
4. Under the code field, open the Format Value dropdown. Turn on the option for Convert undefined to, and enter 0 as the value.
5. Give the variable a name and save it.
Step 2: Create Triggers for Accurate Data Collection
Once you’ve created the variable, you’ll need triggers to ensure it fires correctly:
1. Go to the Triggers section and click on the New button for creating a trigger.
2. Select Window Loaded as the trigger type.
3. Keep the trigger set to All Window Loaded Events and save it. This will ensure the tag fires only after the page has fully loaded in the browser.
4. Next, create another trigger for cases where the page load time is less than 0. For this, select Custom Event as the trigger type.
5. Put .* as the event name and click the checkmark for using regex matching.
6. Then, select the option for Some Custom Events to define when the trigger should fire, and choose the JavaScript variable we created – Page Load Time.
Enter the value that is less than 0. It will prevent our tag from firing if our variable returns 0 value. Name and save the trigger.
7. Let’s make things easier by creating a reusable variable to include this parameter in all tags automatically. Just go to Variables, click on New, and pick the Google Tag: Event Settings option.
8. Add Event Parameter loading_time_sec and choose our new variable as a value.
9. Name and save the created variable.
Step 3: Configure the GA4 Event Tag
The next step is to configure a GA4 event tag that tracks and sends page load times to Google Analytics.
1. Let’s navigate to Tags, and click New.
2. We assume that you have installed the GA4 measurement ID. Next, set the event name to page_load_time, go to Event Parameters, and include the reusable Event Settings variable we created earlier.
By clicking on Show inherited parameters, you can check whether created event parameters are connected.
3. The last step is to link the triggers to the tag by adding the Page Loaded trigger.
4. Then under Exceptions, we need to add our other trigger. Let’s select the Page Load Time Less Than 0 trigger.
This ensures the tag won’t fire if the page load time variable is less than zero.
5. Now, save the tag and proceed to debug it.
6. Click preview, enter your site URL, and navigate the site. Go back to Tag Manager and we can see that the Tag is fired.
7. By clicking on Variables details, we should see the raw with Page Load Time value.
8. When you're confident everything is working as it should, go ahead and publish the changes.
Viewing Page Load Time in Google Analytics 4 Reports
Now that the page load time data is being sent to Google Analytics, we need to take an additional step to make it visible in the reports. Simply sending the data isn’t enough; we also need to register the loading_time_sec parameter in GA4.
To display page load time in your reports, you’ll need to configure it as a custom metric within GA4 settings. Here’s how:
1. Log into your GA4 account.
2. Navigate to Admin in the left-hand menu.
3. Select Custom Definitions.
4. Click on Create Custom Metrics to register the parameter.
5. Give the metric the name 'Page Load Time,' select the event parameter we configured in GTM – loading_time_sec, and set the unit of measurement to Seconds.
6. Save the custom metric settings, and you’ll now be able to include the metric in your reports.
Creating Page Load Time Reports in Google Analytics 4
The next step is to analyze the performance of your pages by generating a report. To begin, create an Exploration report in GA4. Start by heading to the Explore section and selecting a blank report template.
From there, add the dimensions and metrics you want to include in the report. Import them into your dashboard for use. For this example, we’ll use Page Path + Query String as the dimension, along with Views and the custom Page Load Time metric we created earlier.
By double-clicking, you can add the dimensions and metrics as rows and values. Now, let's construct the report to display the loading times for the pages on our website.
In this case, we will see the total page load time.
By following these steps, you can effectively monitor and analyze the speed of your subsites in GA4, enabling you to make data-driven decisions to enhance performance and user satisfaction.
