Web Vitals Data Studio Connector
With Data Studio, you can easily report on data from a wide variety of sources, without programing. In just a few moments, you can connect to data sets such as:
- Google Marketing Platform products, including Google Ads, Analytics, Display & Video 360, Search Ads 360
- Google consumer products, such as Sheets, YouTube, and Search Console
- Databases, including BigQuery, MySQL, and PostgreSQL
- Flat files via CSV file upload and Google Cloud Storage
- Social media platforms such as Facebook, Reddit, and Twitter
Data Studio provides a library of "connectors" to connect to a diverse range of Google APIs and APIs contributed from all around. Foo now provides a Web Vitals Data Studio Connector.
How to View and Analyze Web Vitals in Data Studio
There are many tutorials about how to get started with Data Studio like this one. Below are steps to connect to Foo's Web Vitals connector and create a report.
- Login to your account on Foo. If you're just getting started, no problem - follow the steps from this post.
- If you haven't created a Web Vitals plan, you can follow this article to learn how.
- Make sure you've added URLs in the dashboard and click into the settings for a given URL. Find the URL ID and make a note of it.
- Retrieve your account ID from the settings page on Foo and a URL from the Web Vitals dashboard (if you can't find these, refer to the article linked above).
- If you're not familiar with Data Studio, follow documentation to connect to a data source (linked above or easily available from a Google search). Search the "partner connectors" to find Foo's Web Vitals connector.
- You will be prompted for a URL ID where you will add the one from step 3.
- Click "create report" button.
- You should now see a beautiful chart with your Web Vitals data 🙌
Google's Web Vitals is becoming the standard for measuring page experience. As of version 9.4 of Next.js, it provides a built-in method for capturing and reporting Core Web Vitals. This post illustrates how to collect Web Vitals metrics from a Next.js app and send them to a service for storage.