Getting Started with Vercel Web Analytics

This guide will help you get started with using Vercel Web Analytics on your project.

Prerequisites

A Vercel account
A Vercel project
The Vercel CLI installed

Install the Vercel CLI

Install the Vercel CLI globally using your preferred package manager:

pnpm i vercel

Or with other package managers:

yarn i vercel

npm i vercel

bun i vercel

Enable Web Analytics in Vercel

On the Vercel dashboard, select your Project and then click the Analytics tab and click Enable from the dialog.

Add @vercel/analytics to Your Project

Install the analytics package:

pnpm i @vercel/analytics

Or with other package managers:

yarn i @vercel/analytics

npm i @vercel/analytics

bun i @vercel/analytics

Add the Analytics Component to Your App

Next.js (App Directory) — TypeScript

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

Next.js (App Directory) — JavaScript

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

Next.js (Pages Directory) — TypeScript

Add the following to 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 (Pages Directory) — JavaScript

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

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

export default MyApp;

Remix — TypeScript

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

Remix — JavaScript

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

React — TypeScript

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

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

React — JavaScript

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

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

Vue — TypeScript

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

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

Vue — JavaScript

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

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

Deploy Your App to Vercel

vercel deploy

Once deployed, it will start tracking visitors and page views.

View Your Data in the Dashboard

Go to your dashboard, select your project, and click the Analytics tab. After a few days, you'll be able to start exploring your data by viewing and filtering the panels.