Tracking custom events

To track an event:

1. Make sure you have @vercel/analytics version 1.1.0 or later installed.

2. Import { track } from @vercel/analytics.

3. In most cases you will want to track an event when a user performs an action, such as clicking a button or submitting a form, so you should use this on the button handler.

4. Call track and pass in a string representing the event name as the first argument. You can also pass custom data as the second argument:

   component.ts

   import { track } from '@vercel/analytics';
    
   // Call this function when a user clicks a button or performs an action you want to track
   track('Signup');

For example, if you have a button that says Sign Up, you can track an event when the user clicks the button:

import { track } from '@vercel/analytics';
 
function SignupButton() {
  return (
    <button
      onClick={() => {
        track('Signup');
        // ... other logic
      }}
    >
      Sign Up
    </button>
  );
}

You can also pass custom data along with an event. To do so, pass an object with key-value pairs as the second argument to track():

In scenarios such as when a user signs up or makes a purchase, it's more useful to track an event on the server-side. For this, you can use the track function on API routes or server actions.

To set up server-side events:

1. Make sure you have @vercel/analytics version 1.1.0 or later installed.
2. Import { track } from @vercel/analytics/server.
3. Use the track function in your API routes or server actions.
4. Pass in a string representing the event name as the first argument to the track function. You can also pass custom data as the second argument.

For example, if you want to track a purchase event:

'use server';
import { track } from '@vercel/analytics/server';
 
export async function purchase() {
  await track('Item purchased', {
    quantity: 1,
  });
}