Skip to main content

Getting started with Vercel Web Analytics

This guide shows how to enable Vercel Web Analytics, add it to an application, deploy the change, and view the data.

Select your framework for the relevant integration instructions.

Prerequisites​

You need:

pnpm i vercel

Setup​

Step 1: enable Web Analytics in Vercel​

On the Vercel dashboard, select your project, click the Analytics tab, and then click Enable in the dialog.

info

Enabling Web Analytics adds new routes (scoped at /_vercel/insights/*) after your next deployment.

Step 2: add @vercel/analytics to your project​

Framework-specific installation

The installation process varies by framework. HTML projects do not require package installation.

For most frameworks (Next.js, React, Remix, SvelteKit, Vue, Nuxt, Astro), install the package using your preferred package manager:

pnpm i @vercel/analytics
HTML implementation

If you're using the HTML implementation, you don't need to install the @vercel/analytics package. Skip to the HTML integration section later in this guide.

Step 3: integrate Web Analytics into your application​

The integration method depends on your framework. Choose the section for your framework:

Framework-specific integration​

Next.js (Pages Router)​

The Analytics component wraps the tracking script and adds route support for Next.js.

Add the component to your pages/_app.tsx or pages/_app.jsx 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)​

The Analytics component wraps the tracking script and adds route support for Next.js.

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

Remix​

The Analytics component wraps the tracking script and adds route detection for Remix.

Add the 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 name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Analytics />
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Create React App​

The Analytics component wraps the tracking script for React.

note

When using the plain React implementation, there is no route support.

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

SvelteKit​

The injectAnalytics function wraps the tracking script and adds route support for SvelteKit.

Call the function in your main layout:

src/routes/+layout.ts
import { dev } from '$app/environment';
import { injectAnalytics } from '@vercel/analytics/sveltekit';

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

Vue​

The Analytics component wraps the tracking script for Vue.

note

If you're using vue-router, route support is enabled automatically.

Add the component to your main component:

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

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

Nuxt​

The Analytics component wraps the tracking script and adds route support for Nuxt.

Add the component to your main component:

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

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

Astro​

The Analytics component wraps the tracking script and adds route support for Astro.

Add the component to your base layout:

src/layouts/Base.astro
---
import Analytics from '@vercel/analytics/astro';
// ...
---

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

The Analytics component is available in version @vercel/analytics@1.4.0 and later. If you are using an earlier version, you must configure the webAnalytics property of the Vercel adapter in your astro.config.mjs file as shown in the following example. For more information, see the Astro adapter documentation.

astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel({
    webAnalytics: {
      enabled: true, // set to false when using @vercel/analytics@1.4.0
    },
  }),
});

HTML (plain sites)​

For plain HTML sites, you can add the following script to your .html files:

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

If you're using the HTML implementation, you don't need to install the @vercel/analytics package. However, there is no route support.

Other frameworks​

Import the inject function from the package, which adds the tracking script to your app. Call it only once, and make sure it runs in the client.

note

There is no route support with the inject function.

Add the following code to your main app file:

main.ts
import { inject } from '@vercel/analytics';

inject();

Step 4: deploy your app to Vercel​

Deploy your app using the following command:

vercel deploy

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

After your app is deployed, it starts tracking visitors and page views.

Verification

If everything is set up correctly, you can see a Fetch/XHR request from /_vercel/insights/view in your browser's Network tab when you visit any page.

Step 5: view your data in the dashboard​

After your app is deployed and users have visited your site, you can view your data in the dashboard.

To do so, go to your dashboard, select your project, and click the Analytics tab.

After a few days of visitors, you can start exploring your data by viewing and filtering the panels.

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

Privacy and compliance​

Learn more about how Vercel supports privacy and data compliance standards with Vercel Web Analytics.

Next steps​

To go further with Web Analytics:

This page, like every page on this site, is written and maintained through Claude Code.