Core Web Vitals – Custom Tag Template

of Core Web Vitals The custom tag template is Google Tag Manager Community template gallery.

explanation

This tag adds three measurement handlers. Core Web Vitals: Maximum Content Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Each measurement is pushed dataLayer As soon as it becomes available.

Note that not all page loads register all three milestones. Read the documentation linked above to understand why.

instructions

The template itself has only one configurable option. namespace objectIf this is checked, all measurements will be nested under the measurement name object property (see below for an example).

Configure tags to fire all pages trigger. If you want to measure only some pages, page view Instead, trigger it with the appropriate trigger condition.

The tag writes the following objects dataLayer Each time it is measured (for example, CLS can be measured multiple times 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 object If checked, the above measurements will be pushed dataLayer Instead like this:

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

Such a measurement namespace is useful for sending all current CWV measurements in a single request. If you don’t specify an object namespace, each subsequent measurement overwrites the previous measurement’s keys and values.

can create Custom event trigger for coreWebVitals To fire the tag in this case dataLayer.push() happen.

need to create data layer variables for all webVitalsMeasurement.* Variable name to use in the tag.

It is recommended to use Beacon API When sending Core Web Vitals data to an endpoint, as some measurements can occur on page unload.

Google Analytics 4 uses the Beacon API automatically, so you don’t have to do anything manually.

Release notes