How to Track Core Web Vitals (LCP, CLS, INP) with GTM

Core Web Vitals are how Google measures real-world page experience, and your lab scores in PageSpeed Insights often don't match what actual users feel. Sending Web Vitals to GA4 via GTM gives you field data, segmented by page, device and browser, so you can fix what really hurts. Here's how to set it up.

The three metrics

• LCP (Largest Contentful Paint), loading: when the main content appears. Good < 2.5s.
• CLS (Cumulative Layout Shift), stability: how much the page jumps around. Good < 0.1.
• INP (Interaction to Next Paint), responsiveness: lag after a user interacts. Good < 200ms. (INP replaced FID.)

Why field data beats lab scores

A PageSpeed score is a single lab run on one simulated device. Your users are on real phones, real networks, real conditions. Field data, collected from actual visitors, tells you where experience is genuinely poor, and for whom. That's what you want driving fixes.

How to capture them with GTM

The reliable approach is Google's web-vitals library, which reads the metrics from the browser's PerformanceObserver and reports each one. You push each metric to the dataLayer, then send it to GA4.

// In a Custom HTML tag (or your app), using the web-vitals library
import {onLCP, onCLS, onINP} from 'web-vitals';

function send({name, value, id}) {
  window.dataLayer.push({
    event: 'web_vitals',
    metric_name: name,        // LCP | CLS | INP
    metric_value: Math.round(name === 'CLS' ? value * 1000 : value),
    metric_id: id
  });
}
onLCP(send); onCLS(send); onINP(send);

1. Create a Custom Event trigger for web_vitals.
2. Add Data Layer Variables for metric_name, metric_value, metric_id.
3. Fire a GA4 Event tag (event name web_vitals) with those as parameters.

Reporting on it

• In GA4, build an exploration on the web_vitals event, breaking down by metric_name.
• Segment by page, device category and browser to find the worst offenders.
• Look at the distribution, not just the average, a bad 75th percentile is what Google scores you on.

Gotchas

• CLS and INP finalize late. They're reported on page hide/unload, use sendBeacon-friendly sending so the hit survives.
• Don't sample too hard. You need enough volume per page to trust the 75th percentile.
• Round sensibly. Store CLS scaled (e.g. ×1000) so it's a clean integer parameter.