Getting Started with Vercel Web Analytics

Introduction

This guide will help you get started with using Vercel Web Analytics on your project. You'll learn how to:

Enable Web Analytics on Vercel
Add the analytics package to your project
Deploy your app to Vercel
View your data in the dashboard

Prerequisites

A Vercel account (sign up free at vercel.com/signup)
A Vercel project (create one at vercel.com/new)
The Vercel CLI installed

Install Vercel CLI

Install the Vercel CLI using your preferred package manager:

pnpm i vercel

yarn i vercel

npm i vercel

bun i vercel

Step 1: Enable Web Analytics in Vercel

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

Add the @vercel/analytics package to your project using your preferred package manager:

pnpm i @vercel/analytics

yarn i @vercel/analytics

npm i @vercel/analytics

bun i @vercel/analytics

Step 3: Add Analytics to Your Application

The integration method depends on your framework. Select your framework below:

Next.js (Pages Router)

Add the Analytics component to your main app file:

                
// pages/_app.tsx

import type { AppProps } from "next/app";

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

function MyApp({ Component, pageProps }: AppProps) {

  return (

    <>

      <Component {...pageProps} />

      <Analytics />

    </>

  );

}

export default MyApp;

Next.js (App Router)

Add the Analytics component to your root layout:

                
// app/layout.tsx

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>

  );

}

React (Create React App)

Add the Analytics component to your main app file:

                
// App.tsx

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

export default function App() {

  return (

    <div>

      {/* Your app content */}

      <Analytics />

    </div>

  );

}

Vue.js

Add the Analytics component to your main App.vue:

                
<script setup lang="ts">

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

</script>

<template>

  <Analytics />

  <!-- your content -->

</template>

Remix

Add the Analytics component to your root file:

                
// app/root.tsx

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 />

        <Links />

      </head>

      <body>

        <Analytics />

        <Outlet />

        <Scripts />

      </body>

    </html>

  );

}

Nuxt.js

Add the Analytics component to your app.vue:

                
<script setup lang="ts">

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

</script>

<template>

  <Analytics />

  <NuxtPage />

</template>

SvelteKit

Add the analytics injection to your main layout:

                
// src/routes/+layout.ts

import { dev } from "$app/environment";

import { injectAnalytics } from "@vercel/analytics/sveltekit";

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

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>

Plain HTML

For plain HTML sites, add this 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: For plain HTML, there is no need to install the @vercel/analytics package, but there is no route support.

Step 4: Deploy Your App to Vercel

Deploy your app using the Vercel CLI:

vercel deploy

Or, connect your Git repository to enable automatic deployments:

Push your code to your Git repository (GitHub, GitLab, Bitbucket)
Connect your repository to Vercel
Vercel will automatically deploy on every push to main

💡 Note: If everything is set up properly, you should 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

Go to your Vercel dashboard
Select your project
Click the Analytics tab
After a few days of visitors, explore your data by viewing and filtering the panels

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

Privacy and Compliance

Vercel Web Analytics is designed with privacy in mind. It:

Does not use cookies
Does not track personally identifiable information (PII)
Is GDPR, CCPA, and SOC2 compliant
Processes data on Vercel's infrastructure

What's Next?

Learn More About Vercel Web Analytics

Summary

You now have Vercel Web Analytics integrated into your project! Here's what you did:

✅ Enabled Web Analytics in your Vercel dashboard
✅ Installed the @vercel/analytics package
✅ Added the Analytics component to your application
✅ Deployed your app to Vercel
✅ Started viewing analytics data

For more information and support, visit the Vercel Web Analytics documentation.