Measuring Web Vitals – Part 1: Tracking in Google Analytics

Google’s Web Vitals initiative is an effort to standardize the measurement of user experience across the web. While some aspects of delivering a great user experience may be specific to your site, Google has identified a set of three “Core Web Vitals” metrics that can be applied to all websites. Core Web Vitals covers key indicators of usability including page load time, interactivity, and visual stability of content.

Google has also announced that Core Web Vitals will be incorporated into the Google search algorithm. So, if you care about your site’s ranking on Google (and who doesn’t?), you should start monitoring the pulse of your website using Core Web Vitals and optimizing for these metrics.

Luckily, it’s easy to get started with Web Vitals since Google is surfacing these metrics in Search Console, the Chrome UX Dashboard, and other popular tools. However, all of these tools provide only a snapshot of your site’s user experience with limited ability for further analysis. In order to truly measure the quality of your site experience, monitor trends over time, and drill into specific pages and segments, you will need to implement tracking “in the field” as users are actually interacting with your site.

While Google Analytics does not currently track the Core Web Vitals metrics by default, you can implement custom tracking to send this data to your GA property. In the rest of this post, we’ll go step-by-step through setting up Web Vitals tracking for Google Analytics using Google Tag Manager.

1. Load Web Vitals script

Create a new Custom HTML tag in GTM with the following script. This code loads the Web Vitals tracking library, defines a function to push metrics to the data layer, and initiates the tracking functions for CLS, FID, and LCP. Fire this tag on All Pages.

<script defer src="https://unpkg.com/web-vitals@0.2.2/dist/web-vitals.es5.umd.min.js"></script>
<script> 
(function() {
var sendToDataLayer = function(data){
  window.dataLayer.push({
    'event':'web_vitals',
    'vitals_metric': {
      'name': data.name,
      'value': data.value,
      'delta': data.delta,
      'id': data.id
    }
  });
}

webVitals.getCLS(sendToDataLayer);
webVitals.getFID(sendToDataLayer);
webVitals.getLCP(sendToDataLayer);
})();
</script>

Note that the data layer push uses web_vitals as the event name, and the tracking data is stored in a vitals_metric object. In the following steps, you will use these event and variable names to configure your trigger and data layer variables in GTM.

2. Create a custom event trigger

Create a new Custom Event trigger using “web_vitals” as the event name.

3. Create data layer variables

Create a data layer variable for each metric parameter: name, value, delta, and id. In the data layer push defined in the script above, these variables are nested within a vitals_metric object, so you can access them with dot notation in GTM. For example, “vitals_metric.name” will return the name value:

4. Create a Universal Analytics event tag

Create a new Universal Analytics event tag as follows. We suggest setting the metric name in the Event Action, the ID in the Event Label, and the delta in the Event Value. Set the event as Non-Interactive.

Since Google Analytics only accepts integers in Event Value, you will need to round the delta value returned by the Web Vitals script. You can do this in GTM using a custom JavaScript variable {{JS - Web Vitals Value}} as follows:

function() {
  var name = {{DLV - Web Vitals Metric Name}};
  var delta = {{DLV - Web Vitals Metric Delta}};
  return Math.round(name === 'CLS' ? delta * 1000 : delta);
}

In this script, {{DLV - Web Vitals Metric Name}} and {{DLV - Web Vitals Metric Delta}} are standard data layer variables created for “vitals_metric.name” and “vitals_metric.value” as shown in Step 3 above. Note that the CLS value is multiplied by 1000 for greater precision, as suggested in the Web Vitals documentation.

This implementation will send at least one event to GA for each Core Vitals metric. CLS can also be sent multiple times per page. So, this will add at least 3 events per page load to your Google Analytics property. If you are concerned about increasing your hit volume, you may wish to fire this tag only on selected pages.

5. Create a Google Analytics 4 event tag

Create a new GA4 event tag as follows. We suggest setting the event name as “web_vitals” and sending custom parameters for “vitals_metric”, “vitals_id”, and “vitals_value”.

In your GA4 property, configure “vitals_metric” and “vitals_id” as custom dimensions and “vitals_value” as a custom metric. (Refer to the GA4 Help Centre for guidance on configuring custom dimensions and metrics in GA4.)

Haven’t setup GA4 yet? Check out our blog posts on 4 Reasons Why You Should Upgrade to Google Analytics 4 and How to Setup Google Analytics 4 with GTM.

6. Preview, test, and publish!

With your Web Vitals implementation up and running, you can create custom reports to review the event-level data in Google Analytics. However, to truly assess the performance of your site, you will need to aggregate your data, construct a distribution for each metric, and benchmark against the recommend thresholds. This is best done in an external reporting and visualization tool like Google Data Studio.

Once you have begun collecting data, check out Measuring Web Vitals – Part 2: Monitoring in Data Studio, where we go through how to build a report in Data Studio to monitor the Core Vitals performance of your site.