Clarity Integration

app/layout.tsx

@@ -8,6 +8,7 @@ import { SITE_CONFIG } from '@/lib/metadata';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import { Analytics } from '@vercel/analytics/react';
 import Hotjar from '@/components/Hotjar';
+import Clarity from '@/components/Clarity';
 import { ClientProviders } from '@/components/providers/ClientProviders';
 
 const geistSans = localFont({
@@ -103,6 +104,7 @@ export default async function RootLayout({
         {process.env.GA_MEASUREMENT_ID && <GoogleAnalytics gaId={process.env.GA_MEASUREMENT_ID} />}
         <Analytics />
         <Hotjar />
+        <Clarity />
       </body>
     </html>
   );

components/Clarity.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useEffect } from 'react';
+import ClaritySDK from '@microsoft/clarity';
+
+let isInitialized = false;
+
+/**
+ * Microsoft Clarity analytics component for session recordings, heatmaps, and user behavior.
+ * Only loads in production when NEXT_PUBLIC_CLARITY_ID is configured.
+ */
+const Clarity = () => {
+  const clarityId = process.env.NEXT_PUBLIC_CLARITY_ID;
+  const isProduction = process.env.NODE_ENV === 'production';
+
+  useEffect(() => {
+    if (!isInitialized && isProduction && clarityId) {
+      ClaritySDK.init(clarityId);
+      isInitialized = true;
+    }
+  }, [clarityId, isProduction]);
+
+  return null;
+};
+
+export default Clarity;

package.json

@@ -27,6 +27,7 @@
     "@headlessui/react": "^2.2.0",
     "@hocuspocus/provider": "^2.14.0",
     "@hookform/resolvers": "^4.1.0",
+    "@microsoft/clarity": "^1.0.2",
     "@next/third-parties": "^15.5.9",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",

services/analytics.service.ts

@@ -1,6 +1,7 @@
 import { User } from '@/types/user';
 import * as amplitude from '@amplitude/analytics-browser';
 import { sendGAEvent } from '@next/third-parties/google';
+import ClaritySDK from '@microsoft/clarity';
 
 export const LogEvent = {
   SIGNUP_PROMO_MODAL_OPENED: 'signup_promo_modal_opened',
@@ -103,6 +104,10 @@ class AnalyticsService {
       identify.set(key, value);
     });
     amplitude.identify(identify);
+
+    if (userProperties.user_id) {
+      ClaritySDK.identify(userProperties.user_id);
+    }
   }
 
   static async logEvent(