Tracking Web Vitals in Google Analytics

There are a few different ways to track Web Vitals, however the easiest way is using the web-vitals JavaScript library. In this post we will load the web-vitals directly from CDN and use that to track the Core Web Vitals (LCP, FID, CLS) and other Web Vitals (FCP, TTFB) metrics.

 

Track Web Vitals in Google Analytics using analytics.js

The following block of code can be used to measure and send the Core Web Vitals metrics to Google Analytics as events using analytics.js

<script src="https://unpkg.com/[email protected]/dist/web-vitals.es5.umd.min.js"></script>
 
<script>
function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `ga()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/analyticsjs
    ga('send', 'event', {
        eventCategory: 'Web Vitals',
        eventAction: name,
        // Google Analytics metrics must be integers, so the value is rounded.
        // For CLS the value is first multiplied by 1000 for greater precision
        // (note: increase the multiplier for greater precision if needed).
        eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
        // The `id` value will be unique to the current page load. When sending
        // multiple values from the same page (e.g. for CLS), Google Analytics can
        // compute a total by grouping on this ID (note: requires `eventLabel` to
        // be a dimension in your report).
        eventLabel: id,
        // Use a non-interaction event to avoid affecting bounce rate.
        nonInteraction: true,
    });
}
addEventListener('DOMContentLoaded', function() {
    webVitals.getCLS(sendToGoogleAnalytics);
    webVitals.getFID(sendToGoogleAnalytics);
    webVitals.getLCP(sendToGoogleAnalytics);
});
</script>

 

Track Web Vitals in Google Analytics using gtag.js

The following block of code can be used to measure and send the Core Web Vitals metrics to Google Analytics as events using gtag.js

<script src="https://unpkg.com/[email protected]/dist/web-vitals.es5.umd.min.js"></script>
 
<script>
function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
        event_category: 'Web Vitals',
        // Google Analytics metrics must be integers, so the value is rounded.
        // For CLS the value is first multiplied by 1000 for greater precision
        // (note: increase the multiplier for greater precision if needed).
        value: Math.round(name === 'CLS' ? delta * 1000 : delta),
        // The `id` value will be unique to the current page load. When sending
        // multiple values from the same page (e.g. for CLS), Google Analytics can
        // compute a total by grouping on this ID (note: requires `eventLabel` to
        // be a dimension in your report).
        event_label: id,
        // Use a non-interaction event to avoid affecting bounce rate.
        non_interaction: true,
    });
}
 
addEventListener('DOMContentLoaded', function() {
    webVitals.getCLS(sendToGoogleAnalytics);
    webVitals.getFID(sendToGoogleAnalytics);
    webVitals.getLCP(sendToGoogleAnalytics);
});
</script>

 

Track Web Vitals in Google Analytics using Google Tag Manager

The following block of code can be used to measure and send the Core Web Vitals metrics to Google Tag Manager. After this we will also need to configure Google Tag Manager to send that data to Google Analytics (see this comment for implementation details).

<script src="https://unpkg.com/[email protected]/dist/web-vitals.es5.umd.min.js"></script>
 
<script>
function sendToGTM({name, delta, id}) {
    // Assumes the global `dataLayer` array exists, see:
    // https://developers.google.com/tag-manager/devguide
    dataLayer.push({
        event: 'web-vitals',
        event_category: 'Web Vitals',
        event_action: name,
        // Google Analytics metrics must be integers, so the value is rounded.
        // For CLS the value is first multiplied by 1000 for greater precision
        // (note: increase the multiplier for greater precision if needed).
        event_value: Math.round(name === 'CLS' ? delta * 1000 : delta),
        // The `id` value will be unique to the current page load. When sending
        // multiple values from the same page (e.g. for CLS), Google Analytics can
        // compute a total by grouping on this ID (note: requires `eventLabel` to
        // be a dimension in your report).
        event_label: id,
    });
}
 
addEventListener('DOMContentLoaded', function() {
    webVitals.getCLS(sendToGTM);
    webVitals.getFID(sendToGTM);
    webVitals.getLCP(sendToGTM);
});
</script>

 

Track Other Web Vitals metrics

In addition to the Core Web Vitals we can track other Web Vitals using the web-vitals JavaScript library. We can just use the getFCP() and getTTFB() functions to get the data. Here is code that we can use to track the all the Web Vitals metrics,

<script src="https://unpkg.com/[email protected]/dist/web-vitals.es5.umd.min.js"></script>
 
<script>
function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `ga()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/analyticsjs
    ga('send', 'event', {
        eventCategory: 'Web Vitals',
        eventAction: name,
        // Google Analytics metrics must be integers, so the value is rounded.
        // For CLS the value is first multiplied by 1000 for greater precision
        // (note: increase the multiplier for greater precision if needed).
        eventValue: Math.round(name === 'CLS' ? delta * 1000 : delta),
        // The `id` value will be unique to the current page load. When sending
        // multiple values from the same page (e.g. for CLS), Google Analytics can
        // compute a total by grouping on this ID (note: requires `eventLabel` to
        // be a dimension in your report).
        eventLabel: id,
        // Use a non-interaction event to avoid affecting bounce rate.
        nonInteraction: true,
    });
}
addEventListener('DOMContentLoaded', function() {
    webVitals.getCLS(sendToGoogleAnalytics);
    webVitals.getFID(sendToGoogleAnalytics);
    webVitals.getLCP(sendToGoogleAnalytics);
    webVitals.getFCP(sendToGoogleAnalytics);
    webVitals.getTTFB(sendToGoogleAnalytics);
});
</script>

 

Once you send the data to Google Analytics you can easily check it under the Events report. Note: the CLS number were multiplied by 1000 when we sent to Google Analytics for better accuracy.

Google Analytics Web Vitals Dashboard

I have created a Google Analytics Web Vitals Dashboard that can be imported into Google Analytics to view all the Web Vitals data easily. This dashboard will display the numbers for the different Web Vitals (LCP, FID, CLS, FCP and TTFB) and also the pages with worst numbers for each of them.