Quickstart for Using Vercel Analytics

Vercel Analytics helps you to enable and monitor statistics for Web Vitals on your website. Analytics are disabled by default. Personal Accounts can enable these on a single project at a time. To gather analytics for multiple projects, create a Team. To enable Analytics:

Go to Project dashboard

Select a project from your dashboard and navigate to the Analytics tab. Here, you'll be prompted to click the Enable button to activate Web Vitals.

Enable Vercel Analytics on the project view.

Redeploy your application

Then you are asked to Redeploy your app to start collecting data. The first data is available immediately after you get the next visit to your website.

Steps to configure after enabling analytics.

Start collecting data metrics

After a successful redeploy, your app is ready to collect Web Vitals. If you don't find any data within 30 seconds, it's advised to check for any content blockers if used. Anytime you want to stop collecting this data, click the Disable Web Vitals button.

Success notice for redeploy app to production.

Enabling Web Vitals in Vercel Analytics does not impact your site performance. Instead, it helps you collect valuable data for you to learn how well your site is performing for end-users.

For self-hosted projects, you can only enable Analytics and use the Web Vitals if you are on the Pro or Enterprise plan.

To get started, create a new Project from a template. Then, navigate to the Domains page from the project settings and remove the only remaining domain.

You can then navigate to the Analytics tab of the project, where you'll be presented with a configuration property that you will place in your config file.

Once you've configured this property, enable the feature and wait for the data points to appear.

Web Vitals in Vercel Analytics supports Next.js, Nuxt.js, and Gatsby with zero configuration through build plugins. You can use Web Vitals with any frontend framework or project through the Web Vitals API as well.

Web Vitals supports Next.js 10+ with zero-configuration required. Projects on Next.js 9 or earlier are required to upgrade to enable Web Vitals.

Vercel automatically configures and adds @nuxtjs/web-vitals to the buildModules section of your nuxt.config.js file. You do not need to add this plugin manually. Once redeployed, your application will automatically send vitals to Vercel Analytics.

Vercel automatically configures and adds gatsby-plugin-vercel to your gatsby-config.js file. You do not need to add this plugin manually. Once redeployed, your application will automatically send vitals to Web Vitals.