January 21, 2026 Developer Guide

Getting Started with Vercel Web Analytics: A Complete Implementation Guide

Learn how to enable analytics, add packages to your project, deploy to Vercel, and view your data in the dashboard

Why Web Analytics Matter for Your Brand

Understanding how visitors interact with your application is critical to optimizing your brand's digital presence. Vercel Web Analytics provides real-time insights into visitor behavior, page views, and user interactions—all essential data for understanding your performance in the age of AI-driven discovery.

Whether you're measuring GEO (Generative Engine Optimization) performance or tracking traditional user engagement, having accurate analytics data is the foundation of effective optimization.

Prerequisites

Before you begin, make sure you have the following:

A Vercel account. If you don't have one, you can sign up for free.
A Vercel project. If you don't have one, you can create a new project.
The Vercel CLI installed. You can install it using your preferred package manager:
- pnpm: pnpm i vercel
- yarn: yarn i vercel
- npm: npm i vercel
- bun: bun i vercel

Step 1: Enable Web Analytics in Vercel

The first step is to enable Web Analytics for your project in the Vercel dashboard.

Go to the 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

Once you've enabled Web Analytics in your Vercel dashboard, the next step is to add the @vercel/analytics package to your project.

Using the package manager of your choice, run one of the following commands:

pnpm: pnpm i @vercel/analytics
yarn: yarn i @vercel/analytics
npm: npm i @vercel/analytics
bun: bun i @vercel/analytics

Step 3: Integrate Analytics Into Your Application

The integration process depends on the framework you're using. The @vercel/analytics package provides framework-specific implementations to ensure seamless integration.

For Next.js (Pages Router)

If you're using the 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;

For Next.js (App Router)

If you're using the app directory (Next.js 13+), 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>
  );
}

For Remix

Add the Analytics component to your root file:

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import { Analytics } from "@vercel/analytics/remix";

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Analytics />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

For SvelteKit

Add the following code to your main layout file:

import { dev } from "$app/environment";
import { injectAnalytics } from "@vercel/analytics/sveltekit";

injectAnalytics({ mode: dev ? "development" : "production" });

For Astro

Add the Analytics component to your base layout:

---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- ... -->
    <Analytics />
  </head>
  <body>
    <slot />
  </body>
</html>

💡 Note: The Analytics component is available in version @vercel/analytics@1.4.0 and later. For earlier versions, configure the webAnalytics property in your astro.config.mjs file.

For Vue

Add the Analytics component to your main component:

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

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

For Nuxt

Add the Analytics component to your main component:

<script setup>
import { Analytics } from '@vercel/analytics/nuxt';
</script>

<template>
  <Analytics />
  <NuxtPage />
</template>

For Create React App

Add the Analytics component to your main app file:

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

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

For Plain HTML/Vanilla JavaScript

For plain HTML sites, add the following script 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 with this approach.

For Other Frameworks

For frameworks not listed above, import the inject function from the package. This should only be called once in your app and must run in the client:

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

inject();

💡 Note: There is no route support with the inject function.

Step 4: Deploy Your Application to Vercel

With Web Analytics integrated, deploy your application to Vercel:

vercel deploy

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

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

💡 Note: 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 data:

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

After a few days of visitor traffic, you'll be able to explore your data by viewing and filtering the analytics panels. Users on Pro and Enterprise plans can also add custom events to track specific user interactions such as button clicks, form submissions, or purchases.

Understanding Your Analytics Data

Vercel Web Analytics provides key metrics including:

Page Views: Number of times pages on your site are viewed
Visitors: Number of unique visitors to your site
Route Performance: Which pages are most visited
Web Vitals: Performance metrics that affect user experience
Custom Events: Track specific user interactions (Pro/Enterprise plans)

Next Steps

Now that you have Vercel Web Analytics set up, you can:

Explore the @vercel/analytics package documentation
Learn how to set custom events to track user interactions
Discover how to filter your analytics data
Review privacy and compliance information
Explore pricing and limits

Understanding Analytics in the Context of GEO

Web analytics are crucial for understanding how your brand appears in AI-generated answers. While Vercel Web Analytics tracks visitor behavior on your site, remember that this is only one part of the picture.

To understand your complete visibility story—including how often your brand is mentioned in ChatGPT, Gemini, Claude, and other AI systems—you need comprehensive AI visibility intelligence. That's where solutions like AkuparaAI's platform become essential for measuring your Generative Engine Optimization (GEO) performance.

By combining traditional web analytics with AI visibility data, you get a complete understanding of how users discover and interact with your brand across all channels—including the growing segment of AI-driven discovery.

Troubleshooting Common Issues

If you're not seeing analytics data:

Check deployment: Ensure your app is deployed on Vercel, not another platform
Verify setup: Confirm you've added the Analytics component or script to your app
Allow time: It may take a few minutes for data to appear in the dashboard
Check network: Use your browser's Developer Tools Network tab to verify requests to /_vercel/insights/view
Review browser settings: Some browser extensions or privacy settings may block analytics

Conclusion

Vercel Web Analytics provides a straightforward way to understand how your users interact with your application. By following this guide, you should have analytics up and running within minutes. Combined with other visibility intelligence tools, you'll have the complete picture of your brand's digital presence.