Skip to content
AI Workshop

Adding Analytics with PostHog

You’ve built something amazing and put it online. But how do you know if people are actually using it? That’s where analytics come in!

What is PostHog?

Section titled “What is PostHog?”

PostHog is a free, open-source analytics tool that helps you understand:

  • How many people visit your site
  • What pages they view
  • What buttons they click
  • Where they come from
  • And much more!

It’s privacy-friendly and has a generous free tier - perfect for personal projects.

Why Analytics Matter

Section titled “Why Analytics Matter”

Without analytics, you’re flying blind:

┌────────────────────────────────────────────────────────────┐
│                                                            │
│   Without Analytics:                                       │
│   "I wonder if anyone uses my site?" 🤷                    │
│                                                            │
│   With Analytics:                                          │
│   "50 people visited yesterday! Most clicked the          │
│    contact button but few filled out the form.            │
│    I should make the form simpler."  💡                   │
│                                                            │
└────────────────────────────────────────────────────────────┘

Step 1: Create a PostHog Account

Section titled “Step 1: Create a PostHog Account”
  1. Go to posthog.com
  2. Click “Get Started - Free”
  3. Sign up with your email or GitHub account

During Setup

Section titled “During Setup”
  • Choose “PostHog Cloud” (easiest option)
  • Select your region (usually US or EU)
  • Name your project
✅ Checkpoint

You should now see your PostHog dashboard!

Step 2: Get Your Snippet

Section titled “Step 2: Get Your Snippet”

PostHog will give you a JavaScript snippet to add to your site.

  1. Once you’ve created a new Project, use the onboarding wizard
  2. Look for the technology you are using in your project in the search bar or just copy the API key and ask Claude to implement posthog for you

Step 3: Add to Your Website

Section titled “Step 3: Add to Your Website”

Paste the snippet in your HTML file, just before the closing </head> tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Awesome Project</title>
  <link rel="stylesheet" href="styles.css">


  <!-- PostHog Analytics -->
  <script>
    !function(t,e){/* ... PostHog snippet ... */}
    posthog.init('YOUR_API_KEY_HERE', {api_host: 'https://app.posthog.com'})
  </script>
</head>
<body>
  <!-- Your content -->
</body>
</html>
⚠️ Replace the API key! Make sure to use your actual PostHog API key from your dashboard.

Step 4: Test It’s Working

Section titled “Step 4: Test It’s Working”
  1. Save your file
  2. Open it in your browser
  3. Go back to PostHog dashboard
  4. Click “Live Events” in the sidebar
  5. You should see your visit appear in real-time!
✅ Checkpoint

If you see events appearing in PostHog, analytics is working!

Step 5: Track Custom Events

Section titled “Step 5: Track Custom Events”

PostHog automatically tracks page views. But you can also track specific actions like button clicks and form submissions! Posthog also comes with session replays out of the box which means that you can also view your users using your website in a anonymized manner.

Understanding Your Dashboard

Section titled “Understanding Your Dashboard”

Let’s explore what PostHog shows you:

Posthog dashboard

Web Analytics

Section titled “Web Analytics”

The main dashboard shows:

  • Unique visitors - How many different people visited
  • Page views - Total pages viewed
  • Sessions - Browsing sessions
  • Bounce rate - People who left immediately

Creating Your First Insight

Section titled “Creating Your First Insight”

Insights help you answer specific questions about your data.

Asking Posthog’s AI
Section titled “Asking Posthog’s AI”

Now with Posthog’s inbuilt AI, you can just talk to the AI and get it to implement the insights you want. Once it creates the insight in chat, remember to ‘Save’ it so that you can add it to the Dashboard.

Manually setting up Insights
Section titled “Manually setting up Insights”

To explore making your own insights, here’s an example on how you could go about it.

  1. Go to “Insights” in PostHog
  2. Click “New Insight”
  3. Choose “Trends”
  4. Select your event (e.g., “signup_button_clicked”)
  5. Click “Save”

Now you can see how many times that button was clicked over time! Play around with the configurations like Filters, Breakdowns and Visualization types and see what works best for you.

What to Track (And What Not To)

Section titled “What to Track (And What Not To)”

Good Things to Track

Section titled “Good Things to Track”
EventWhy It’s Useful
Page viewsKnow which pages are popular
Button clicksSee what features people use
Form submissionsTrack conversions
Error occurrencesFind problems to fix

Don’t Track

Section titled “Don’t Track”
  • Personal information (names, emails)
  • Passwords or sensitive data
  • Anything users wouldn’t expect

PostHog Free Tier

Section titled “PostHog Free Tier”

PostHog’s free tier includes:

  • 1 million events/month - Plenty for personal projects
  • Session recordings
  • Feature flags
  • Unlimited team members

Perfect for what we’re building!

✅ Checkpoint

That's it! You've added analytics to your project! You can now see how people interact with your site.

What You’ve Accomplished!

Section titled “What You’ve Accomplished!”

Take a moment to appreciate how far you’ve come:

  • ✅ Created a GitHub account
  • ✅ Installed Claude Code
  • ✅ Learned Git basics
  • ✅ Built a real project with AI
  • ✅ Tested it locally
  • ✅ Deployed it to the internet
  • ✅ Learned to use the Claude API
  • ✅ Added analytics

You’re no longer a complete beginner - you’re a builder! 🎉

Next Steps

Section titled “Next Steps”

Check out the Reference section for: