Tutorial
4 min read

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

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:

  1. 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.

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

    pnpm
    yarn
    npm
    pnpm i @vercel/analytics
  3. 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>
      );
    }
  4. 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:

  1. Make sure that you have enabled Analytics in the dashboard
  2. Re-deploy your app to Vercel
  3. 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

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

How to fix:

  1. Check your proxy configuration to make sure that all desired pages are correctly proxied to the deployment
  2. Additionally, forward all requests to /_vercel/insights/* to the deployments to ensure proper functioning of Web Analytics through the proxy
Last updated on June 21, 2024