Privacy-First Checkout Analytics

Build conversion funnel tracking with PostHog that reveals drop-offs without storing sensitive payment data

Introduction

This project has been archived

We're no longer updating this project - we recommend checking out our active projects instead!

If you've already completed this project, don't worry! Your documentation is still available for you to check out and share.

If you have any questions, leave a question in our Discord and we'll get back to you ASAP!

⚡️ 30 second Summary

Imagine your checkout is live - users visit, some buy, most don't. Where do they drop off? Is it the product page? The checkout form? The payment step? Without analytics, you're just guessing.

Companies like Brainboard, Y Combinator, and Supabase use PostHog for privacy-first analytics. They track checkout funnels to see exactly where customers abandon their purchase, then fix those gaps to boost conversions - without capturing sensitive user and payment data.

You'll build this same analytics setup through Cursor's chat - installing PostHog, tracking events, and building conversion funnels without writing manual code.

What you'll build

In this project, you'll use PostHog to set up privacy-first checkout analytics, track conversion funnels, and learn the methodology for finding and fixing drop-offs.

Why privacy-first analytics?

Traditional analytics often store sensitive data - card numbers, emails, addresses. That's a liability you don't need. What you need is visibility without risk.

PostHog lets you track user behavior without storing PII. You'll see exactly where users abandon their purchase, without ever touching their payment data. This keeps you compliant with PCI DSS, GDPR, and CCPA.

You don't need any prior analytics experience. This project teaches you the workflow professionals use to optimize conversions.

Not sure if this project is right for you? Check if it matches your goals

How you'll build it:

First, you'll install PostHog and set up event tracking for your checkout flow using Cursor. Then, you'll build a conversion funnel in PostHog to visualize where users drop off. Finally, you'll learn the data-driven methodology that companies use to turn funnel insights into conversion improvements.

By the end of this project, you'll have:

  • Privacy-safe event tracking set up with Cursor prompts and PostHog.
  • A conversion funnel from landing page to successful payment.
  • 💎 Secret Mission: An A/B test comparing different checkout button text.

What do I need before starting?

This project builds on Ship a Landing Page with v0 and Vercel (Part 1) and Secure Payments with Stripe (Part 2). You'll reuse the checkout application and Stripe integration from those projects.

💡 Is PostHog free?

Yes! PostHog offers a generous free tier with 1 million events per month - more than enough for this project. You won't need a credit card to get started.

If you're up for a bit of a challenge, quiz yourself on the key concepts up ahead in this project! Don't be too nervous, you'll also get a quiz at the end of this project, to recap what you've learned.

Want a complete demo of how to do this project, from start to finish? Check out our 🎬 walkthrough with Kahu 🎬

This project is part of a series:

  1. Part 1: v0 + Vercel (recommended)
  2. Part 2: Stripe Payments (recommended)
  3. Part 3: You are here!

Track Checkout Events Without Storing Sensitive Data

Your checkout is live - but you're flying blind. Users visit, some buy, most don't. Where do they drop off? Is it the product page? The checkout form? The payment step? Without analytics, you're just guessing.

Here's the challenge: traditional analytics often store sensitive data - card numbers, emails, addresses. That's a liability you don't need. What you need is visibility without risk.

That's exactly what we'll build! We'll set up PostHog for privacy-first analytics - tracking user behavior through every step of checkout without storing any PII. You'll see exactly where users abandon their purchase, without ever touching their payment data.

In this step, get ready to:

  • Sign up for PostHog (free tier)
  • Install the PostHog SDK in your Vercel app
  • Add event tracking for checkout flow events

Before you begin

This project builds on your existing checkout application.

✅ I completed Parts 1 & 2

You already have a working checkout flow with Stripe integration. Your Vercel app is ready for analytics.

  • Open your existing project folder in your code editor.
  • Make sure your app runs locally with npm run dev.
  • Continue to the next section.

🆕 I'm starting fresh

No worries! Here's the fast-track setup (about 30 minutes).

Quick context before we start:

This project tracks analytics for a checkout flow, so you'll need a working checkout application first. We'll use:

  • v0 - AI tool that generates React/Next.js UI code from prompts (creates your app frontend)
  • Vercel - Hosting platform that deploys and runs your Next.js app live on the web
  • Stripe - Payment processing service that handles checkout transactions securely

Together, these give you a live checkout app that you can then add PostHog analytics too.

1. Create Vercel Account & Deploy App

  • Go to vercel.com/signup.
  • Select I'm working on personal project
  • Select Continue with GitHub.
  • Go to v0.dev and sign in with Vercel.
  • Enter this prompt and click Generate:
Create an e-commerce web app with:
- A landing page with hero section
- A product detail page with a Buy Now button (placeholder for Stripe integration later)
- A checkout page with a Stripe placeholder (not actual integration)
- Modern, clean design with a tech/startup aesthetic
- Everything needs to be on one page WITHOUT scrolling
  • Click the GitHub icon
  • Enter a repository name
  • Click Create Repository.
  • Set the main branch as active.
  • Click Publish
  • Select Production
  • Click Publish to Production.
  • Once Ready, click Visit Site to see your live app.

2. Create Stripe Account

  • Go to stripe.com
  • Click Start now
  • Enter email/password
  • Click Create account.
  • Click Skip on welcome screens
  • Click Go to Sandbox.
  • Press Ctrl+R to skip business info
  • Click X to close setup guide.
  • Click API keys
  • Copy your secret key (sk_test_...).

3. Add Stripe Keys to Vercel

  • Go to vercel.com
  • Select your project
  • Click Settings
  • Click Environment Variables
  • Add STRIPE_SECRET_KEY with your secret key
  • Click Save

Why add API keys in two places?

You're adding the Stripe key to both Vercel and your local .env.local file because your app runs in two different environments:

  • Vercel = Production (live site on the internet)
  • Local = Development (on your computer for testing)

Each environment needs its own copy of the API key. Vercel uses the key when visitors use your live site. Your local .env.local file uses the key when you're testing on localhost. This way, your API keys work everywhere your app runs, and you can also set up different API keys for different environments!

4. Set Up Local Development

  • Open Cursor on your computer
  • Click File
  • Click Open Folder
  • Navigate to your project folder (the one v0 created and published to Vercel)
  • Click Open
  • In Cursor's file explorer, right-click and select New File
  • Name it .env.local
  • Add this line: STRIPE_SECRET_KEY=sk_test_your_key_here

- Press Ctrl+L - Use this Cursor prompt:

Install all packages using pnpm and run the app in development mode.
  • Press Ctrl+Shift+B
  • Enter localhost:3000

5. Build Checkout Flow

  • Press Ctrl+L in Cursor
  • Use this Cursor prompt:
Install the Stripe npm package and create a checkout API route at
app/api/checkout/route.ts that:

1. Uses Stripe to create checkout sessions
2. Defines the product price SERVER-SIDE - never accept prices from the frontend
3. Accepts product info from the request body but looks up the real price server-side
4. Creates a Stripe checkout session with the server-side price
5. Returns the checkout URL
6. Uses STRIPE_SECRET_KEY from environment variables
7. Redirects to /success on completion, /checkout on cancel
  • Click element select icon
  • Select your checkout button
  • Use this Cursor prompt:
Wire this button up to call the /api/checkout endpoint when clicked.
  • Test: click checkout
  • Enter card 4242 4242 4242 4242
  • Click Pay

6. Configure Webhook

What is a webhook endpoint?

A webhook endpoint is a special URL in your app that Stripe calls to notify you when something happens (like a payment succeeds or fails). Think of it like a callback number - when Stripe processes a payment, it "calls back" your webhook URL with the result. This lets your app respond automatically to payment events without constantly checking Stripe's servers.

  • Press Ctrl+L in Cursor
  • Use this Cursor prompt:
Create a webhook endpoint at app/api/webhooks/stripe/route.ts that handles Stripe webhook events with signature verification. Listen for checkout.session.completed and payment_intent.payment_failed events.
  • Select checkout.session.completed and payment_intent.payment_failed
  • Click Continue
  • Select Webhook endpoint
  • Enter https://your-app.vercel.app/api/webhooks/stripe
  • Copy the Signing secret (whsec_...).
  • In Vercel: Settings
  • Click Environment Variables
  • Add STRIPE_WEBHOOK_SECRET
  • Click Save

Redeploy your application:

  • Go to your Vercel project dashboard
  • Click the Deployments tab
  • Click the three dots (...) next to your latest deployment
  • Click Redeploy
  • Select Use existing build cache (unchecked)
  • Click Redeploy

This pushes your new environment variable to production so your webhook can use it.

You're all set! Continue below to add PostHog analytics.

Sign Up for PostHog

PostHog offers a generous free tier with 1 million events per month - more than enough for learning and small projects.

✅ I have a PostHog account

Perfect! You already have a PostHog account. Let's get your API keys.

  • Go to app.posthog.com and log in.
  • Click Settings in the bottom left corner of the dashboard.
  • Scroll down to the Project API Key section and click Copy.

You'll use this API key in the next section to connect your app to PostHog.

🆕 I don't have a PostHog account

No worries! Let's get you set up with PostHog.

  • Click Get started - free.
  • Select Continue with GitHub.
  • Authorize PostHog to access your GitHub account.
  • Select Default Project.
  • Enter your organization name and click Continue.

What should I put for organization name?

This can be anything! Your personal name, project name, or company name all work. You don't need an actual organization to continue.

Choose Your Products

PostHog offers several products - we'll pick the ones that match our analytics goals.

  • Select I'll pick myself to choose specific products.
  • Select Product Analytics, Session Replay, and Experiments, then click Get started.

Why these three products?

  • Product Analytics tracks events and builds funnels (Steps 1-2).
  • Session Replay lets you watch user sessions (Step 3).
  • Experiments enables A/B testing (Secret Mission).

Get Your API Keys

Now let's add PostHog to your project. PostHog will give you framework-specific instructions based on your app type.

  • Select Next.js from the framework list.

Why Next.js?

Because your checkout app from Parts 1 & 2 is built with Next.js! PostHog will give you framework-specific setup instructions to match your app.

  • Scroll down and click Copy to clipboard to copy your environment variables.

Install PostHog SDK

Now let's add the PostHog SDK to your project.

  • Open Cursor on your computer.
  • Click File, click Open Folder, Select your e-commerce project folder.
  • Open your .env.local file (or create one if it doesn't exist).
  • Copy in your Posthog API key into the snippet below:
NEXT_PUBLIC_POSTHOG_KEY=[[YOUR_POSTHOG_API_KEY="ph_abc123..."]]
NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
  • Paste this snippet into your .env.local.
  • Open terminal in Cursor and run this command to install the PostHog SDK.
pnpm install posthog-js

✅ Successfully installed

You should see output showing the package was installed.

❌ I got an error

If you see an error:

  • Make sure you're in your project's root directory (where package.json is located).
  • If you see "pnpm: command not found", install pnpm first: bash npm install -g pnpm Then try pnpm install posthog-js again. Still having issues? Ask the NextWork community!

Initialize PostHog in Your App

Nice! With the SDK installed, let's initialize PostHog so it starts tracking when your app loads.

  • Open Cursor's chat (Ctrl+L or Cmd+L) and send this prompt:
Implement PostHog initialization in instrumentation-client.ts and ensure
it's imported/executed so PostHog actually initializes when the app loads.

API keys NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST are in .env.local

What is instrumentation-client.ts?

This is a special Next.js file that runs code when your app first loads in the browser. Cursor will create this file and set up PostHog initialization here. It reads your API keys from environment variables, so your secrets stay secure and never get committed to code.

  • Accept Cursor's changes.

Add Checkout Event Tracking

Now let's track the key events in your checkout flow.

  • In Cursor's chat, send this prompt:
Create analytics tracking functions for my checkout flow that track these
events using PostHog:

- page_view_landing (with page name)
- clicked_product (with product_id and product_name only)
- checkout_initiated
- payment_submitted
- payment_succeeded / payment_failed

IMPORTANT: Do NOT track any PII - no card numbers, no emails, no billing
addresses, no individual transaction amounts tied to users.

Why are we avoiding PII in analytics?

PII (Personally Identifiable Information) is any data that can identify a specific person, like card numbers, emails, and billing addresses. By excluding this data from our tracking, we avoid legal liability and stay compliant with privacy laws like PCI DSS (payment security), GDPR (EU privacy), and CCPA (California privacy). You can still understand where users drop off without storing sensitive personal information.

  • Accept Cursor's changes.

Integrate Events into Your Checkout Flow

Cursor just created your tracking functions - now let's wire them up to your actual checkout components!

  • In Cursor's chat, send this prompt:
Integrate the analytics tracking functions into my checkout flow:

- Track page_view_landing when the landing page loads
- Track clicked_product when a user clicks on a product
- Track checkout_initiated when checkout starts
- Track payment_submitted when the payment form is submitted
- Track payment_succeeded or payment_failed based on the payment result

What is Cursor doing here?

Cursor will find the parts of your app that handle checkout (product buttons, payment forms, success pages) and add code that records when users interact with them. This creates the data trail you'll use to build funnels in PostHog.

  • Accept Cursor's changes.

Deploy Your Changes

Your tracking code is ready - time to push it live so PostHog can detect it!

  • Open the terminal in Cursor and run these commands:
git add .
git commit -m "Add PostHog analytics tracking"
git push

Configure PostHog Environment Variables in Vercel

Your code is deployed, but Vercel doesn't know your PostHog credentials yet. Let's add them so your live app can send events to PostHog.

  • Click Settings in the top navigation.
  • In the left sidebar, click Environment Variables.
  • Add the same PostHog environment variables from your .env.local file:
    • NEXT_PUBLIC_POSTHOG_KEY (your PostHog project API key)
    • NEXT_PUBLIC_POSTHOG_HOST (https://us.i.posthog.com (or https://eu.i.posthog.com if you chose EU region))
  • Click Save for each variable.
  • Go to the Deployments tab and click the three dots next to your latest deployment, then select Redeploy to apply the new environment variables.

Verify Events in PostHog

Time to see your tracking in action!

  • Open your live Vercel app URL.
  • Click around your app - view a product, click checkout, go through the payment flow.

🆕 New account - Using setup wizard

  • Go back to the PostHog setup wizard tab in your browser.

You should see Installation Complete with a Pageview event detected.

✅ Installation Complete

It's working! 🎉 PostHog detected your events flowing in.

This means your tracking code is properly installed and sending data. Every click, page view, and checkout action is now being recorded - without any sensitive payment data.

  • Click Continue to proceed with setup.

❌ No events detected

If events aren't showing up:

  • Check your API key: Make sure NEXT_PUBLIC_POSTHOG_KEY in .env.local matches your PostHog project API key.
  • Check deployment: Verify your latest code was deployed on Vercel (not just running locally).
  • Check the console: Open browser DevTools (F12) and look for any PostHog errors.
  • Try incognito: Ad blockers can sometimes block analytics.

Still not seeing events? Ask the NextWork community!

Complete PostHog Setup

Let's finish the PostHog setup wizard by configuring the remaining options.

  • Click Enable Session Replay to record user sessions.
  • Click Next on the configuration page.
  • Click Next on the PostHog AI page.
  • Click Next to skip inviting teammates for now.
  • Click Skip for now on the other apps page.
  • Select the Free plan.

You're now on the PostHog dashboard! ✨

Welcome to your analytics command center! From here, you can see everything happening in your app - every click, every page view, every checkout attempt.

✅ Existing account

  • Go to your PostHog dashboard at app.posthog.com.
  • Click Activity in the left sidebar.

You should start seeing your events flowing in!

✅ I see my events

It's working! 🎉 PostHog is tracking your checkout events.

Every click, page view, and checkout action is now being recorded - without any sensitive payment data.

❌ No events showing

If events aren't showing up:

  • Check your API key: Make sure NEXT_PUBLIC_POSTHOG_KEY in .env.local matches your PostHog project API key.
  • Check deployment: Verify your latest code was deployed on Vercel (not just running locally).
  • Check the console: Open browser DevTools (F12) and look for any PostHog errors.
  • Try incognito: Ad blockers can sometimes block analytics.

Still not seeing events? Ask the NextWork community!

View Your Events

Let's confirm your events are flowing into PostHog correctly.

  • Click Activity in the left sidebar.

You should see your checkout events including payment_succeeded.

Look at that - real user data flowing in! 📊

Notice what you're seeing: page_view_landing, clicked_product, checkout_initiated, payment_submitted, payment_succeeded. This is your entire checkout funnel, captured step by step. And look at what's NOT there - no card numbers, no emails, no addresses. Just behavior data.

This is the foundation of privacy-first analytics. You now have complete visibility into your checkout flow without any of the liability that comes with storing sensitive data.

Explore Your Data

Now that events are flowing, try exploring what PostHog captured:

  • Click on individual events to see their properties
  • Notice the timestamp, browser, and location data (all non-PII!)
  • Look for patterns - are events coming through in the expected order?

The more you explore, the better you'll understand what data you're collecting. In the next step, you'll turn this raw event stream into actionable funnels that show exactly where users drop off!

Find Your Biggest Drop-Off Point

Your tracking is live and data is coming in - nice work getting this far! Now let's turn that raw data into a visual funnel that shows exactly where users abandon checkout.

In this step, get ready to:

  • Create a funnel in PostHog tracking the full checkout journey
  • Identify your biggest drop-off point
  • Filter by browser to find patterns

Create Your Conversion Funnel

A funnel shows how users progress through a series of steps - and more importantly, where they leave.

  • In PostHog, go to Dashboards and click Add insight.
  • Click New insight.
  • Click Funnels tab to switch from Trends to Funnels.

Add Your Funnel Steps

  • You'll see a default query. Click on it to change the first event.
  • Select page_view_landing as your first step.
  • Click Add step to add a second event.
  • Select clicked_product as your second step.
  • Now repeat this for buy_now_clicked, payment_submitted.
  • Click on the title and rename it to Landing to Purchase Funnel.

Save Your Funnel

  • Click Save to keep your funnel for future reference.

Your funnel is now saved to your dashboard. You can come back anytime to check conversion rates and spot issues.

Read Your Funnel Results

Your funnel now shows bars for each step with conversion rates.

What do these numbers mean?

Total conversion rate shows the percentage of users who complete all steps. Average time to convert shows how long the journey takes. Each bar shows how many users reached that step.

✅ I see my funnel

Your funnel is working. The bars show conversion at each step - look for the biggest drop-off between steps.

⚠️ No data or empty funnel

If your funnel shows no data:

  • Not enough events yet: Go through your checkout flow a few times to generate data.
  • Wrong time range: Check the date filter (top right). Make sure it includes when you triggered test events.
  • Events not matching: Event names are case-sensitive - make sure they match exactly.

Still seeing no data? Ask the NextWork community!

Understanding Drop-Off Patterns

Now comes the detective work. Your funnel tells a story - you just need to read it.

✅ Healthy funnel

In a healthy funnel, you'll see gradual drop-off at each step. Some users will always leave - maybe they were just browsing, or got distracted, or decided to buy later. That's normal.

Notice how each step loses some users, but it's a steady decline - not a sudden cliff. This is what you want to see.

🚨 Problem funnel

If you see a cliff - a massive drop at one specific step - that's not normal user behavior. That's a problem in your product.

Take a look at this funnel. Notice how users land on the page, but very few click on a product? That's a major red flag. Something on your landing page isn't grabbing attention - maybe the products aren't visible enough, the images aren't compelling, or users don't understand what you're selling.

Think about it - we'll put this to use in the next step!

Where should you focus?

  • Landing to Product click: Low? Your products aren't grabbing attention. Try better images, clearer titles, or featured products.
  • Product to Buy now: Low? Users are interested but not convinced. Check your pricing display, add reviews, or improve the CTA button.
  • Buy now to Payment: Low? Users want to buy but something's stopping them. Look for checkout bugs, confusing forms, or missing trust signals.

Filter by Browser

Sometimes problems only affect certain browsers. Let's break down the data.

  • Scroll down in the left panel and click + Breakdown.
  • Select Browser from the dropdown.

Your funnel now shows a table with separate rows for each browser:

Spot Browser-Specific Issues

✅ Healthy breakdown

A healthy breakdown shows similar conversion rates across browsers. All browsers should perform roughly the same - users on Chrome, Firefox, Safari, and Edge should all be able to complete checkout.

If your conversion percentages are similar across rows like this (Chrome 55%, Safari 50%, Firefox 45%, Edge 40%), your site works well across browsers.

🐛 Browser bug detected

If one browser has significantly lower conversion, you've found a bug. In this example, Firefox users are dropping off way more than others. This indicates a potential issue with our app running on Firefox browsers, and it's worth investigating!

Time to open Firefox, go through your checkout flow, and find what's breaking!

Why do browsers behave differently?

Not all browsers render web pages the same way, even when using identical HTML, CSS, and JavaScript. Each browser has its own rendering engine (Chrome uses Blink, Safari uses WebKit, Firefox uses Gecko) which can interpret your code slightly differently.

Common causes of browser-specific issues:

  • CSS flexbox or grid layouts rendering differently in Safari
  • Newer JavaScript features not supported in older browser versions
  • Form elements (especially payment inputs) styling differently in Firefox
  • Touch and scroll behavior varying on mobile browsers

Turn Drop-Off Data Into Conversion Improvements

You've built the analytics infrastructure. Now let's walk through how companies like Wowzer used this same data-driven approach to increase conversions by 10% and reduce time-to-purchase from two days to under four hours.

Since you're setting this up for demo purposes, you won't have real customer data yet. Instead, we'll walk through the methodology - so when you do have traffic, you'll know exactly what to do.

In this step, get ready to:

  • Learn how to form hypotheses from funnel data
  • Understand common fixes for each drop-off point
  • Verify your session replay is privacy-compliant

The Data-Driven Improvement Process

When you have real traffic, here's the process you'll follow:

  1. Identify - Find your biggest drop-off point in the funnel
  2. Hypothesize - Form a theory about WHY users are leaving
  3. Change - Make a focused change to address that theory
  4. Measure - Compare before/after conversion rates

Let's walk through each step with real-world examples.

Spot the Problem

Let's take a look at the example data from the previous step:

This doesn't look like a normal checkout flow. Instead of gradual drop-off at each step, there's a sharp cliff at one specific point.

How do you spot an abnormal funnel?

A healthy e-commerce funnel has gradual decline - maybe 60% view products, 30% add to cart, 15% checkout, 10% complete payment. If you see one step with a massive drop while others stay flat, that's your red flag. Something specific is broken at that step.

Form a Hypothesis

A good hypothesis is specific, testable, and based on data. Here's how to form one:

Start with the data

Look at WHERE the drop happens. Don't guess - let the funnel tell you which step to investigate.

💡 Ask "why" not "what"

Don't just say "users aren't clicking." Ask WHY they might not be clicking. Is the button hidden? Is the price scary? Is the page confusing?

💡 Make it testable

Your hypothesis should suggest a specific change you can make and measure. "The page is bad" isn't testable. "Users can't find the products" suggests a fix you can verify.

Now let's apply this to our example:

See that cliff between Landing page to Clicked product? Users are landing on the site, but very few are clicking through to view products. However, once users DO get to a product page, they have a really high chance of checking out and completing payment!

This tells you exactly where to focus: the landing page isn't doing its job. The product pages and checkout flow are fine.

For a Landing page to Product click drop-off, common causes are:

  • Products aren't visible or compelling enough
  • No clear call-to-action to browse products
  • Landing page is confusing or cluttered
  • Users don't understand what you're selling

Why do you think this sort of pattern can be seen?

Write down your hypothesis: I think that... I think that because...

Fix the Issue

Now let Cursor work its magic. Give it your goal and hypothesis - it will figure out the right changes to make.

In Cursor's chat, send this prompt:

Goal: Increase product click-through from the landing page.

My hypothesis: [[YOUR_HYPOTHESIS="I think that... I think that because..."]]

Based on this hypothesis, improve the landing page to fix this drop-off.

Why don't we need to list specific fixes?

The power here is that Cursor infers what changes to make based on your hypothesis. Different hypotheses lead to different solutions - and Cursor figures that out.

Cursor will propose changes based on your hypothesis:

Why do these changes make sense?

Look at what Cursor suggested - each change targets the click-through problem:

  • Featured Products section - Puts products front and center so users immediately see what to click
  • Larger product images - Makes products more visually appealing and clickable
  • "Shop Now" call-to-action - Gives users a clear next step instead of leaving them guessing
  • Prices on landing page - Reduces friction by showing value upfront

These aren't random changes. Each one directly addresses "users don't know where to go next" by making products impossible to miss.

In a real scenario, you'd deploy this and watch the funnel to see if that step improves.

What Success Looks Like

After fixing the issue, a healthy funnel shows gradual drop-off - not cliffs:

Some users will always leave at each step (browsing, distracted, not ready to buy). That's normal. The goal is eliminating the cliffs - the massive drops that indicate something is broken.

But what if your hypothesis is wrong? What if you want to see EXACTLY what users did before they left? That's where session replay comes in.

Watch What Actually Happened

Funnels tell you WHERE users drop off. Session replay shows you WHY.

  • Click Search in the left sidebar.
  • Type "Session replay" and select the Session replay app.
  • Scroll down to a recording and click to watch it.

You'll see exactly what the user saw - and what they did before leaving.

Look at this!

This user made it all the way to the payment page but never completed the purchase. They got to the "Place Order" button and left.

Was the price too high? Did they get distracted? Did something look broken? This is exactly the kind of insight that helps you form a better hypothesis.

What to look for in session replays

  • Confusion - Mouse moving erratically, scrolling up and down repeatedly
  • Frustration - Rage clicks (clicking the same thing multiple times)
  • Missed elements - User never scrolls to where your products are
  • Dead ends - User clicks something expecting it to work, but nothing happens

These patterns reveal what numbers alone can't tell you.

Session replay turns your hypothesis from a guess into a confirmed insight. Now you KNOW why users left - and you can fix it with confidence.

The Optimization Cycle

What you just did is the core of data-driven optimization:

  1. Measure - Collect data on user behavior
  2. Hypothesize - Form a theory about why users behave that way
  3. Change - Implement a focused improvement
  4. Measure - Compare results

Repeat this cycle continuously. Small improvements compound over time.

Secret mission

Ready to level up? This section is for those who want to take their skills further.

Booking.com runs thousands of A/B tests simultaneously. They don't guess which button text converts better - they measure it. You'll use PostHog's built-in experimentation to test "Buy Now" vs "Complete Purchase" while staying privacy-compliant.

A/B Test Like Booking.com

Clean Up Your Resources

Clean Up Your Resources

Nice work completing this project! Let's clean up the resources we created.

Resources to delete:

  • Decide whether to keep or remove PostHog tracking

Keep PostHog running

PostHog's free tier has no ongoing costs - you get 1 million events per month for free.

If you're continuing with the FinOps series or want to keep tracking your app's analytics:

  • Keep your PostHog account active.
  • Keep the tracking code in your project.

No action needed - everything stays as is!

Disable tracking temporarily

If you want to pause analytics without removing everything:

  • Comment out the initPostHog() call in your app entry point:
// import { initPostHog } from './lib/posthog'
// initPostHog()

Your PostHog account and historical data remain intact. You can re-enable tracking anytime by uncommenting those lines.

Remove PostHog completely

If you want to completely remove PostHog from your project:

  • Remove the PostHog SDK:
npm uninstall posthog-js
  • Delete the posthog.js and analytics.js files you created.
  • Remove the initialization code from your app entry point.
  • Remove any tracking calls from your components.
  • Optionally, delete your PostHog project in the PostHog dashboard:
    • Go to Settings
    • Click Project
    • Click Delete project

What's the difference between disabling and removing?

Disabling (commenting out code) keeps everything intact - you can re-enable anytime. Removing deletes everything permanently. Only remove if you're completely done with analytics.

That's a wrap!

That's a wrap!

You did it! 🎊 You've built privacy-first checkout analytics that reveal where users drop off - without storing card numbers, billing addresses, or PII.

What you learned:

  • 📊 How to set up PostHog for privacy-first analytics
  • 🔒 Tracking user behavior without storing PII
  • 📈 Building conversion funnels that reveal drop-off patterns
  • 🔬 Using data to form and test hypotheses
  • ⚖️ What you can and cannot track under PCI DSS, GDPR, and CCPA
  • 🔄 The measure-hypothesize-change-measure optimization cycle

Ready to quiz yourself? 💪

What's next?

You've completed the PostHog analytics setup! You can now:

  • Track user behavior without storing sensitive data
  • Build conversion funnels to identify drop-off points
  • Form hypotheses and test improvements
  • Run A/B tests to optimize conversions

Make sure to join the NextWork Community to stay connected! 🤝

p.s. Does it say "Still tasks to complete!" at the bottom of the screen?

This means you still have screenshots left to upload, or questions left to answer!

  1. Press Ctrl+F (Windows) or Command+F (Mac) on your keyboard.
  2. Search for the text Return to later.
  3. Jump straight to your incomplete tasks!
  4. 🙋‍♀️ Still stuck? Ask the community!