Diven Rastdus

Posted on May 9 • Originally published at astraedus.dev

PostHog Custom Events: How I Tracked a $59 Payment Funnel from Page View to Stripe Checkout

#posthog #analytics #saas #nextjs

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_viewed
ltd_cta_scrolled
ltd_demo_clicked
checkout_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.

DEV Community