---
title: Advanced Web Analytics Config with @vercel/analytics
product: vercel
url: /docs/analytics/package
type: reference
prerequisites:
- /docs/analytics
related:
- /docs/analytics/quickstart
- /docs/analytics/privacy-policy
- /docs/analytics/redacting-sensitive-data
summary: With the @vercel/analytics npm package, you are able to configure your application to send analytics data to Vercel.
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
# Advanced Web Analytics Config with @vercel/analytics
## Getting started
To get started with analytics, follow our [Quickstart](/docs/analytics/quickstart) guide which will walk you through the process of setting up analytics for your project.
## What's new in version 2.x
- `@vercel/analytics` is now distributed under the MIT license.
- It can use Vercel's [Resilient Intake](/docs/analytics/privacy-policy#resilient-intake) for script loading and data collection.
- For Nuxt applications: install with the new module system.
## `mode`
Override the automatic environment detection.
> For \[
> 'nextjs',
> 'nextjs-app',
> 'sveltekit',
> 'remix',
> 'create-react-app',
> 'nuxt',
> 'vue',
> 'other',
> 'astro',
> ]:
This option allows you to force a specific environment for the package.
If not defined, it will use `auto` which tries to set the `development` or `production` mode based on available environment variables such as `NODE_ENV`.
If your used framework does not expose these environment variables, the automatic detection won't work correctly.
In this case, you're able to provide the correct `mode` manually or by other helpers that your framework exposes.
If you're using the `` component, you can pass the `mode` prop to force a specific environment:
> For \['html']:
With plain HTML, you can not configure this option.
```tsx {8} filename="pages/_app.tsx" framework=nextjs
import type { AppProps } from 'next/app';
import { Analytics } from '@vercel/analytics/next';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
);
}
export default MyApp;
```
```jsx {7} filename="pages/_app.jsx" framework=nextjs
import { Analytics } from '@vercel/analytics/next';
function MyApp({ Component, pageProps }) {
return (
<>
);
}
export default MyApp;
```
```tsx {15} filename="app/layout.tsx" framework=nextjs-app
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
Next.js
{children}
);
}
```
```jsx {11} filename="app/layout.jsx" framework=nextjs-app
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({ children }) {
return (
Next.js
{children}
);
}
```
```tsx {7} filename="App.tsx" framework=create-react-app
import { Analytics } from '@vercel/analytics/react';
export default function App() {
return (
);
}
```
```jsx {7} filename="App.jsx" framework=create-react-app
import { Analytics } from '@vercel/analytics/react';
export default function App() {
return (
);
}
```
```tsx {21} filename="app/root.tsx" framework=remix
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import { Analytics } from '@vercel/analytics/remix';
export default function App() {
return (
);
}
```
```jsx {21} filename="app/root.jsx" framework=remix
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import { Analytics } from '@vercel/analytics/remix';
export default function App() {
return (
);
}
```
```tsx {10} filename="src/layouts/Base.astro" framework=astro
---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---
```
```jsx {10} filename="src/layouts/Base.astro" framework=astro
---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---
```
```tsx {6} filename="app.vue" framework=nuxt
```
```jsx {6} filename="app.vue" framework=nuxt
```
```tsx {6} filename="src/App.vue" framework=vue
```
```jsx {6} filename="src/App.vue" framework=vue
```
```ts {1, 4} filename="src/routes/+layout.ts" framework=sveltekit
import { dev } from '$app/environment';
import { injectAnalytics } from '@vercel/analytics/sveltekit';
injectAnalytics({ mode: dev ? 'development' : 'production' });
```
```js {1, 4} filename="src/routes/+layout.js" framework=sveltekit
import { dev } from '$app/environment';
import { injectAnalytics } from '@vercel/analytics/sveltekit';
injectAnalytics({ mode: dev ? 'development' : 'production' });
```
```ts {3, 6} filename="main.ts" framework=other
import { inject } from '@vercel/analytics';
// import some helper that is exposed by your current framework to determine the right mode manually
import { dev } from '$app/environment';
inject({
mode: dev ? 'development' : 'production',
});
```
```js {3, 6} filename="main.js" framework=other
import { inject } from '@vercel/analytics';
// import some helper that is exposed by your current framework to determine the right mode manually
import { dev } from '$app/environment';
inject({
mode: dev ? 'development' : 'production',
});
```
## `debug`
> For \[
> 'nextjs',
> 'nextjs-app',
> 'sveltekit',
> 'remix',
> 'create-react-app',
> 'nuxt',
> 'vue',
> 'other',
> 'astro',
> ]:
You'll see all analytics events in the browser's console with the debug mode.
This option is **automatically enabled** if the `NODE_ENV` environment
variable is available and either `development` or `test`.
You can manually disable it to prevent debug messages in your browsers console.
> For \[
> 'nextjs',
> 'nextjs-app',
> 'sveltekit',
> 'remix',
> 'create-react-app',
> 'nuxt',
> 'vue',
> 'other',
> 'astro',
> ]:
To disable the debug mode for server-side events, you need to set the
`VERCEL_WEB_ANALYTICS_DISABLE_LOGS` environment variable to `true`.
```tsx {8} filename="pages/_app.tsx" framework=nextjs
import type { AppProps } from 'next/app';
import { Analytics } from '@vercel/analytics/next';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
);
}
export default MyApp;
```
```jsx {7} filename="pages/_app.jsx" framework=nextjs
import { Analytics } from '@vercel/analytics/next';
function MyApp({ Component, pageProps }) {
return (
<>
);
}
export default MyApp;
```
```tsx {15} filename="app/layout.tsx" framework=nextjs-app
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
Next.js
{children}
);
}
```
```jsx {11} filename="app/layout.jsx" framework=nextjs-app
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({ children }) {
return (
Next.js
{children}
);
}
```
```tsx {7} filename="App.tsx" framework=create-react-app
import { Analytics } from '@vercel/analytics/react';
export default function App() {
return (
);
}
```
```jsx {7} filename="App.jsx" framework=create-react-app
import { Analytics } from '@vercel/analytics/react';
export default function App() {
return (
);
}
```
```tsx {21} filename="app/root.tsx" framework=remix
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import { Analytics } from '@vercel/analytics/remix';
export default function App() {
return (
);
}
```
```jsx {21} filename="app/root.jsx" framework=remix
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from '@remix-run/react';
import { Analytics } from '@vercel/analytics/remix';
export default function App() {
return (
);
}
```
```tsx {10} filename="src/layouts/Base.astro" framework=astro
---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---
```
```jsx {10} filename="src/layouts/Base.astro" framework=astro
---
import Analytics from '@vercel/analytics/astro';
{/* ... */}
---
```
```tsx {6} filename="app.vue" framework=nuxt
```
```jsx {6} filename="app.vue" framework=nuxt
```
```tsx {6} filename="src/App.vue" framework=vue
```
```jsx {6} filename="src/App.vue" framework=vue
```
```ts {3} filename="src/routes/+layout.ts" framework=sveltekit
import { injectAnalytics } from '@vercel/analytics/sveltekit';
injectAnalytics({ debug: true });
```
```js {3} filename="src/routes/+layout.js" framework=sveltekit
import { dev } from '$app/environment';
injectAnalytics({ debug: true });
```
```ts {4} filename="main.ts" framework=other
import { inject } from '@vercel/analytics';
inject({
debug: true,
});
```
```js {4} filename="main.js" framework=other
import { inject } from '@vercel/analytics';
inject({
debug: true,
});
```
> For \['html']:
You have to change the script URL on your `.html` files:
```ts filename="index.html" framework=html
```
```js filename="index.html" framework=html
```
> For \['html']:
## `beforeSend`
With the `beforeSend` option, you can modify the event data before it's sent to Vercel.
Below, you will see an example that ignores all events that have a `/private` inside the URL.
Returning `null` will ignore the event and no data will be sent.
You can also modify the URL and check our docs about [redacting sensitive data](/docs/analytics/redacting-sensitive-data).
```tsx {2, 9-14} filename="pages/_app.tsx" framework=nextjs
import type { AppProps } from 'next/app';
import { Analytics, type BeforeSendEvent } from '@vercel/analytics/next';
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
{
if (event.url.includes('/private')) {
return null;
}
return event;
}}
/>
;
);
}
export default MyApp;
```
```jsx {8-13} filename="pages/_app.jsx" framework=nextjs
import { Analytics } from '@vercel/analytics/next';
function MyApp({ Component, pageProps }) {
return (
<>
{
if (event.url.includes('/private')) {
return null;
}
return event;
}}
/>
;
);
}
export default MyApp;
```
```tsx {1, 16-21} filename="app/layout.tsx" framework=nextjs-app
import { Analytics, type BeforeSendEvent } from '@vercel/analytics/next';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
Next.js
{children}
{
if (event.url.includes('/private')) {
return null;
}
return event;
}}
/>
);
}
```
```jsx {12-17} filename="app/layout.jsx" framework=nextjs-app
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({ children }) {
return (
Next.js
{children}
{
if (event.url.includes('/private')) {
return null;
}
return event;
}}
/>
);
}
```
```tsx {1, 8-13} filename="App.tsx" framework=create-react-app
import { Analytics, type BeforeSendEvent } from '@vercel/analytics/react';
export default function App() {
return (
{/* ... */}
{
if (event.url.includes('/private')) {
return null;
}
return event;
}}
/>
{/* ... */}
{
if (event.url.includes('/private')) {
return null;
}
return event;
}}
/>