Analytics

Analytics are a crucial part of any project. They help you understand how your users interact with your project and what you can do to improve their experience. TurboStart comes with built-in support for PostHog, so you can start tracking your users right away.

Both client-side and server-side analytics are built-in. This means you can track events on the client-side, such as page views and button clicks, and on the server-side, such as user sign-ups and purchases.

​

Setup

To get started with analytics, you need to set up a PostHog account and add your project’s API key to your environment variables.

1. Create a PostHog account on the PostHog website.
2. Add your PostHog API key to your environment variables NEXT_PUBLIC_POSTHOG_KEY. You can find your API key in your PostHog project settings.

​

What is being tracked?

TurboStart tracks the following events by default:

• Page views: When a user visits a page on your project.
• Button clicks: When a user clicks a button on your project.
• User sign-ups: When a user signs up for your project.
• User logins: When a user logs in to your project.
• User purchases: When a user makes a purchase on your project.

You can customize these events and add new ones to track anything you want.

​

Usage

​

Server-side tracking

To track events on the server-side, you can use the posthog object from @/server/posthog.

import { posthog } from "@/server/posthog";

posthog.capture({
  distinctId: "user-123",
  event: "User Purchase",
  properties: {
    price: 100,
    currency: "USD",
  },
});

​

Client-side tracking

To track events on the client-side, you can use the usePostHog hook from posthog-js/react.

import { usePostHog } from "posthog-js/react";

function Button() {
  const posthog = usePostHog();

  return (
    <button
      onClick={() => {
        posthog.capture("Button Clicked");
      }}
    >
      Click me
    </button>
  );
}