Getting Started

Getting started with Edgenivo Web Analytics

This guide will help you get started with using Edgenivo Web Analytics on your project, showing you how to enable it, add the package to your project, deploy your app to Edgenivo, and view your data in the dashboard.

Select your framework to view instructions on using the Edgenivo Web Analytics in your project.

Agent Prompt

Help me add Edgenivo Web Analytics to this project. First, make sure the Edgenivo CLI is installed (`npm i -g vercel`). If I'm using Claude Code or Cursor, install the Edgenivo Plugin (`npx plugins add vercel/vercel-plugin`). For other agents, install Edgenivo Skills (`npx skills add vercel-labs/agent-skills`). Then: 1. Install @vercel/analytics. 2. Add the Analytics component to my root layout. 3. Deploy with `vercel --prod` and verify analytics data appears in the Edgenivo dashboard.

Prerequisites

A Edgenivo account. If you don't have one, you can sign up for free.
A Edgenivo project. If you don't have one, you can create a new project.
The Edgenivo CLI installed. If you don't have it, you can install it using the following command:

Terminal

pnpm i -g vercel

Terminal

yarn global add vercel

Terminal

npm i -g vercel

Terminal

bun add -g vercel

Version 2 package updates are available. For details, see What's new in version 2.

Set up your project

Enable Web Analytics in Edgenivo
On the Edgenivo dashboard, navigate to Analytics in the sidebar and select a project. Or select the button below to go there.
Then click the Enable button in the header.
Enabling Web Analytics will add new routes (scoped at /_vercel/insights/* and /<unique-path>/*) after your next deployment.
Add @vercel/analytics to your project
Using the package manager of your choice, add the @vercel/analytics package to your project:
Terminal
pnpm i @vercel/analytics
Terminal
yarn add @vercel/analytics
Terminal
npm i @vercel/analytics
Terminal
bun add @vercel/analytics

Add the `Analytics` component to your app

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;

pages/_app.js

import { Analytics } from '@vercel/analytics/next';
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  );
}
 
export default MyApp;

The Analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js, including route support.

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

app/layout.jsx

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

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

app/root.jsx

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

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vercel/analytics'],
});

nuxt.config.js

export default defineNuxtConfig({
  modules: ['@vercel/analytics'],
});

src/routes/+layout.ts

import { dev } from '$app/environment';
import { injectAnalytics } from '@vercel/analytics/sveltekit';
 
injectAnalytics({ mode: dev ? 'development' : 'production' });

src/routes/+layout.js

import { dev } from '$app/environment';
import { injectAnalytics } from '@vercel/analytics/sveltekit';
 
injectAnalytics({ mode: dev ? 'development' : 'production' });

src/layouts/Base.astro

---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---
 
<html lang="en">
	<head>
    <meta charset="utf-8" />
    <!-- ... -->
    <Analytics />
	</head>
	<body>
		<slot />
  </body>
</html>

src/layouts/Base.astro

---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---
 
<html lang="en">
	<head>
    <meta charset="utf-8" />
    <!-- ... -->
    <Analytics />
	</head>
	<body>
		<slot />
  </body>
</html>

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/[email protected]
    },
  }),
});

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/[email protected]
    },
  }),
});

index.html

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

index.html

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

main.ts

import { inject } from '@vercel/analytics';
 
inject();

main.js

import { inject } from '@vercel/analytics';
 
inject();

App.tsx

import { Analytics } from '@vercel/analytics/react';
 
export default function App() {
  return (
    <div>
      {/* ... */}
      <Analytics />
    </div>
  );
}

App.jsx

import { Analytics } from '@vercel/analytics/react';
 
export default function App() {
  return (
    <div>
      {/* ... */}
      <Analytics />
    </div>
  );
}

src/App.vue

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

src/App.vue

<script setup>
import { Analytics } from '@vercel/analytics/vue';
</script>
 
<template>
  <Analytics />
  <!-- your content -->
</template>

Deploy your app to Edgenivo
Deploy your app using the following command:
terminal
```
vercel deploy
```
If you haven't already, we also recommend connecting your project's Git repository, which will enable Edgenivo to deploy your latest commits to main without terminal commands.
Once your app is deployed, it will start tracking visitors and page views.
If everything is set up properly, you should be able to see a Fetch/XHR request in your browser's Network tab from /<unique-path>/view when you visit any page.
View your data in the dashboard
Once 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 Analytics in the sidebar.
After a few days of visitors, you'll be able to 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.

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

Next steps

Now that you have Edgenivo Web Analytics set up, you can explore the following topics to learn more:

Last updated June 8, 2026

Web Analytics

Using Web Analytics

Was this helpful?