LovablePostHogBeginner6 min read

How to Add Analytics to Your Lovable App with PostHog

Track user behavior, feature usage, and conversion funnels in your Lovable app with PostHog. Open source and free tier available.

Before you start

✓A Lovable app
✓A PostHog account (free at posthog.com)
✓Your PostHog project API key

Step by step

Get your PostHog API key

In PostHog, go to Project Settings and copy your API key and host URL.

# PostHog → Project Settings
# Project API Key: phc_your_key
# Host: https://app.posthog.com (or your self-hosted URL)

Add the PostHog script

Ask Lovable to add PostHog's JavaScript snippet to your app.

Paste this into Lovable:

Add PostHog analytics to my app:
1. Add the PostHog JavaScript snippet to the document head
2. Initialize with my API key and host
3. Enable autocapture for clicks, pageviews, and form submissions
4. Identify users with their email when they log in
5. Don't track if the user hasn't consented (add a cookie banner)

Track custom events

Add tracking to important actions like sign-ups, purchases, and feature usage.

Paste this into Lovable:

Add PostHog event tracking to these actions:
1. posthog.capture('signed_up') when a user creates an account
2. posthog.capture('plan_selected', { plan: 'pro' }) when they pick a plan
3. posthog.capture('feature_used', { feature: 'export' }) when they use key features
4. posthog.capture('payment_completed', { amount: 29 }) after successful payment

Identify users

Connect anonymous events to real users when they sign in.

Paste this into Lovable:

When a user logs in, call posthog.identify(user.id, { email: user.email, name: user.name, plan: user.plan }) to link their anonymous session to their account.

Set up a conversion funnel in PostHog

In the PostHog dashboard, create a funnel to track your key conversion path.

# PostHog → Funnels → New Funnel
# Step 1: Pageview on /pricing
# Step 2: plan_selected event
# Step 3: payment_completed event
# Conversion window: 7 days