Update

apps/web/app/PostHogPageView.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useEffect, Suspense } from 'react'
+import { usePostHog } from 'posthog-js/react'
+
+function PostHogPageViewInner() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const posthog = usePostHog()
+
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname
+      if (searchParams.toString()) {
+        url = url + '?' + searchParams.toString()
+      }
+      posthog.capture('$pageview', { $current_url: url })
+    }
+  }, [pathname, searchParams, posthog])
+
+  return null
+}
+
+export function PostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PostHogPageViewInner />
+    </Suspense>
+  )
+}

apps/web/app/layout.tsx

@@ -1,5 +1,7 @@
 import type { Metadata } from 'next'
 import './globals.css'
+import { PostHogProvider } from './providers'
+import { PostHogPageView } from './PostHogPageView'
 
 export const metadata: Metadata = {
   title: 'Sauci - Ignite Your Connection',
@@ -32,7 +34,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="antialiased">
-        {children}
+        <PostHogProvider>
+          <PostHogPageView />
+          {children}
+        </PostHogProvider>
       </body>
     </html>
   )

apps/web/app/providers.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import posthog from 'posthog-js'
+import { PostHogProvider as PHProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.i.posthog.com',
+        person_profiles: 'identified_only',
+        capture_pageview: false, // We'll capture pageviews manually for better control
+        capture_pageleave: true,
+      })
+    }
+  }, [])
+
+  if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+    return <>{children}</>
+  }
+
+  return <PHProvider client={posthog}>{children}</PHProvider>
+}