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).

There is also a toggle (Collect all (available) web vitals metrics) that enables the collection of other supported Web Vitals metrics: FCP, INP, and TTFB.

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 just one configurable option: Namespace Objects. If this is checked, then all measurements will be nested under an object property of the measurement name (see below for an example).

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
  }
}

If you have Namespace Objects checked, then the measurement above would be pushed to dataLayer like this instead:

{
  event: 'coreWebVitals',
  webVitalsMeasurement: {
    LCP: {
      name: 'LCP',
      id: 'v1-123123123-123123123',
      value: 123.55,
      delta: 13.68,
      valueRounded: 124,
      deltaRounded: 14
    }
  }
}

Namespacing the measurements like this is useful if you want to send all the current CWV measurements in a single request. If you don’t namespace the objects, then each subsequent measurement will overwrite the keys and values of the previous measurement.

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