Skip to content

@vercel/analytics

Advance Analytics configurations with the @vercel/ananlytics npm package.

Audiences are available in Beta on all plans

With the @vercel/analytics npm package you're able to instrument your application to send analytics data to Vercel.

To get started with analytics, please follow our Quickstart guide which will walk you through the process of setting up analytics for your project.

To get started with analytics, please follow our Quickstart guide, which will walk you through setting up analytics for your project.

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.

If you're using the <Analytics /> component, you can pass the debug prop to disable the debug messages while developing locally:

pages/_app.jsx
import { Analytics } from '@vercel/analytics/react';

<Analytics debug={false} />;

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.

If you're using the <Analytics /> component, you can pass define a function and pass it to beforeSend:

pages/_app.jsx
import { Analytics } from '@vercel/analytics/react';

<Analytics
  beforeSend={(event) => {
    // Ignore all events that have a `/private` inside the URL
    if (event.url.includes('/private')) {
      return null;
    }
    return event;
  }}
/>;