Add PostHog analytics with heatmap support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-09 16:49:52 +02:00
parent 0bf5a8a546
commit 2dadc5362d
10 changed files with 522 additions and 12 deletions
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { PostHogProvider } from "@/lib/posthog";
 import "./globals.css";

 const geistSans = Geist({
@@ -27,7 +28,7 @@ export default function RootLayout({
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
-        {children}
+        <PostHogProvider>{children}</PostHogProvider>
      </body>
    </html>
  );
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,3 +1,5 @@
+import { PostHogTestButton } from "./posthog-test-button";
+
 export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center">
@@ -13,6 +15,7 @@ export default function Home() {
          <span>+</span>
          <span>.NET 9</span>
        </div>
+        <PostHogTestButton />
      </main>
    </div>
  );
--- a/frontend/src/app/posthog-test-button.tsx
+++ b/frontend/src/app/posthog-test-button.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { usePostHog } from "posthog-js/react";
+
+export function PostHogTestButton() {
+  const posthog = usePostHog();
+
+  return (
+    <button
+      onClick={() =>
+        posthog.capture("my_custom_event", { property: "value" })
+      }
+      className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+    >
+      Send PostHog Test Event
+    </button>
+  );
+}