Tracking custom events

Vercel Web Analytics allows you to track custom events in your frontend application using the va.track() function. This is handy for tracking user interactions, such as button clicks, form submissions or purchases.

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');

This will track an event named Signup.

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.

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

It’s important to note that custom events can only be tracked on the client-side. Server-side events are not currently supported by Vercel Web Analytics.

You can also pass custom data along with an event by passing an object as the second argument to va.track(). The object should contain key-value pairs, where the keys and values can only be strings, numbers, booleans, or null. Note that the number of custom data properties you can pass is limited based on your plan. See the pricing documentation for more details.

va.track('Signup', { location: 'footer' });
va.track('Purchase', { productName: 'Shoes', price: 49.99 });

This will track a "Signup" event and also includes the information that the event occurred in the "footer" location. The second event will track a "Purchase" event with product name and a price.

Limitations

• Nested objects are not supported
• Allowed values are strings, numbers, booleans, and null
• Event name, key and values should be no longer than 255 characters