Skip to content
Alerty-Logo dk

How To Set Up Vercel Analytics And Add It To Your NextJS App

Ready to enhance your Vercel logging experience with Vercel analytics for your NextJS apps? Imagine having the power to track your applications' performance and behavior seamlessly. This will guide you through Vercel analytics and provide insights on leveraging this tool in your NextJS applications.

Alerty's NextJS logging solution offers a strong framework for your Vercel analytics within your NextJS apps. Elevate your application monitoring and tracking

Alerty-Logo dk

Table of Contents

Vercel Analytics

Person Using Laptop - Vercel Analytics

Web analytics provide comprehensive insights into your:

  • Visitor's behavior
  • Tracking top pages
  • Referrers
  • Demographics like location, operating systems, and browser info

Vercel analytics, previously known as Audiences, prioritizes privacy and accuracy with entirely cookieless tracking of visitors. This leads to seamless yet privacy-friendly experiences without consent layers. In turn, each page view is counted, giving rise to unbiased analyses of the entire website traffic.

But you can still analyze which user journeys lead to conversion. Vercel identifies visits through hashed requests instead of cookies. This allows for following the user flow, measuring micro-conversions, and analyzing entire journeys to conversion.

Group 21

Related Reading

Features of Vercel Analytics

Person Opened Google Search Console - Vercel Analytics

Vercel analytics offers a range of features designed to help developers track and understand their application performance. These features include:

Pricing and Limits

  • The Hobby plan includes 2,500 events for free, while the Pro plan includes 25,000 events.
  • The Pro with Web Analytics Plus plan offers 500,000 events, with additional events available for $20 per 500,000.
  • There's also an Enterprise plan with custom limits.

Tracking Events

  • Vercel analytics automatically tracks page views and allows you to track custom events like button clicks or form submissions.
  • You can enrich these events with feature flag values from the DOM.
  • The platform provides both client-side and server-side APIs to track events.

Reporting

  • Reporting windows vary depending on the plan. The Hobby plan offers a one-month window, the Pro plan a 12-month window, and the Pro with web analytics plus plan a 24-month window.

Configuration

  • Vercel analytics provides a React component <Analytics /> to easily integrate into Next.js applications.
  • You can override the environment mode (development or production) and use a debug mode to log all events to the console.
  • The platform also supports a beforeSend hook to modify event data before sending.

Privacy and Compliance

  • Vercel web analytics is designed with privacy in mind and supports data compliance standards like GDPR and CCPA.

Alerty's Cloud Monitoring for Startups

Alerty is a cloud monitoring service for developers and early-stage startups, offering:

  • Application performance monitoring
  • Database monitoring
  • Incident management

It supports technologies like NextJS, React, Vue, and Node.js, helping developers identify and fix issues. 

  • Alerty monitors databases such as Supabase, PostgreSQL, and RDS
  • Tracking key metrics like CPU usage and memory consumption
  • It features quick incident management and Real User Monitoring (RUM) to optimize user experience
  • Its universal service monitoring covers dependencies like Stripe API, OpenAI, and Vercel. 

Alerty uses AI to simplify setup, providing a cost-effective solution compared to competitors. It is designed for ease of use, allowing quick setup, and integrates with tools like Sentry, making it ideal for developers and small teams needing efficient, affordable monitoring. 

Catch issues before they affect your users with Alerty's NextJS logging tool today!

Alerty-Logo

6 Reasons To Choose Vercel Analytics

Person Using Computer - Vercel Analytics

1. Privacy-Focused

Vercel's web analytics prioritizes user privacy by not utilizing cookies or gathering personally identifiable information. Instead, it employs an anonymized hash that resets daily, offering a more privacy-friendly experience for website visitors. This approach aligns with the increasing emphasis on data protection and privacy regulations like GDPR.

2. Integrated with Vercel

Vercel web analytics is seamlessly integrated into the Vercel platform, eliminating the need for separate third-party analytics services. This integration simplifies the setup process for Vercel customers, making it easier to start monitoring website performance and user engagement.

3. Lightweight and Fast

Vercel web analytics is significantly lighter at only 44KB compared to Google Analytics. This reduced size contributes to maintaining optimal site performance, particularly for mobile users. With a focus on speed and efficiency, Vercel web analytics ensures minimal impact on website load times.

4. Simpler Interface

While Google Analytics offers extensive advanced features, Vercel web analytics emphasizes simplicity with a streamlined and straightforward dashboard. This dashboard focuses on core metrics essential for most users, such as top pages, referrers, and user demographics. The simplified interface equips users with quick access to vital information without overwhelming them with unnecessary details.

5. Custom Events

Vercel web analytics enables pro and enterprise users to track custom events like button clicks or form submissions. This functionality allows businesses to gain deeper insights into user behavior and interactions, which can inform strategic decision-making and enhance user experience.

6. Reporting Window

Vercel web analytics offers flexible reporting windows based on the user's plan - 1 month for Hobby, 12 months for Pro, and 24 months for Pro with Web Analytics Plus. This flexibility gives users more options than Google Analytics, which typically offers a standard 14-month reporting window. By extending the reporting window, Vercel web analytics empowers users to analyze historical data over extended periods, facilitating more informed decisions and trend analysis.

Vector

Related Reading

How To Set Up Vercel Analytics

Person in an Online Meeting - Vercel Analytics

To start tracking visitors and page views with Web Analytics, use the following steps:

1. Enable Web Analytics in Vercel

On the Vercel dashboard, select your project, click the analytics tab, and click enable from the dialog. 

Note that enabling web analytics will add new routes (scoped at /_vercel/insights/*) after your next deployment.

2. Add @vercel/analytics to your project

Using the package manager of your choice, add the @vercel/analytics package to your project:

pnpm
pnpm i @vercel/analytics

Or
yarn
yarn add @vercel/analytics

Or
npm
npm i @vercel/analytics

3. Add the Analytics component to your Next.js app 

The analytics component is a wrapper around the tracking script, offering more seamless integration with Next.js.

Add the following component to the root layout.

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

4. Deploy your app to Vercel

You can deploy your app to Vercel's global edge network by running the following command from your terminal:

terminal
vercel deploy

Alternatively, you can connect your project's git repository, enabling Vercel to deploy your latest pushes and merges to main.

Once deployed, your app can begin 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 /_vercel/insights/view when you visit any page.

Follow the steps above to enable Vercel analytics successfully and start tracking visitors and page views.

Group 21

Troubleshooting Vercel Analytics

People in Office - Vercel Analytics

No Data Visible in Web Analytics Dashboard

If data is not visible in the analytics dashboard or a 404 error occurs while loading script.js, it could be because you deployed the tracking code before enabling web analytics.

How to fix:

  • Make sure that you have enabled Analytics in the dashboard
  • Re-deploy your app to Vercel
  • Promote your latest deployment to production. To do so, visit the project in your dashboard and select the deployments tab. From there, select the three dots to the right of the most recent deployment and select promote to production.

Not Working With Proxy (e.g., Cloudflare)

Web Analytics may not function when using a proxy, such as Cloudflare.

How to fix:

  • Check your proxy configuration to make sure that all desired pages are correctly proxied to the deployment

Forward all requests to /_vercel/insights/* to the deployments to ensure proper functioning of web analytics through the proxy.

next

Catch Issues Before They Affect Your Users with Alerty's NextJS Logging Tool

Alerty is a cloud monitoring service designed specifically for developers and early-stage startups. This powerful tool offers various monitoring services, including:

  • Application performance monitoring,
  • Database monitoring
  • Incident management

Alerty supports various technologies commonly used by developers, such as:

  • NextJS
  • React
  • Vue
  • Node.js

By leveraging Alerty, developers can easily identify and resolve application issues, ensuring optimal end-user performance. 

Deep Database Insights

One of Alerty's standout features is its support for monitoring key metrics in popular databases like:

  • Supabase
  • PostgreSQL
  • RDS

By tracking metrics such as CPU usage and memory consumption, Alerty provides deep insights into database performance, enabling developers to optimize their database operations effectively.

Proactive User Experience

Alerty excels in incident management and Real-User Monitoring (RUM). This combination of services allows developers to proactively address issues before they impact end-users, ensuring a seamless user experience. Alerty's Universal Service Monitoring feature covers essential dependencies like:

  • Stripe API
  • OpenAI
  • Vercel

Simplified Setup and Cost-Effectiveness

Alerty's use of AI simplifies the setup process, making it easy for developers to get up and running quickly. This streamlined setup and its cost-effective pricing compared to competitors make Alerty an attractive option for developers and small teams looking for efficient and affordable monitoring solutions. The seamless integration with tools like Sentry further enhances Alerty's appeal, allowing developers to streamline their monitoring and incident management workflows effectively. 

NextJS Logging and Streamlined Workflows

Alerty is a valuable tool that empowers developers to monitor, analyze, and optimize their applications efficiently. By leveraging Alerty's NextJS logging tool, developers can catch issues before they impact end-users, ensuring a smooth and reliable user experience. 

If you're looking for a comprehensive monitoring solution with robust features and ease of use, Alerty is the ideal choice for your Vercel logging needs.

Related Reading