Measuring Web Vitals – Part 2: Monitoring in Data Studio

Measuring Web Vitals – Part 2: Monitoring in Data Studio

In Measuring Web Vitals – Part 1: Tracking in Google Analytics, we described how to track your Core Web Vitals in Google Analytics. In this post, we’ll show you how to make sense of that data and visualize it in a Google Data Studio report.

Although you can create a custom report in Google Analytics to inspect your Web Vitals event data, GA does not provide a way for you to visualize the distribution of a metric value. Luckily, you can use a tool like Data Studio to aggregate, visualize, and monitor your site’s performance on each Vitals metric.

Let’s get started!

1. Create the data source

In Data Studio, create a data source connected to your main Google Analytics view. You can use an existing data source if you have already created one in the past.

Next, create a new data source using the Extract Data connector.

This connector will allow you extract from your GA data source and create a flat table of Web Vitals events. This is essential for properly constructing the distribution of each metric; You need a data set in which each row represents a unique page load instance. If you were to use your GA data source directly, the data returned to your charts in Data Studio would be pre-aggregated, and you would be unable to visualize a distribution.

In your Extract Data source, select Event Action, Event Label, and Device Category as dimensions and Event Value as a metric. You should also add a filter for Event Category = Web Vitals, so that your extract includes just the relevant events.

Turn on the “Auto Update” toggle so that the extract will be automatically refreshed every day. Then click to Save and Extract, which will save your extracted data source.

Once your data source is created, be sure to give it a meaningful name (so that you’re not stuck with another Untitled Data Source).

2. Create the report

To make things easy, we have created a simple Core Web Vitals dashboard template for you to start with. The design is based on the Chrome UX Report dashboard created by Google.

Open Template in Data Studio

If you have created your data source as described in Step 1, this template should work without any adjustment. Open the template in Data Studio, then click the “Use Template” button and select your Web Vitals extract as the new data source.

This report enables you to see the distribution of each Core Vitals metric broken down by device category. The thresholds for Good, Needs Improvement, and Poor are as recommended by Google, and are defined using calculated fields in each chart.

Google recommends monitoring the 75th percentile on each metric. If you’re in the Good range for at least 75% of page loads, then you’re providing a good experience to most of your site’s visitors. This means you’re looking for the green bars in your report to extend to at least the 75% mark for each metric and on each device category.

Once you’ve assessed your current state, the next step is to optimize your site. Check out Google’s recommendations on optimizing for Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. Since your Web Vitals report will automatically refresh through the Extract Data and GA connectors, you can use it to monitor the results of your optimization efforts.

If you would like more detail in your report, feel free to go back to your data extract and add other dimensions like Page, Hostname, or Date to enable further breakdowns. You can also extend the extracted date range to allow you to visualize trends.

We hope this two-part series gives you the tools to setup real-time tracking and monitoring of Web Vitals on your website. Let us know how it goes, and leave us any questions in the comments!

Complete list of posts in our 2020 Data Studio series:

1. Visualizing the COVID-19 Pandemic in Google Data Studio
2. Creating a Google Analytics Dashboard in One Click
3. Using Google Maps in Data Studio
4. Visualizing BigQuery Public Datasets in Data Studio
5. Measuring Web Vitals – Part 2: Monitoring in Data Studio (this post)
6. Using Parameters in Data Studio
7. How to Style Links in Data Studio
8. Using Filter Controls in Data Studio
9. Extracting a Theme from an Image in Data Studio
10. Building a Google Analytics 4 Dashboard in Data Studio
11. How to Convert Text to Dates in Google Data Studio
12. 12 Tips for Enhancing Your Tables in Data Studio

By |2020-12-16T16:31:07-05:00December 7th, 2020|4 Comments
Categories: Data Studio

4 Comments

  1. Sean 2021-02-25 at 13:43 - Reply

    So part 1 isGA4 and a 2 is UA? Frustrating 🙂

    • Nicole Harris 2021-03-09 at 10:30 - Reply

      Hi Sean,
      We are sorry to hear that you are frustrated! Part 1 is about how to set up Web Vitals tracking in UA and GA4 and Part 2 is about how to connect this data to Data Studio. Hope this helps!

  2. Eris 2021-05-04 at 13:30 - Reply

    using your template but in field “Thresholds (LCP)” i got an error “Only numeric literals are allowed if aggregated fields are used in CASE.”,this is template still working?

    • Nicole Harris 2021-05-06 at 16:45 - Reply

      Hi Eris! Thank you for your question. We suspect that this may be due to the fact that Event Value automatically has its default aggregation set to Sum. To fix this issue, we would suggest changing this to None instead. Let us know if this solves your problem!

Leave A Comment