Data Studio • 2 min read

Web Vitals Data Studio Connector

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.

  1. Login to your account on Foo. If you're just getting started, no problem - follow the steps from this post.
  2. If you haven't created a Web Vitals plan, you can follow this article to learn how.
  3. 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.
  4. 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).
  5. 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.
  6. You will be prompted for a URL ID where you will add the one from step 3.
  7. Click "create report" button.
  8. You should now see a beautiful chart with your Web Vitals data 🙌
Web Vitals in Data Studio
Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed
Next.js

Next.js, GraphQL, Recoil, MUI and More: A New Web Stack Reviewed

With our website redesign we revamped our technology stack. This post reviews choices including Next.js, GraphQL, MUI (Material UI), and TypeScript.

Read more

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience
foo

A New Day in SEO and a New Foo - Lighthouse, Web Vitals and Page Experience

An overview of the newly released version of www.foo.software, a website leveraging Lighthouse, Web Vitals and Binoculars tools to provide page experience testing services.

Read more

How to Collect and Analyze Web Vitals from Next.js for Page Experience
Web Vitals

How to Collect and Analyze Web Vitals from Next.js for Page Experience

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.

Read more