How to Measure Web Vitals Field Data with Google Tag Manager
Core Web Vitals will become a ranking factor from May 2021. Does your site meet the requirements or is there still a need for optimization? To find out, I’ll show you how to use Google Tag Manager to measure and evaluate your users’ Web Vitals data.
Lab data vs. Field data
Web Vitals data is divided into two categories: lab data and field data.
Lab data is collected in a controlled environment with a predefined device and network settings. This provides reproducible results and debugging capabilities to identify and resolve performance issues.
You can measure lab data with these tools :
:format(avif))
Figure 1: Check your Web Vitals with Ryte
Field data is performance data generated by real page loads. They show the actual performance experience of your users. Google measures field data using the Chrome User Experience Report.
Here you can get the Chrome UX report data:
Get detailed information about the impact of Core Web Vitals on the UK ecommerce industry in Ryte's industry study:
Limitations of the Chrome UX Report
The Chrome User Experience Report is a dataset that contains user data on millions of domains. The data is collected by the Google Chrome browser and is subject to some limitations.
Users must visit your site via the Chrome browser.
Sync browsing history and share user statistics must be enabled.
There must be enough users browsing your site.
These limitations often mean that user data is not available for all URLs.
:format(avif))
Figure 2: Missing field data in PageSpeed Insights tool
The evaluation of the data is also subject to some limitations. In BigQuery, the Chrome UX Report data is only updated monthly. In PageSpeed Insights, the update takes place daily, but exporting the data proves to be difficult.
Solution: Implement your own Web Vitals tracking.
How to implement your own Web Vitals Tracking
To measure the Web Vitals of your users yourself, you need a JavaScript library that Google kindly provides on GitHub.
The JavaScript library will be embedded on your page with a small script via Google Tag Manager. You send the Web Vitals data as events to the associated Google Analytics account. From there, the data can be processed, e.g. in a Data Studio report.
Note: The Web Vitals Library can also be used without Google Tag Manager or Google Analytics, for more information see the documentation on GitHub.
Step-by-Step Guide to Configure Google Tag Manager
Depending on your infrastructure, there are several ways you can use the Web Vitals Library. For the following tutorial I use the “standard” version of the library and load it via a CDN (Content Delivery Network). Alternatively, you can install the library on your server using NPM and extend it with a polyfill version, for example.
The “standard” version used in the manual should work “out of the box” in most cases and provide meaningful data.
Both the script and the following instructions are based on a blog post by Matteo Zambon published on TagManagerItalia.
Step 1: Create custom HTML tag for Web Vitals Library
In the first step, you create a Custom HTML Tag that deploys the JavaScript Library to your site via a CDN and prepares the event tracking for the Web Vitals.
Create HTML Tag: Tags > New > Tag Configuration > Custom HTML
Name: Script – Web Vitals
HTML: See Code Block
Trigger: “All Pages (page call)”.
:format(avif))
Figure 3: Web Application Custom HTML Tag for Web Vitals Tracking
<strongNote: The values for the Cumulative Layout Shift are multiplied by 1000 by default to increase the accuracy of the values. You should consider this in your evaluation later. The value can be adjusted in the HTML script if necessary.
<!– Load ‘web-vitals’ using a classic script that sets the global ‘webVitals’ object. –>
<script defer src=”https://unpkg.com/web-vitals”></script>
<script>
function sendToGTM(name, delta, id) {
// Assumes the global `dataLayer` array exists, see:
// https://developers.google.com/tag-manager/devguide
dataLayer.push({
event: ‘web-vitals’,
event_category: ‘Web Vitals’,
event_action: name.name,
// Google Analytics metrics must be integers, so the value is rounded.
// For CLS the value is first multiplied by 1000 for greater precision
// (note: increase the multiplier for greater precision if needed).
event_value: Math.round(name.name === ‘CLS’ ? name.delta * 1000 : name.delta),
// The ‘id’ value will be unique to the current page load. When sending
// multiple values from the same page (e.g. for CLS), Google Analytics can
// compute a total by grouping on this ID (note: requires `eventLabel` to
// be a dimension in your report).
event_label: name.id,
});
}
webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);
webVitals.getFCP(sendToGTM);
webVitals.getTTFB(sendToGTM);
</script>
Step 2: Create data layer variables
In order for the Web Vitals to be sent to Google Analytics using event tracking, four data layer variables must first be created.
dlv – event_action
dlv – event_category
dlv – event_label
dlv – event_value
:format(avif))
Figure 4: Create data layer variables
Create variable: Variables > New > Configure Variable > Data Layer Variable
Name: dlv – event_action
Name of the data layer variable: event_action
Data Layer Version: 2
:format(avif))
Figure 5: Create data layer variables "dlv - event_action"
Repeat this process for the remaining variables.
Create variable: Variables > New > Configure Variable > Data Layer Variable
Name: dlv – event_category
Name of the data layer variable: : event_category
Data Layer Version: 2
Create variable: Variables > New > Configure Variable > Data Layer Variable
Name: dlv – event_label
Name of the data layer variable: event_label
Data Layer Version: 2
Create variable: Variables > New > Configure Variable > Data Layer Variable
Name: dlv – event_value
Name of the data layer variable: event_value
Data Layer Version: 2
Step 3: Create Trigger for Web Vitals Custom Event
A corresponding trigger is required to trigger event tracking.
Create Trigger: Trigger > New > Trigger configuration
Name: Web Vitals
Trigger type: Custom event
Event name: web-vitals
:format(avif))
Figure 6: Create triggers for event tracking
Step 4: Create GA tag for event tracking
Next, create a GA tag for event tracking and link it to the trigger and data layer variables you created earlier.
Create Tag: Tags > New > Tag Configuration > Google Analytics: Universal Analytics
Name: GA – Event – Web Vitals
Tracking type: Event
Category: {{dlv – event_category}}
Action: {{dlv – event_action}}
Label: {{dlv – event_label}}
Value: {{dlv – event_value}}
Hit without interaction: True
Trigger: Web Vitals
:format(avif))
Figure 7: Create GA tag for event tracking
Step 5: Test Web Vitals Tracking
In the Tag Manager preview, you can check if your tags are fired and the Web Vitals are sent to Google Analytics as events.
:format(avif))
Figure 8: Test webitals tracking in tag manager preview
Note: Not all Web Vitals events are triggered right at the beginning. The First Input Delay (FID) event is triggered by an input such as clicking a link. The value for the Cumulative Layout Shift can change several times during a session and is therefore only transmitted when the page is exited.
Whether the Web Vitals are successfully sent to Google Analytics can be seen, for example, in the Real-Time Events report.
:format(avif))
Figure 9: Send Web Vitals to Google Analytics
Evaluate web vitals data
If your users’ web vitals data is in Analytics, there are several ways to analyze it.
If you have less than 100,000 web vitals events per day in your Analytics data view, Google’s Web Vitals Report is a quick and easy way to analyze your data. Google makes the report available on GitHub.
You can either host the application yourself or log in to the web application provided by Google using your Google account.
:format(avif))
Figure 10: Distribution of LCP readings for mobile and desktop devices
:format(avif))
Figure 11: LCP measurement values over time for mobile and desktop devices
With more than 100,000 web vitals events per day, the web application can only be recommended to a limited extent due to high loading times. At the latest, the query limit of the Analytics API takes effect at more than 1,000,000 events. If you still want to use the application, then data sampling is also an option.
If you want to build your own report, Google Data Studio is a good choice. If you have to deal with large amounts of data, you might want to think about using BigQuery. R-Studio, or Tableau to analyze your Web Vitals data.
Note: Google uses the 75th percentile (Empirical Quantile) for the Chrome UX Report performance data. Example: In the PageSpeed Insights tool, the LCP of a page is given as 1.8 seconds (field data). This means: For 75% of users, the measured LCP was below 1.8 seconds. Especially for data sets with extreme outliers, the calculation of an empirical quantile, compared to the mean value, provides more meaningful results.
Analyze Web Vitals at the Directory Level
I find the analysis of the Web Vitals on directory level very helpful, so you can quickly find out for which directories or page types there is a need for optimization.
:format(avif))
Figure 12: Largest Contentful Paint at directory level.
Compare your own data with Chrome UX Report
It is recommended that you regularly compare your own data with that of the Chrome User Experience Report, as Google uses this to calculate the ranking. Check which of your pages or segments show significant deviations and how they are caused.
Conclusion
Google’s Web-Vitals Library is a useful tool that allows you to measure your users’ Web Vitals data yourself. The JavaScript library is quickly implemented and can be adapted to the existing infrastructure. The measurement of the data happens independent of browser type and configuration. The evaluation of the field data can be done weekly or even daily, depending on the number of users. Performance problems can therefore be detected and localized more quickly.
Have fun trying it out!
Ryte users gain +93% clicks after 1 year. Learn how!
Published on Mar 19, 2021 by Jannik Dahle