Module 4, Lesson 5: Setup PostHog Analytics

In this lesson, I’m adding product analytics to the landing page using PostHog. This is the final setup step before we start driving traffic — because there’s no point sending people to a page if you can’t measure what’s working.

Before We Start

Here’s what I’d expect you to have in place before this lesson:

From previous lessons:

• Your landing page is live on a custom domain — you completed this in Module 4, Lesson 4
• The GitHub → Vercel pipeline is working — push to GitHub, Vercel deploys automatically (Module 4, Lesson 3)
• Kit (ConvertKit) integration is live — email signups land in your subscriber list (Module 4, Lesson 2)
• Claude Code is installed and running in your WebStorm terminal (Module 3, Lesson 3)

Tools / setup you’ll need:

• WebStorm (or VS Code)
• Claude Code running in the WebStorm terminal
• A PostHog account — go to posthog.com and sign up (free tier is more than enough)

By the end of this lesson, you’ll:

• Understand why product analytics matters before you drive traffic
• Have PostHog installed on your landing page and tracking key events
• Know how to use Claude Code to handle the entire installation with a single prompt
• Have your changes committed and deployed live via the GitHub → Vercel pipeline

About This Lesson

Duration: ~8 minutes video + ~15 minutes practice Skill Level: Intermediate What You’ll Build: A PostHog integration on your landing page that tracks key user events — scrolling, button clicks, pricing interactions, and email signups.

This is one of those lessons where the actual work is fast but what it unlocks is huge. We’re adding the ability to see what people do on our page — which buttons they click, where they drop off, what’s converting. Without this, you’re flying blind when traffic starts coming in.

Watch the Lesson

What We’re Covering

Here’s what I’m walking you through in this lesson and why it matters if you’re trying to ship real things:

• Why analytics before traffic — you don’t send people to a page you can’t measure
• What PostHog is — a product analytics tool that tracks user events on your page
• The prompt pattern — how to get Claude Code to research, ask questions, and install PostHog in one go
• Getting your project token — where to find it in PostHog and how to hand it to Claude
• Commit and deploy — pushing the changes live through the pipeline we already set up

1. Why Analytics Before Traffic (~0:00)

At this point we have our landing page set up. It’s live, it’s on a proper URL, and people can visit it. So what’s left before we start driving traffic?

Measurement.

When people come to our page, we want to know: are they scrolling down? Are they clicking buttons? If they click a button, where does it go — or where do they leave? Are they interacting with the pricing section? Are they actually signing up, or are they bouncing?

Pretty much, we’re trying to gather product analytics. That’s what this lesson is about.

This is the final step before you actually start sending people here. Because if you drive traffic without analytics in place, you have no idea what’s working and what isn’t. You’re making decisions in the dark.

2. What Is PostHog?

2.1 The Tool

The product we’re using to track analytics in this course is called PostHog. It’s a very popular product analytics platform. Even if you’re not familiar with it, don’t worry — as we go through it, you’ll see what we’re getting.

PostHog gives you event-based analytics: it tracks what users do on your page (clicks, scrolls, pageviews) and lets you see that data in dashboards. It also offers session replay, feature flags, and A/B testing — but for our landing page, we’re focused on the core analytics.

The free tier is generous — you get 1 million events per month, which is way more than a pre-launch landing page will generate. No credit card required.

2.2 What We’re Tracking

For a landing page like ours, the key events we care about are:

• Page views — how many people are actually visiting
• Scroll depth — are people reading the whole page or bouncing early?
• Button clicks — which CTAs are getting engagement?
• Pricing interaction — are people looking at the pricing section? This matters because we’re using the landing page as a pre-launch test, and knowing which pricing tier gets more attention tells us what’s converting better
• Email signups — the main conversion event, tied to our Kit integration from Module 4, Lesson 2

2.3 How This Connects to Module 4, Lesson 2 — Connect to ConvertKit

In Module 4, Lesson 2, we set up Kit for email capture. In this lesson, I also told Claude that we’re already using Kit and asked it to capture user properties — linking the analytics user to the email subscriber — so that eventually, when people convert, we can do analytics on those users too. The two tools work together: Kit captures the lead, PostHog tells you what they did before and after signing up.

3. Sign Up for PostHog (~0:50)

3.1 Create Your Account

Head to posthog.com and click Get Started. You’ll get a signup screen — go ahead and complete the registration.

During onboarding, PostHog will ask you a few things: your company, what you’re building, what you want to do. I just left it as Product Analytics and clicked “Let’s Go.”

3.2 Stop at the Install Screen

Here’s the key thing: when you get to the install screen — the one that shows you code snippets and SDK options — just stop. Don’t manually install anything.

We’re going to let Claude Code handle the installation. That’s the whole point of how we work in this course.

4. Let Claude Code Install PostHog (~1:40)

4.1 The Prompt

Jump back into WebStorm where you have Claude Code running. Here’s the prompt I used:

I will want to track key events on my landing page with PostHog, research the key events I need and install setup PostHog.
When done give me the setup steps.
Before you do this, ask me all the questions you need.

This is the same pattern we used in Module 4, Lesson 2 with Kit — tell Claude what you want, ask it to do the research, and critically, tell it to ask you questions first before it starts making changes.

4.2 Claude’s Questions

Claude came back and asked me a few clarifying questions. The exact questions you get might differ from mine — that’s normal. Claude adapts based on your project context.

Here’s how I answered mine:

1. Is PostHog already set up? — No, I want it installed fresh. I’m using the API (cloud-hosted, not self-hosted). You’ll probably be using this option too.
2. What’s the main conversion goal? — Email signup. That’s our primary event.
3. Do you want to track pricing interaction? — Yes. Since we’re using this landing page as a pre-launch test, I want to know which pricing tier gets more attention. That data tells me what’s converting better.
4. Privacy and compliance (GDPR/CCPA)? — PostHog uses cookies to track users, and normally you’d need a cookie consent banner for compliance. But since this is a pre-launch page, I’m comfortable keeping it loose for now. This is something you’d want to tighten up before a full launch.
5. Existing tools — are you using Kit? — Yes, we are. I also told Claude I want it to capture user properties and link the analytics user to the email subscriber if possible, so we can do analytics on converted users down the line.

Once I answered those questions, I let Claude do its thing.

4.3 The API Key

Claude started working and mentioned it needed my PostHog project key. It used a placeholder for now and kept going — it doesn’t need to stop for that.

While Claude was running, I went back to PostHog, and here’s where you grab your token:

1. Go to your PostHog dashboard
2. Find your Project API Key (sometimes called the project token)
3. Click Copy

Then back in Claude Code, I just said: “Here is my API key” and pasted it in. Claude picked it up and continued — it figured out where to put it without stopping.

5. Commit and Deploy (~5:40)

5.1 Push to GitHub

Once Claude finished the installation, everything was still only on my local machine. To get it live, I told Claude Code:

commit and push this

That’s it. Remember — we set up the GitHub connection earlier in the course. Claude Code commits the changes and pushes them to GitHub.

5.2 Vercel Auto-Deploys

When we push to GitHub, Vercel picks it up automatically — that’s the pipeline we built in Module 4, Lesson 3. If you go to your project on GitHub, you should see a green checkmark next to the latest commit. Click it, and it’ll tell you the Vercel deployment was completed.

So the flow is: Claude Code commits → pushes to GitHub → GitHub triggers Vercel → Vercel deploys → your live page is updated.

5.3 Nothing Visible Changes

If you go to your landing page and refresh, you won’t see anything different. That’s expected — PostHog runs in the background. There’s no visible UI change on your page. The tracking is invisible to visitors.

6. Finish PostHog Onboarding (~6:50)

6.1 Complete the Setup Wizard

Now go back to that PostHog install screen we paused on earlier. Since we already installed PostHog via Claude Code, we don’t need to follow their manual instructions.

Here’s what to do:

1. On the SDK selection screen, select All or Web (you should see JS listed)
2. Click Skip Installation — we already handled this
3. Autocapture — leave the defaults as they are. PostHog’s autocapture tracks clicks and pageviews automatically
4. Session Replay — I enabled this. Why not? It lets you watch recordings of real user sessions on your page
5. Skip through the rest — stick to the free plan, don’t invite anyone, and click Finish

6.2 Verify Events Are Coming In

After finishing the wizard, go back to your live landing page and do a few actions — scroll around, click some buttons, interact with the page.

Then check your PostHog dashboard. You should start seeing events appear. If PostHog was showing “waiting for events” before, it should now be picking up your activity.

7. Try It Yourself

Exercise 1: Install PostHog on Your Landing Page

What to do: Follow the steps above — sign up for PostHog, grab your project token, use the prompt in Claude Code, answer Claude’s questions based on your project, then commit and push.

A nudge if you’re stuck: The most common issue is forgetting to give Claude your project API key. If Claude used a placeholder, make sure you paste your real key before committing. Check your project code for phc_ followed by a string — that’s what a PostHog project key looks like.

How you’ll know it’s working: Go to your live landing page, click around for 30 seconds, then check your PostHog dashboard. You should see events — pageviews, clicks, maybe custom events Claude set up. If PostHog shows “waiting for events,” your key might be wrong or the deployment hasn’t gone through yet.

Exercise 2: Explore the PostHog Dashboard

What to do: Spend 10 minutes clicking around PostHog. Look at the event feed, check out session replay if you enabled it, and find where your custom events show up.

What this is practising: Familiarity. You don’t need to master PostHog right now — but knowing where things live in the dashboard will matter when you start analysing traffic later.

8. You Should Be Able to Do This Now

Here’s what you can do with what we just covered:

• Install PostHog on any web project using Claude Code
• Use the “ask me questions first” prompt pattern to get Claude to gather context before making changes
• Find and copy your PostHog project token
• Push changes live through the GitHub → Vercel pipeline

Check Yourself

• I have a PostHog account on the free tier
• PostHog is installed on my landing page (via Claude Code)
• My project API key is in the code (not a placeholder)
• I’ve committed and pushed the changes to GitHub
• Vercel has deployed the update (green checkmark on GitHub)
• I can see events in my PostHog dashboard after visiting my live page

If Something’s Not Working

The Short Version

Here’s what I want you to walk away with:

• Set up analytics before you drive traffic — you can’t optimise what you can’t measure
• PostHog tracks what users do on your page — clicks, scrolls, conversions, all of it, with a generous free tier
• Claude Code handles the install — use the “ask me questions first” prompt pattern, hand over your API key, and let it work
• The deployment pipeline does the rest — commit, push to GitHub, Vercel deploys automatically

Quick Reference

The Prompt

I will want to track key events on my landing page with PostHog, research the key events I need and install setup PostHog.
When done give me the setup steps.
Before you do this, ask me all the questions you need.

Where to Find Your PostHog Project Token

PostHog Dashboard → Project Settings → Project API Key → Copy

The key will start with phc_ followed by a long alphanumeric string.

Deploy After Installing

commit and push this

This commits the PostHog changes and pushes to GitHub, which triggers Vercel to redeploy.

Key Events for a Landing Page

Pageview            — someone visited
Scroll depth        — how far down they got
CTA button click    — which buttons are getting engagement
Pricing interaction — are people looking at pricing tiers?
Email signup        — the main conversion event

Resources

Links & Docs

• PostHog — the product analytics platform used in this lesson
• PostHog JavaScript SDK Docs — reference for the JS library Claude Code installs
• PostHog Free Tier Details — 1M events/month free, no credit card required

Tools Used

• PostHog — product analytics
• Claude Code — AI coding assistant, running inside the WebStorm terminal
• WebStorm — IDE used throughout the course (VS Code works fine too)
• Vercel — deployment and hosting, connected since Module 4, Lesson 3

Questions I Get Asked

Q: Why PostHog and not Google Analytics?

PostHog is designed for product analytics — tracking specific user actions and events — which is what we need for a landing page we’re testing. Google Analytics is more geared toward general website traffic and marketing attribution. PostHog’s free tier is also extremely generous, and it’s what we’ll use for the actual product later too, so starting here means one less migration.

Q: Do I need a cookie consent banner?

Technically, if you’re collecting data from users in the EU (GDPR) or California (CCPA), yes. PostHog uses cookies to track users. For a pre-launch page, I kept it loose — but if you’re driving significant traffic or your audience is in those regions, you’ll want to add a consent banner before a full launch. PostHog has built-in support for cookie-less tracking if you want to go that route later.

Q: What if Claude Code asks me different questions than what you showed?

That’s expected. Claude adapts to your specific project and context. The questions might be worded differently or focus on different areas. The key things to communicate are: you want PostHog installed (cloud, not self-hosted), your main conversion event is email signup, and whether you want to track pricing interactions. Answer honestly based on your project and Claude will figure out the rest.

Q: Can I see session recordings of real users?

Yes — if you enabled Session Replay during PostHog’s onboarding wizard, you’ll start seeing recordings once real traffic hits your page. It’s genuinely useful for seeing where people hesitate, what they skip, and where they drop off. The free tier includes 5,000 recordings per month.

Q: How do I know I’m ready for the next lesson?

If PostHog is installed, events are showing up in your dashboard, and the deployment is live — you’re good. The next lesson covers handling ad blockers, which can prevent PostHog from tracking some users.

💬 Stuck? Come Talk to Us

Glossary

PostHog: An open-source product analytics platform that tracks user events — clicks, pageviews, scrolls, custom events — and provides dashboards, funnels, session replay, and more. Free tier includes 1M events/month. (introduced in Module 4, Lesson 5)

Product analytics: The practice of tracking and analysing how users interact with your product or page. Different from general web analytics (like GA) — product analytics focuses on specific user actions and conversion events. (introduced in Module 4, Lesson 5)

Project API Key (PostHog): A unique identifier for your PostHog project, used by the JavaScript SDK to send events to the correct dashboard. Starts with phc_. Found in your PostHog project settings. Not the same as a personal API key. (introduced in Module 4, Lesson 5)

Autocapture: A PostHog feature that automatically tracks clicks, pageviews, and other standard user interactions without you manually defining each event. Useful as a baseline — you can layer custom events on top. (introduced in Module 4, Lesson 5)

Session Replay: A PostHog feature that records real user sessions on your page — like watching a screen recording of what each visitor did. Useful for spotting UX issues and understanding drop-off points. Free tier includes 5,000 recordings/month. (introduced in Module 4, Lesson 5)

Event (analytics): A single tracked action — like a pageview, button click, or form submission. PostHog records these and lets you analyse them in dashboards. The free tier covers 1M events per month. (introduced in Module 4, Lesson 5)