nt-logo-tagline-dark

Tracking your Core Web Vitals using Google Analytics is an excellent start to effectively maintaining a great website and ensuring a smooth user experience but don’t stop there. This post will show you how you can visualize and make sense of all your Google Analytics data using a Google Data Studio Report.

google data

Google created Web Vitals to standardize the measure of user experience across the internet. Despite some aspects of providing a great user experience being specific to your site, Google identified three “Core Web Vitals,” which are metrics that can be applied to all websites. These vitals cover important indicators of website usability, including page load time, interactivity, and visual stability of content. 

The Core Web Vitals are also a key factor in the Google search algorithm. So, it’s important that you effectively monitor and optimize your website for these metrics to keep your site healthy. 

While you can create custom reports in Google Analytics to inspect Web Vitals event data, unfortunately, Google Analytics doesn’t give you a way to visualize the distribution of a metric value. This is where Data Studio comes in handy; you can use it to visualize, aggregate, and monitor the performance of your website based on each Vitals metric. 

How to Monitor Core Web Vitals in Google Data Studio

Create Data Source 

To get started, you need to create a data source in Data Studio that is connected to your main Google Analytics view. It is also possible to use an existing data source if you already have one. 

Next, you are going to create a new data source using the Extract Data connector. The connector allows you to extract from your Google Analytics data source and build a table of Web Vitals events. This is crucial for correctly creating the distribution of each metric; you must have a data set where each row represents a different page-load instance. If you use your Google Analytics data source directly when the data is returned to your charts in Data Studio, it would be pre-aggregated, and you would not be able to see a distribution. 

In your Extract Data source, select Event Label, Event Action, and Device Category as the dimensions and Event Value as a metric. Also, be sure to add a filter for Event Category = Web Vitals to make sure that your extract includes only the relevant events. Also, turn on the “Auto Update” feature to automatically refresh the extract every day. Then, click Save and Extract to save your extracted data source.

Once you have created your data source, do not forget to give it a relevant name, so you aren’t left with an untitled data source. 

Create the Report

To make the report creating process easier, there are tons of templates available for you to start with. Once you have found a template that works for you, all you have to do is open the template in Data Studio, select the “Use Template” button and choose your Web Vitals to extract as the data source. 

Your report should allow you to see the distribution of each Core Web Vitals metric separated by device category. Google defines the thresholds for Good, Needs Improvement, and Poor here

Google recommends checking the 75th percentile for each metric. If you are in the “Good” range for at least 75% of page loads, you are providing a good experience for most of your website visitors. So, look for the green bars in your report to make it to the 75% mark for each metric and device category. 

After you see where the state of your site is, it is time to optimize. See more about optimizing for Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift here. Your Web Vitals Report will automatically refresh through the Extract Data and GA connectors, so you can use it to check on the results of your optimization efforts. 

If you find that you want more detail in your reports, you can go back to your data extract and add other dimensions like Hostname, Page, or Data to allow future breakdowns. You can also visualize trends by extending the extracted date range. 

New Target is a Google Partner 

You are now all set to start using Data Studio to monitor the Core Web Vitals on your website through real-time tracking. 

New Target has been a Google Partner for over a decade, and we have certified professionals in Google Ads, Google Analytics, Google Tag Manager, and digital marketing. 

We’ll help you reach your most qualified audience in the most effective way possible. Contact us today!

A global team with offices in Washington, D.C. and Los Angeles, Ca., we provide digital strategy, digital marketing, web design, and creative for brands you know and nonprofits you love.

Stay up to date with our insights by following our Twitter, Facebook, and LinkedIn accounts.