Analytics
Setup analytics for your TurboStart project.
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.
- Create a PostHog account on the PostHog website.
- 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>
);
}
If you have any questions, please reach out to me on Twitter @checkerschaf. I’m happy to help!