Core Web Vitals - Custom Tag Template
The Core Web Vitals custom tag template is a tag template for Google Tag Manager’s community template gallery.
Resource |
---|
Blog post |
Vendor documentation |
Gallery entry |
GitHub repo |
Description
This tag adds measurement handlers for three Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
Each measurement is pushed into dataLayer
as soon as it is available.
Note that not every page load will register all three milestones. Read the documentation linked to above to understand why.
Instructions
The template itself has no configurable fields - it will simply work as soon as you create a tag with it.
Set the tag to fire on the All Pages trigger. If you only want to measure some pages, use a Page View trigger with a suitable trigger condition instead.
The tag writes the following objects into dataLayer
for each time they are measured (CLS, for example, can be measured more than once per page).
{
event: 'coreWebVitals',
webVitalsMeasurement: {
name: 'LCP',
id: 'v1-123123123-123123123',
value: 123.55,
delta: 13.68,
valueRounded: 124,
deltaRounded: 14
}
}
You can create a Custom Event trigger for coreWebVitals
to fire your tag when this dataLayer.push()
happens.
You need to create Data Layer variables for all the webVitalsMeasurement.*
variable names that you want to utilize in your tags.
It’s recommended to use the Beacon API when sending the Core Web Vitals data to the endpoint, as some of the measurements might happen upon page unload.
Google Analytics 4 uses the Beacon API automatically, so you don’t need to do anything manually.
Release notes
Date | Changeset |
---|---|
21 January 2021 | Add rounded integers to the object for easier implementation. |
21 January 2021 | Initial release. |