How we measure our Core Web Vitals — DataStudio making the experience breakdown pie chart
TL:DR — in dataStudio use add a new LCP Range field within which you set what bucket each value goes in with a CASE statement. Then insert a pie chart with a metric of Event count and LCP Range as a dimension.
The end result will look something like this.
At this point we’ve already
- Got Core Web Vitals from JS in our application to Google Analytics via GTM
- Created a report to pull the data from Google Analytics into Google Sheets to avoid sampling
- Pulled the data from Google Sheets into Google Analytics
The Chrome User Experience Report breaks down all the Core Web Vitals into three buckets good, needs improvement and bad.
To recreate this in a pie chart for our data we need to add a new field to our data via DataStudio to add as a dimension which will bucket our events.
Insert a Pie Chart
Click Insert > Pie Chart
Add the LCP Range Field
After clicking on the new pie chart go to the Data section on the far right hand side of the screen and click on Add a Field in the bottom right hand corner.
Name the field LCP Ranges and then we’ll do a case statement to cover the three possibilities. (this could be tidier but this way is quite explicit so happy enough with the logic).
CASE
WHEN Event Value < 2500 THEN "Good (< 2500)" WHEN Event Value > 2499 AND Event Value < 4000 THEN "Needs Improvement (2500 - 3999)" WHEN Event Value > 3999 THEN "Bad (> 3999)"
END
Set up the data for the pie chart
So we have the Dimension as LCP Ranges and the Metric is a count of Event Values. This will then count how many of values are in each range as a percentage of the whole.
We get something like this
Tidy up the styling
Click on the pie chart again and choose the Style tab and navigate to the “Color by” section.
Click on Manage dimension value colours and then click on each of the Good, Needs Improvement and Bad and set them to our standard colours of Green, Amber and Red.
That gets us to
CLS and FID
Follow the above steps for CLS and FID. To keep the styling copy the first Pie Chart and then update the data to look for the right data source and add your new CLS Ranges and FID Ranges in their respective data sources.
