Skip to main content

​
Introduction to PostHog

PostHogis an open-source product analytics platform that helps companies understand user behavior and improve their products. Track events, analyze user behavior, and make data-driven decisions.

​
Step by Step Tutorial

This tutorial walks you through setting up PostHog to capture analytics from your design directly.
1

Create a PostHog Account

Create a new PostHog account if you don’t already have one.Visit PostHog signup to get started.
2

Get Your Project Key and API Host

After creating your account, you’ll need two pieces of information:
  • Project Key: Found in your project settings under Project Settings → Project API Key
  • API Host: Found in the same location, typically looks like https://us.i.posthog.com or https://eu.i.posthog.com
The project key starts with phc_ followed by a long string of characters.
3

Prompt Magic Patterns to integrate PostHog

Use the following prompt to have Magic Patterns integrate PostHog into your design:
Help me install PostHog using posthog-js

Here is the project key: phc_YOUR_PROJECT_KEY_HERE

Here is the PostHog host: https://us.i.posthog.com

It should use PostHogProvider to wrap the app like this:

import { PostHogProvider } from 'posthog-js/react'

const options = {
  api_host: 'https://us.i.posthog.com',
  defaults: '2025-05-24',
}

<PostHogProvider apiKey="phc_YOUR_PROJECT_KEY_HERE" options={options}>
  <App />
</PostHogProvider>
Replace the project key and API host with your actual values from Step 2.
4

(Optional) Track Custom Events

Once PostHog is integrated, you can prompt Magic Patterns to track custom events:
Add a PostHog event tracker when users click the "Sign Up" button. 
Track it as a "signup_button_clicked" event.
Magic Patterns will use the PostHog capture method to track your custom events.

​
FAQ

PostHog offers a generous free tier with 1 million events per month. You can upgrade to paid plans as your usage grows.
PostHog automatically tracks page views and can track custom events like button clicks, form submissions, or any user interaction. It also supports feature flags, session recordings, and A/B testing.
Please visit the PostHog documentation for more information.