ANALYTICS / LESSON 03

PostHog in Your App.

Setting up PostHog, session recordings, funnels and feature flags

Written by Andrew Lee JenkinsPublished Oct 5, 20264 min readFree lesson

Setting Up PostHog

Getting started is pretty painless.

Step 1. Create Account

Step 2. Install the Library

Add PostHog to your app.

Step 3. Initialize

Set PostHog up when your app loads.

Step 4. Track Events

Add tracking code wherever the important stuff happens.

Here's a basic setup for a Next.js app. Install the library first.

Example

npm install posthog-js

Then put your project token and host in .env.local. Use https://us.i.posthog.com if your PostHog project lives in the US cloud, or https://eu.i.posthog.com if it's in the EU cloud.

Example

NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN=your_project_token
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

Last, create a file called instrumentation-client.js in the root of your Next.js app. Next.js runs it once in the browser when your app loads, which is exactly when PostHog wants to start up.

Example

// instrumentation-client.js

import posthog from 'posthog-js'

posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN, {
  api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
  defaults: '2026-05-30'
})

That defaults date pins PostHog's default settings to a specific version, so an update doesn't quietly change how your tracking behaves. Copy whatever date PostHog's own Next.js docs show when you set it up.

Session Recordings

One of PostHog's coolest features is session recording. It records exactly what people do in your app... mouse movements, clicks, scrolling, all of it.

This stuff is crazy valuable for a few jobs.

Finding the confusing parts of your interface
Seeing how people actually get tasks done
Spotting weird ways people use your app that you never planned for
Debugging problems users report

Funnels

A "funnel" follows people through a series of steps. Here's a checkout funnel, for example.

View product (1,000 users)
Add to cart (300 users)
Start checkout (150 users)
Complete purchase (100 users)

The funnel shows you where people drop off. In this example, MOST of them leave between viewing the product and adding it to the cart. So that's your sign to go fix the product page.

Feature Flags

PostHog comes with feature flags, which are a way to show new features to only some of your users.

Example

// Flags load in the background, so wait for them first
posthog.onFeatureFlags(() => {
  if (posthog.isFeatureEnabled('new_checkout')) {
    // Show new checkout
  } else {
    // Show old checkout
  }
})

That onFeatureFlags wrapper matters. Right when the page loads PostHog hasn't fetched your flags yet, so checking too early can show everybody the old version.

Here's what that lets you do.

Test features with a small percentage of users first
Roll out risky changes a lil at a time
A/B test different versions
Shut a feature off fast if something goes sideways

Loading the lesson…

Loading activities…