Setting Up PostHog for a New Product (Without Drowning in Data)

Most teams install PostHog, autocapture everything, and then never look at it again. Here is how to set it up so you actually learn something in your first week.

Installation in Next.js

npm install posthog-js @posthog/next

Create a providers file to initialize PostHog on the client side:

// app/providers.tsx
"use client";
import posthog from "posthog-js";
import { PostHogProvider as PHProvider } from "posthog-js/react";
import { useEffect } from "react";

export function PostHogProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN!, {
      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com",
      capture_pageview: true,
      capture_pageleave: true,
    });
  }, []);
  return <PHProvider client={posthog}>{children}</PHProvider>;
}

Wrap your root layout with <PostHogProvider> and you are done with setup.

Which Events to Track First

You do not need fifty events on day one. You need five:

1. signup_completed: include the signup method (email, Google, GitHub).
2. onboarding_step_completed: each step, with a step_name property.
3. activation_event: the action that means a user "got it." For a project management tool, that is creating their first task.
4. core_feature_used: the one thing your product does that nothing else does.
5. subscription_started: always track revenue events server-side too.

posthog.capture("activation_event", {
  action: "created_first_project",
  time_since_signup_seconds: 340,
  plan: "free",
});

Properties matter more than event names. A single event with good properties beats ten events with no context.

Setting Up Your First Funnel

Build this one immediately: Signup to Activation.

• Step 1: signup_completed
• Step 2: onboarding_step_completed (filter: step_name = final_step)
• Step 3: activation_event

Set the conversion window to 7 days. If 80% sign up but only 15% activate, you know exactly where to focus. Break it down by signup method or referral source. The breakdown is where the insight lives.

Session Recordings: Be Selective

Do not record everything. Set up filters:

• Sessions where the user visited pricing but did not convert.
• Sessions where the user hit an error state.
• Sessions from users who signed up in the last 48 hours.

Start with a 50% sampling rate. Watch five recordings per week. Five recordings of confused users will teach you more than a month of staring at bar charts.

Feature Flags Basics

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

function PricingPage() {
  const showNewPricing = useFeatureFlagEnabled("new-pricing-layout");
  if (showNewPricing) return <NewPricingLayout />;
  return <CurrentPricingLayout />;
}

Start at 10% rollout, watch for errors, then ramp to 50% and 100%. Two rules: always have a default fallback (if PostHog goes down, your app still works), and clean up old flags after two weeks at 100%. Dead flags are tech debt.

Your Day One Dashboard

Create one dashboard called "Product Health" with five panels:

1. Daily active users (line chart, last 30 days)
2. Signup to activation funnel (funnel chart, last 14 days)
3. Signups by source (bar chart, broken down by utm_source)
4. Core feature usage (line chart, daily count of your activation event)
5. Error rate (line chart, count of error events)

Open it every morning with coffee. Five charts, no more. Track what helps you make decisions, ignore everything else, and revisit your tracking plan monthly as your product evolves.