Getting Started with Vercel Web Analytics

Prerequisites

What You'll Need

A Vercel account - Sign up for free if you don't have one
A Vercel project - Create a new project if needed
Vercel CLI installed - Use the command below for your package manager

Install Vercel CLI

Choose your package manager and run the appropriate command:

pnpm i vercel

yarn add vercel

npm install vercel

bun add vercel

Step 1: Enable Web Analytics in Vercel

Enable Analytics Dashboard

Go to your Vercel Dashboard
Select your Project
Click the Analytics tab
Click Enable from the dialog

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

Step 2: Add @vercel/analytics to Your Project

Install the @vercel/analytics package using your package manager:

pnpm add @vercel/analytics

yarn add @vercel/analytics

npm install @vercel/analytics

bun add @vercel/analytics

Step 3: Add the Analytics Component to Your App

ℹ️ Implementation Note: Choose the implementation method that matches your framework below. For plain HTML sites, use the script tag method. The Analytics component provides route support and seamless integration.

For Next.js (Pages Directory)

Add the Analytics component to your main app file:

import type { AppProps } from "next/app";
import { Analytics } from "@vercel/analytics/next";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

export default MyApp;

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

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}

export default MyApp;

For Next.js (App Router)

Add the Analytics component to your root layout:

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>
  );
}

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

For React Applications

Add the Analytics component to your main App component:

import { Analytics } from "@vercel/analytics/react";

export default function App() {
  return (
    <div>
      {/* ... */}
      <Analytics />
    </div>
  );
}

import { Analytics } from "@vercel/analytics/react";

export default function App() {
  return (
    <div>
      {/* ... */}
      <Analytics />
    </div>
  );
}

For Plain HTML Sites

For static HTML sites, add the following script tag to your HTML files:

<script>
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>

💡 Note: When using the HTML implementation, there is no need to install the @vercel/analytics package. However, there is no route support. Once your site is deployed, the script will automatically track visitors and page views.

For Vue.js

Add the Analytics component to your main App component:

<script setup lang="ts">
import { Analytics } from '@vercel/analytics/vue';
</script>

<template>
  <Analytics />
  <!-- your content -->
</template>

ℹ️ Note: Route support is automatically enabled if you're using vue-router.

For Other Frameworks

Import and call the inject function in your main app file:

import { inject } from "@vercel/analytics";

inject();

💡 Note: The inject function should only be called once in your app and must run in the client. There is no route support with this method.

Step 4: Deploy Your App to Vercel

Deploy your app using the Vercel CLI:

vercel deploy

If you haven't already, we recommend connecting your project's Git repository, which will enable Vercel to deploy your latest commits to main without terminal commands.

Once your app is deployed, it will start tracking visitors and page views automatically.

✓ Verification: 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.

Step 5: View Your Data in the Dashboard

Once your app is deployed and users have visited your site, you can view your analytics:

Go to your Vercel Dashboard
Select your project
Click the Analytics tab

After a few days of visitors, you'll be able to start exploring your data by viewing and filtering the panels.

Pro Tip: Users on Pro and Enterprise plans can also add custom events to track user interactions such as button clicks, form submissions, or purchases.

Getting Started with Vercel Web Analytics

Prerequisites

What You'll Need

Install Vercel CLI

Step 1: Enable Web Analytics in Vercel

Enable Analytics Dashboard

Step 2: Add @vercel/analytics to Your Project

Step 3: Add the Analytics Component to Your App

For Next.js (Pages Directory)

For Next.js (App Router)

For React Applications

For Plain HTML Sites

For Vue.js

For Other Frameworks

Step 4: Deploy Your App to Vercel

Step 5: View Your Data in the Dashboard

Next Steps