Product Analytics for engineers: Debugging a conversion problem on my next.js site
Watch Product Analytics for engineers: Debugging a conversion problem on my next.js site using @PostHog on YouTube
Summary
I've been experiencing a problem with my personal website, mikebifulco.com, where my newsletter sign-ups have mysteriously plummeted. In this video, I take you through the process of diagnosing and debugging this issue using Posthog, a powerful product analytics tool.
We'll start by taking a look at the site, identifying potential problem areas, and then diving into the code. I'll show you how I implement Posthog to track user interactions and gather valuable insights. We'll explore how to handle form submissions, track events, and use Posthog’s features to pinpoint what's going wrong.
Throughout the video, I'll share my thought process, hypotheses, and the steps I take to experiment and test different solutions. If you've ever had a non-bug issue in production, this video is for you. Let's get to the bottom of this conversion rate mystery together!
You might be interested in this video if you want to learn about debugging and optimizing website performance, especially using tools like Posthog. Relevant technologies and subject areas include React, Next.js, form handling, product analytics, serverless functions, and conversion rate optimization.
Video Timestamps
0:00 Product Analytics for engineers: Debugging a form conversion rate problem on my website with Posthog
01:05 Site walkthrough
01:30 Are people annoyed by the popup?
02:53 Long form article pages
04:02 Looking at the code
05:20 Dive into the code
07:13 Newsletter form refactor
10:45 Serverless function for newsletter subscribe
12:26 The results in Posthog
13:29 What we did, and what's next
14:43 Why Posthog and product analytics are helpful
15:41 Epilogue: We learned something! Next steps...
