DEV Community

Cover image for Adding Web Analytics on Vercel Is Easier Than Ever (Free & Built-In)
Anower Jahan Shofol
Anower Jahan Shofol Subscriber

Posted on • Originally published at revolab.pro

Adding Web Analytics on Vercel Is Easier Than Ever (Free & Built-In)

#analytics #vercel #nextjs #webdev

Did you know that Vercel provides built-in web analytics that you can use even on the free plan?

In this guide, we’ll learn how to quickly enable Vercel Web Analytics in a Next.js project and start tracking visitors and page views with minimal setup.

Why Use Vercel Analytics?

Vercel Analytics allows you to:

  • Track page views and visitors
  • Monitor traffic trends
  • View analytics directly inside the Vercel dashboard
  • Avoid third-party analytics tools for basic insights

Step 1: Enable Analytics in the Vercel Dashboard

  1. Go to your project in the Vercel dashboard
  2. Open the Analytics tab
  3. Click Enable

Vercel Web Analytics Screenshot

Note: Enabling analytics in the dashboard alone is not enough. You must complete the next steps to activate it properly.

Step 2: Install the Vercel Analytics Package

Open your Next.js project and run the following command from the root directory:

npm i @vercel/analytics
Enter fullscreen mode Exit fullscreen mode

This installs the official Vercel Analytics library.

Step 3: Add the Analytics Component to Your App

Now, add the Analytics component to your root layout file.

Open app/layout.tsx and update it like this:

import { Analytics } from '@vercel/analytics/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}
Enter fullscreen mode Exit fullscreen mode

This ensures analytics are loaded across all pages of your app.

Step 4: Deploy Your Changes to Production

Once the setup is complete, you need to deploy your project. You have two options:

Option 1: Deploy via GitHub

If your GitHub repository is connected to Vercel:

  1. Commit your changes
  2. Push to the main branch

Vercel will automatically deploy your app.

Option 2: Deploy Using the Vercel CLI

If you prefer deploying from the command line:

  1. Install the Vercel CLI globally: 
   npm i -g vercel
Enter fullscreen mode Exit fullscreen mode
  1. Deploy your project: 
   vercel deploy
Enter fullscreen mode Exit fullscreen mode

That’s it! Your app is now live with analytics enabled.

Viewing Analytics Data

After deployment:

  1. Go to the Vercel dashboard
  2. Select your project
  3. Open the Analytics tab

You’ll start seeing visitor counts and page views as traffic comes in.

Advanced Analytics (Pro & Enterprise Plans)

Users on Pro and Enterprise plans can also:

  • Track custom events
  • Measure button clicks
  • Monitor form submissions
  • Analyze purchases and user interactions

Top comments (0)