Getting started with Vercel Analytics

Vercel Analytics is a free analytics tool from Vercel. It shows you some basic analytics information for your website. In this article, I'll show you how to get started with Vercel Analytics, by adding it to a site and tracking pageviews...

Enable Vercel Analytics on the Vercel Dashboard

To get started with Vercel Web Analytics, visit —

https://vercel.com/<your-name>/<your-project>/analytics

Or navigate to the Analytics section for your projects on the Vercel Dashboard.

You should see a screen like this, asking you to enable Vercel Web Analytics —

You need to enable Vercel Analytics and add it to your website to start tracking visitors and page views.

Click the 'Next' button for pricing information, then click 'Enable'.

At the time of writing, the current Hobby (free) tier limits are -

• 2,500 events (pageviews) per month
• 1 month of history
• No custom events

This is enough to get started, but you'll outgrow them quickly.

After their recent aquisition of Splitbee, custom events were added to Pro and Enterprise plans. You can use custom events to track things like form submissions or button clicks, and I cover them below.

Install and enable Vercel Analytics on your website

Now that we've enabled Vercel analytics on our dashboard, we need to enable it in our app as well.

Vercel gives us three steps on their Analytics homepage -

1. Add @vercel/analytics to our code.
2. Import and initialize the package.
3. Deploy our changes and visit out site.

You can install Vercel Analytics by running —

yarn add @vercel/analytics

Or with NPM —

npn install @vercel/analytics

In pages/_app.jsx, import Vercel Analytics into your code, and initialize it —

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

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

Commit your changes, redeploy your app, and then visit your website URL.

If you check back on your Vercel Analytics page, you'll see the view gets tracked!

Here's what the MONN analytics page looks like (as of writing) —

This is what our Vercel Analytics Dashboard looks like at MONN.

The Vercel Analytics page is pretty bare-bones compared to other analytics providers. You'll be able to see your top pages and referrers which is handy, but not much else.

You can also see how many people are live on your site at a given time —

Event Tracking with Vercel Analytics

If you're on a Pro or Enterprise membership with Vercel, you can also track custom events with Vercel Analytics.

All you need to do is import @vercel/analytics, and then call va.track('event_name') —

import va from '@vercel/analytics'

// Call this function when a user clicks a button
// or performs an action you want to track
va.track('Signup')

For example, you might use this to track a button click like —

import va from '@vercel/analytics';

function trackSignupClick() {
  va.track('marketing-site_signup-button-clicked');
}
...
<button onclick="trackSignupClick">
  Sign up to our cool cloud monitoring SaaS.
</button>

Conclusion

I hope you found this article useful! I use Vercel Analytics as the primary analytics platform for MONN because it's simple to setup and use.

MONN integrates directly with Vercel to quickly and easily monitor the status of your Vercel sites, track their deployments, and monitor their latency. If you're interested, you can learn more or join our waitlist.