feat(website): add PostHog analytics

github-actions[bot] · github-actions[bot] · commit 6e8f3fb374ce · 2026-01-31T20:36:49.000+01:00
- Add PostHog provider with GDPR-friendly defaults (EU cloud, respects DNT)
- Configure GitHub Actions to inject API key at build time
- Update .gitignore to allow .env.example while ignoring .env.local
diff --git a/.github/workflows/deploy-website.yml b/.github/workflows/deploy-website.yml
@@ -36,6 +36,9 @@ jobs:
 
       - name: Build
         run: npm run build
+        env:
+          NEXT_PUBLIC_POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}
+          NEXT_PUBLIC_POSTHOG_HOST: https://eu.i.posthog.com
 
       - name: Authenticate to Google Cloud
         uses: google-github-actions/auth@v2
diff --git a/website/.env.example b/website/.env.example
@@ -0,0 +1,7 @@
+# PostHog Analytics
+# Get your project API key from: https://app.posthog.com/project/settings
+NEXT_PUBLIC_POSTHOG_KEY=phc_your_project_api_key
+
+# Use EU cloud for GDPR compliance (default)
+# Options: https://eu.i.posthog.com (EU) or https://us.i.posthog.com (US)
+NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
diff --git a/website/.gitignore b/website/.gitignore
@@ -30,8 +30,12 @@ yarn-debug.log*
 yarn-error.log*
 .pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
-.env*
+# env files (keep .env.example for documentation)
+.env.local
+.env*.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # vercel
 .vercel
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Righteous, Source_Serif_4, JetBrains_Mono } from "next/font/google";
+import { PostHogProvider } from "@/components/PostHogProvider";
 import "./globals.css";
 
 const righteous = Righteous({
@@ -72,8 +73,10 @@ export default function RootLayout({
       <body
         className={`${righteous.variable} ${sourceSerif.variable} ${jetbrainsMono.variable} antialiased`}
       >
-        <div className="grain-overlay" aria-hidden="true" />
-        {children}
+        <PostHogProvider>
+          <div className="grain-overlay" aria-hidden="true" />
+          {children}
+        </PostHogProvider>
       </body>
     </html>
   );
diff --git a/website/components/PostHogProvider.tsx b/website/components/PostHogProvider.tsx
@@ -0,0 +1,34 @@
+"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.__loaded
+    ) {
+      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: true,
+        capture_pageleave: true,
+        autocapture: true,
+        persistence: "localStorage+cookie",
+        // GDPR-friendly defaults
+        respect_dnt: true,
+        opt_out_capturing_by_default: false,
+      });
+    }
+  }, []);
+
+  if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+    return <>{children}</>;
+  }
+
+  return <PHProvider client={posthog}>{children}</PHProvider>;
+}
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
