In this content, you will learn how to send Web Vitals metrics to Google Analytics 4 via GTM. Sending these metrics as events in GA4 will allow you to analyze the performance of users in their session-based visits to your website.
In order to collect Web Vitals metrics on the client side, we will use the NPM package .
The basic metrics we can collect after installation are as follows:
Cumulative Layout Shift (CLS)
CLS is an important, user-centric metric for measuring visual stability on a website, as it helps measure how often users encounter unexpected layout changes; a low CLS helps the page feel more fluid.
First Input Delay (FID)
FID is an important user-centric metric for measuring the overseas chinese in worldwide data experience and load sensitivity of users when trying to interact with unresponsive pages. It helps ensure that the page is usable. So FID is expected to be low.
Largest Contentful Paint (LCP)
LCP is an important, user-centric metric for measuring perceived loading speed on the browser side, as it marks the point in the page load timeline where the main content of the page is most likely to load; a fast LCP helps reassure the user that the page is usable. So the LCP is expected to be low.
Additionally, if you wish, you can also get FCP and TTFB metrics.
Creating Tags
First, we need to create a new Custom HTML tag named Web Vitals - CDN .
Paste the script below into the tag. The script basically runs the relevant Web Vitals library on the client side and sends the metrics to GTM's dataLayer . Then, to make this tag work on all pages, let's add the All Pages trigger and save it.
Let's create a new custom event trigger named Web Vitals and define the event name as web-vitals .
Variable Definition
Let's create a new variable named Web Vitals - Metric and define the dataLayer variable name as event_action .
Likewise, to get the metric values, let's create a variable named Web Vitals - Value and define the dataLayer variable name as event_value .
Creating GA4 Event Tag
To send the data we collect to GA4, let's define the events by creating a new GA4 Event tag named Web Vitals .
The point to note here is that in the past, Universal Analytics used the event hierarchy as category , action and label . However, on the GA4 side, you need to use the event itself directly. Although the script we use collects metrics in this way, we need to turn these metrics into generalized events. In other words, events that will be reflected in GA4 should be sent semantically and should be general.
You can find detailed information about GA4 Event naming here .
You must use event parameters as name and value .
Parameter Name
value
Parameter Value
{{Web Vitals - Value}}
Then add the trigger that you defined as the Web Vitals custom tag and save it.
Testing in GTM
On your Google Tag Manager home screen, take a Preview from the right side and check how the data comes in, make sure it comes in as follows.
