> ## Documentation Index
> Fetch the complete documentation index at: https://www.magicpatterns.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# PostHog

> Learn how to integrate PostHog into your Magic Patterns design

## Introduction to PostHog

[PostHog](https://www.posthog.com/)

 is 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](https://app.posthog.com/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`

> [!TIP]
>
> 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>
```

> [!NOTE]
>
> 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

> [accordion] Is PostHog free to use?
>
> PostHog offers a generous free tier with 1 million events per month. You can upgrade to paid plans as your usage grows.

> [accordion] What kind of analytics can I track with PostHog?
>
> 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.

> [accordion] I have more questions about PostHog.
>
> Please visit the [PostHog documentation](https://posthog.com/docs) for more information.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.