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.

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