Analytics #

There’s a chance that the OKRs and KPIs your team is managing can be collected/measured programmatically. Collecting information can be important, especially as you continue to achieve virality.

Vercel Analytics #

Vercel already has a ton of analytics built into their platform, which you can check out here. Even with the plan our class has, you can track metrics such as the total number of visitors and views; speed and latency; and even build logs.

Tracking Client and Server Side Events #

You can also track more granular events, such as if a specific user clicked on a button. This tutorial gives a great example, and it seems like it takes just a few lines of code after installing @vercel/analytics:

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

You can also track server side actions, which can help you determine when certain API endpoints are called/invoked. There also seems to be a corresponding tutorial here:

import { track } from '@vercel/analytics/server';

export default function FeedbackPage() {
  async function submitFeedback(data: FormData) {
    'use server';

    await track('Feedback', {
      message: data.get('feedback') as string,
    });
  }

  return (
    <form action={submitFeedback}>
      <input type="text" name="feedback" placeholder="Feedback" />
      <button type="submit">Submit Feedback</button>
    </form>
  );
}

The above should cover most of the relevant tracking you might need. For the backend, we suggest tools such as PostHog, Prometheus, and Grafana.