feat(analytics): add Microsoft Clarity behavior analytics

- install @microsoft/clarity SDK
- add ClarityAnalytics client component that inits on mount
- mount in root layout with project id wpd0eau95q

Author: gracefullight

app/layout.tsx

@@ -1,9 +1,12 @@
 import type { Metadata } from "next";
 import { Analytics } from "@vercel/analytics/next";
+import { ClarityAnalytics } from "@/components/site/clarity";
 import { SITE } from "@/lib/site";
 import { SOLUTIONS } from "@/lib/solutions";
 import "./globals.css";
 
+const CLARITY_PROJECT_ID = "wpd0eau95q";
+
 export const metadata: Metadata = {
   metadataBase: new URL("https://firstfluke.com"),
   title: {
@@ -105,6 +108,7 @@ export default function RootLayout({
         />
         {children}
         <Analytics />
+        <ClarityAnalytics projectId={CLARITY_PROJECT_ID} />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{

bun.lock

@@ -0,0 +1,17 @@
+"use client";
+
+import { useEffect } from "react";
+import Clarity from "@microsoft/clarity";
+
+interface ClarityAnalyticsProps {
+  projectId: string;
+}
+
+export function ClarityAnalytics({ projectId }: ClarityAnalyticsProps) {
+  useEffect(() => {
+    if (!projectId) return;
+    Clarity.init(projectId);
+  }, [projectId]);
+
+  return null;
+}

components/site/clarity.tsx

@@ -10,6 +10,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@microsoft/clarity": "^1.0.2",
     "@vercel/analytics": "^2.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",