> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/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

<span>
  <a href="https://www.posthog.com/" target="_blank">
    PostHog
  </a>

  {` `}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.
</span>

## Step by Step Tutorial

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

<Steps>
  <Step title="Create a PostHog Account">
    Create a new PostHog account if you don't already have one.

    Visit <a href="https://app.posthog.com/signup" target="_blank">PostHog signup</a> to get started.
  </Step>

  <Step title="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.
    </Tip>
  </Step>

  <Step title="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.
    </Note>
  </Step>

  <Step title="(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.
  </Step>
</Steps>

## FAQ

<AccordionGroup>
  <Accordion title="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>

  <Accordion title="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>

  <Accordion title="I have more questions about PostHog.">
    Please visit the <a href="https://posthog.com/docs" target="_blank">PostHog documentation</a> for more information.
  </Accordion>
</AccordionGroup>