Vercel Web Analytics Quickstart

Vercel Web Analytics provides you detailed insights into your website's visitors. This quickstart guide will help you get started with using Analytics on Vercel.

Table of Contents

Next.js (/app)

Select your framework to view instructions on using the Vercel Web Analytics in your project.

To start tracking visitors and page views with Web Analytics, use the following steps:

Enable Web Analytics in Vercel

On the Vercel dashboard, select your Project and then click the Analytics tab and click Enable from the dialog.

Enabling Web Analytics will add new routes (scoped at /_vercel/insights/*) after your next deployment.

Add `@vercel/analytics` to your project

Using the package manager of your choice, add the @vercel/analytics package to your project:

pnpm

yarn

npm

pnpm i @vercel/analytics

Add the `Analytics` component to your app

The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js.

Add the following component to the root layout.

app/layout.tsx

import { Analytics } from '@vercel/analytics/react';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Deploy your app to Vercel

You can deploy your app to Vercel's global Edge Network by running the following command from your terminal:

terminal

vercel deploy

Alternatively, you can connect your project's git repository, which will enable Vercel to deploy your latest pushes and merges to main.

Once your app is deployed, it's ready to begin tracking visitors and page views.

If everything is set up properly, you should be able to see a Fetch/XHR request in your browser's Network tab from /_vercel/insights/view when you visit any page.

Learn more about how Vercel supports privacy and data compliance standards with Vercel Web Analytics.

If you are experiencing a situation where data is not visible in the analytics dashboard or a 404 error occurs while loading script.js, it could be due to deploying the tracking code before enabling Web Analytics.

How to fix:

Make sure that you have enabled Analytics in the dashboard
Re-deploy your app to Vercel
Promote your latest deployment to production. To do so, visit the project in your dashboard, and select the Deployments tab. From there, select the three dots to the right of the most recent deployment and select Promote to Production

Not Working with Proxy (e.g., Cloudflare)

Web Analytics may not function when using a proxy, such as Cloudflare.

How to fix:

Check your proxy configuration to make sure that all desired pages are correctly proxied to the deployment
Additionally, forward all requests to /_vercel/insights/* to the deployments to ensure proper functioning of Web Analytics through the proxy

Last updated on February 6, 2023

Web Analytics

Custom Events

Was this helpful?