You built the landing page, wired up Stripe, launched. And then... silence. Zero purchases. Was the page broken? Did anyone even see the price? Did they click anything?
Without custom events, PostHog tells you "12 people visited /lifetime." With them, it tells you "12 visited, 8 scrolled to the CTA, 3 clicked 'See the demo,' 1 started checkout, 0 completed purchase." Now you know the leak is between checkout-start and payment -- not the page itself.
Here's how I set this up for a real $59 lifetime deal, running Next.js 16 on Vercel.
The events that matter
Before writing any code, I mapped the funnel on paper. Every SaaS purchase page has the same shape:
Page load -> Scroll past fold -> Engage with content -> Click CTA -> Start checkout -> Complete purchase
Each transition is a place users leak out. Each one becomes a PostHog event:
| Event name | Fires when | What it tells you |
|---|---|---|
ltd_page_viewed |
Component mounts | Someone actually loaded the page (not just clicked a link that errored) |
ltd_demo_clicked |
User clicks "See the demo" | They wanted proof before paying |
ltd_notify_clicked |
User submits the email form | Interested but not ready to pay -- warm lead |
ltd_cta_scrolled |
User scrolls the CTA into viewport | They saw the price and the button |
checkout_started |
User clicks "Buy lifetime access" | Payment intent exists |
I deliberately kept this to five events. More than that and you drown in noise. Fewer and you can't find the leak.
The PostHog provider (Next.js App Router)
PostHog's React SDK needs to initialize client-side. In the App Router, that means a client component wrapped in Suspense:
// src/components/PostHogProvider.tsx
'use client';
import posthog from 'posthog-js';
import { PostHogProvider as PHProvider } from 'posthog-js/react';
import { useEffect } from 'react';
export default function PostHogProvider({
children,
}: {
children: React.ReactNode;
}) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: 'https://us.i.posthog.com',
capture_pageview: true,
capture_pageleave: true,
});
}, []);
return <PHProvider client={posthog}>{children}</PHProvider>;
}
In your root layout, wrap it in Suspense:
// app/layout.tsx
import { Suspense } from 'react';
import PostHogProvider from '@/components/PostHogProvider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<Suspense fallback={null}>
<PostHogProvider>{children}</PostHogProvider>
</Suspense>
</body>
</html>
);
}
Why the Suspense boundary? Without it, the PostHog provider blocks server rendering and your pageview events silently vanish. I lost six days of analytics to this exact issue before catching it. If you're on Next.js 15+, this wrapper is mandatory.
Tracking page-mount events
The simplest custom event: fire when the component mounts. I built a reusable component for this:
'use client';
import { usePostHog } from 'posthog-js/react';
import { useEffect } from 'react';
export default function TrackPageView({ name }: { name: string }) {
const posthog = usePostHog();
useEffect(() => {
posthog?.capture(name);
}, [posthog, name]);
return null;
}
Drop it anywhere:
// app/lifetime/page.tsx
export default function LifetimePage() {
return (
<>
<TrackPageView name="ltd_page_viewed" />
<Hero />
<Pricing />
<FAQ />
</>
);
}
Zero visual footprint, fires once on mount, survives React StrictMode's double-render because PostHog deduplicates by default.
Tracking clicks with inline capture
For button clicks, call posthog.capture directly. No wrapper component needed:
'use client';
import { usePostHog } from 'posthog-js/react';
export function DemoLink({ href }: { href: string }) {
const posthog = usePostHog();
return (
<a
href={href}
onClick={() => posthog?.capture('ltd_demo_clicked')}
>
See the demo
</a>
);
}
Same pattern for the purchase button. I also pass properties when they matter:
posthog?.capture('checkout_started', {
price: 59,
currency: 'USD',
plan: 'lifetime',
});
Properties are free in PostHog. Add them liberally -- you can filter on them later without changing code.
Tracking scroll depth with IntersectionObserver
This one catches the "did they even see the CTA?" question:
'use client';
import { usePostHog } from 'posthog-js/react';
import { useEffect, useRef } from 'react';
export function TrackVisibility({
name,
children,
}: {
name: string;
children: React.ReactNode;
}) {
const posthog = usePostHog();
const ref = useRef<HTMLDivElement>(null);
const fired = useRef(false);
useEffect(() => {
if (!ref.current) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting && !fired.current) {
fired.current = true;
posthog?.capture(name);
}
},
{ threshold: 0.5 }
);
observer.observe(ref.current);
return () => observer.disconnect();
}, [posthog, name]);
return <div ref={ref}>{children}</div>;
}
Wrap your CTA section:
<TrackVisibility name="ltd_cta_scrolled">
<PricingCard />
</TrackVisibility>
Now you know exactly what percentage of visitors scroll far enough to see your price.
Building the funnel in PostHog
Once events flow in, go to PostHog > Funnels > New Funnel. Add your events in order:
ltd_page_viewedltd_cta_scrolledltd_demo_clickedcheckout_started
PostHog shows you the conversion rate at each step and the exact drop-off between them.
In my case, the data showed 100% drop-off between ltd_page_viewed and checkout_started. Nobody even clicked. That told me the problem wasn't Stripe, wasn't the checkout flow, wasn't the pricing -- it was the page itself. The copy wasn't compelling enough to get a single click.
That's a painful answer, but it's the right one to have. Without the funnel, I'd have been debugging Stripe webhooks for a week.
What I'd add next
If I were doing this for a higher-traffic page, I'd add:
-
pricing_tab_switched: if you have monthly/annual toggle, track which one they pick -
faq_expanded: which questions they click tells you what objections they have -
testimonial_scrolled: did social proof even register?
Each event is one line of code. PostHog's free tier gives you 1 million events per month. Unless you're getting serious traffic, you won't hit that limit.
The setup cost
Total time to wire this up: about 45 minutes. The provider takes 10. Each custom event takes 5. The funnel visualization takes 10 minutes in the PostHog UI.
45 minutes of setup versus weeks of guessing why nobody is buying. That math works every time.
I build production analytics and AI systems for SaaS teams. If your product has traffic but no conversions and you can't see why, I can help.
SOCIAL SHARE CARD GENERATOR