Landing page posthog analytics

aaln · aaln · commit a11350a52e46 · 2025-08-20T14:24:13.000-07:00
diff --git a/packages/landing/app/layout.tsx b/packages/landing/app/layout.tsx
@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
+import { PHProvider } from "@/components/posthog-provider";
+import PostHogPageView from "@/components/posthog-pageview";
+import { Suspense } from "react";
 import "./globals.css";
 
 const inter = Inter({
@@ -169,15 +172,20 @@ export default function RootLayout({
         <link rel="dns-prefetch" href="//fonts.gstatic.com" />
       </head>
       <body className="antialiased">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="light"
-          enableSystem={false}
-          forcedTheme="light"
-          disableTransitionOnChange={false}
-        >
-          {children}
-        </ThemeProvider>
+        <PHProvider>
+          <Suspense>
+            <PostHogPageView />
+          </Suspense>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="light"
+            enableSystem={false}
+            forcedTheme="light"
+            disableTransitionOnChange={false}
+          >
+            {children}
+          </ThemeProvider>
+        </PHProvider>
       </body>
     </html>
   );
diff --git a/packages/landing/components/posthog-pageview.tsx b/packages/landing/components/posthog-pageview.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+export default function PostHogPageView(): null {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const posthog = usePostHog()
+
+  useEffect(() => {
+    if (pathname && posthog) {
+      let url = window.origin + pathname
+      if (searchParams && searchParams.toString()) {
+        url = url + `?${searchParams.toString()}`
+      }
+      posthog.capture('$pageview', {
+        $current_url: url,
+      })
+    }
+  }, [pathname, searchParams, posthog])
+
+  return null
+}
diff --git a/packages/landing/components/posthog-provider.tsx b/packages/landing/components/posthog-provider.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+export function PHProvider({ 
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  useEffect(() => {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://us.i.posthog.com',
+      person_profiles: 'identified_only',
+      capture_pageview: false,
+      capture_pageleave: true,
+    })
+  }, [])
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}
diff --git a/packages/landing/hooks/use-posthog.ts b/packages/landing/hooks/use-posthog.ts
@@ -0,0 +1,32 @@
+'use client'
+
+import { usePostHog as usePostHogReact } from 'posthog-js/react'
+
+export function usePostHog() {
+  const posthog = usePostHogReact()
+
+  const trackEvent = (eventName: string, properties?: Record<string, any>) => {
+    if (posthog) {
+      posthog.capture(eventName, properties)
+    }
+  }
+
+  const identify = (userId: string, properties?: Record<string, any>) => {
+    if (posthog) {
+      posthog.identify(userId, properties)
+    }
+  }
+
+  const reset = () => {
+    if (posthog) {
+      posthog.reset()
+    }
+  }
+
+  return {
+    trackEvent,
+    identify,
+    reset,
+    posthog,
+  }
+}
diff --git a/packages/landing/package.json b/packages/landing/package.json
@@ -46,6 +46,7 @@
     "lucide-react": "^0.536.0",
     "next": "15.4.6",
     "next-themes": "^0.4.6",
+    "posthog-js": "^1.260.1",
     "react": "19.1.1",
     "react-day-picker": "^9.8.1",
     "react-dom": "19.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
