Don't have one? Create one ↗
The Happy TaggerThe Happy Tagger
← All courses

Lesson 10 of 11

Web Vitals To DataLayer

① Connect your GTM container

Paste your container ID to load it into this page. It only ever runs here.

Advanced: use a specific environment

Speed is measurable, and worth measuring. Google's Core Web Vitals (largest contentful paint, cumulative layout shift, and interaction to next paint) are how it scores the experience. The browser exposes them through PerformanceObserver, so you can read them on a real page and send them to GA4 as a custom event.

The pattern is a small Custom HTML listener that observes the metrics and pushes a web_vitals event carrying the metric name and value, then a Custom Event trigger and a GA4 Event tag that maps those into event parameters. In GA4 you get a CWV report broken down by page.

This page is already reading LCP and CLS live below. Push the event, then build the trigger and tag to send it on for real.

Goal

Read Core Web Vitals with PerformanceObserver and send them to GA4 as a web_vitals event.

Build it in GTM

  1. Listener: Custom HTML - Web Vitals

    1. Go to Tags → New → Custom HTML.
    2. Paste the official web-vitals library snippet (or a PerformanceObserver) that pushes {event:'web_vitals', metric_name, metric_value} for each metric.
    3. Trigger it on All Pages, name it Custom HTML - Web Vitals and Save.

  2. Trigger: Custom Event - Web Vitals

    Add a Custom Event trigger with event name web_vitals, name it Custom Event - Web Vitals and Save.

  3. Tag: GA4 - Web Vitals

    1. Add a GA4 Event tag, event name web_vitals, with parameters metric_name and metric_value mapped from Data Layer Variables.
    2. Fire it on Custom Event - Web Vitals, name it GA4 - Web Vitals and Save.

Debug in Tag Assistant

Copy this lesson's live URL and paste it into GTM Preview, that is the page Tag Assistant connects to. It has the clickable elements, so this page stays clean for reading.

  1. In your GTM, click Preview.
  2. Paste the live URL above and click Connect.
  3. Interact with the live page and watch your tag fire in Tag Assistant.

What you should expect to see

Each metric pushes a web_vitals event and your GA4 tag fires once per metric, with metric_name and metric_value visible under the tag in Tag Assistant.

Verify your container

Built it? Export your container, Admin → Export Container, choose your workspace, then drop the JSON here to check it against this lesson.

Drop your container .json here

or browse · checked in your browser, nothing is uploaded

0 of 11 lessons complete