Building Your Own Web Vitals Dashboard

Welcome back to the latest installment of our series on Core Web Vitals. In the first post we discussed the definitions of Core Web Vitals and In the second post we explored some considerations to think about when measuring them.

Let’s now take a closer look at how to build dashboards in order to measure them. A robust reporting dashboard is an important foundation as we monitor and begin tests to improve. Afterall how can we be sure that changes we make have a positive impact, unless we measure them! 

Using your analytics custom metrics to measure Core Web Vitals

Most analytics tools let you measure custom data. If your analytics tool supports this, you should be able to measure each of the Core Web Vitals metrics using this mechanism. Side note – some examples below refer to Google Analytics this is not intended to encourage you to change analytics service, but demonstrating a flow that can be applied to most analytics services. 

Measuring custom metrics or events (such as Core Web Vitals) in an analytics tool is generally a three-step process:

1. Define the custom metric (e.g Page CLS) in your tool’s admin (Google Analytics example)
2. Enter the value of the metric in your frontend JavaScript code (code snippet on how to do this below)
3. Send the metric value to your analytics backend, ensuring the name or ID matches what was defined in step 1.

For step 2 you can use the web-vitals JavaScript library to compute the value of each of the Core Web Vitals metrics.

The following code sample shows how easy it can be to track these metrics in your frontend JS code and send them to your analytics service.

import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToAnalytics({name, value, id)) {
  const body = JSON.stringify({name, value, id});
  // Use `navigator.sendBeacon() if available, falling back to fetch()".
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}
                          
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Once you’ve recorded the values for each of the Core Web Vitals and sent them to your analytics service using a custom metric or event, the next step is to use these values to build a dedicated report or integrate into existing site performance dashboards. This will enable you to display and monitor the Core Web Vitals values that have been collected via the addition you made to the front end JS.  

Introduce custom breakdowns – enabling you to isolate specific optimizations and their impact on Web Vitals stats

As a data driven partner we recommend making optimization decisions based on field data. To do this we advise running a/b tests against any site changes you may make, to monitor their impact on Core Web Vitals metrics in the real world. Given their complex interdependence, running and measuring A/B tests enables you to isolate, measure and prove that this specific change is reducing impact on a Web Vital.

At Outbrain as part of our range of efforts to help partners monitor, mitigate and minimize impacts to Core Web Vitals we can create unique identifiers for proposed tests and changes, tracking the performance of this test in your analytics tools. Most analytics tools will support you in doing this by setting a custom dimension. E.g. here is an example of how to do this using Google Analytics. 

As always, I hope you found this post useful. Please check back for our next post in the series where we will be taking a closer look at some of the initiatives Outbrain has put in place across the platform to monitor, mitigate and minimize impact on Web Vitals measures. 

For more guidance on setting up A/B tests on your Outbrain configuration, please reach out to your Outbrain point of contact