umami

components/analytics/AnalyticsProvider.tsx

@@ -4,16 +4,40 @@ import { useEffect } from 'react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { getAppServices } from '@/lib/services/create-services';
 
-// Minimal client-side hook that sends Umami pageviews on route changes.
+/**
+ * AnalyticsProvider Component
+ *
+ * Automatically tracks pageviews on client-side route changes.
+ * This component should be placed inside your layout to handle navigation events.
+ *
+ * @example
+ * ```tsx
+ * // In your layout.tsx
+ * <NextIntlClientProvider messages={messages} locale={locale}>
+ *   <UmamiScript />
+ *   <Header />
+ *   <main>{children}</main>
+ *   <Footer />
+ *   <AnalyticsProvider />
+ * </NextIntlClientProvider>
+ * ```
+ */
 export default function AnalyticsProvider() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   useEffect(() => {
     if (!pathname) return;
+    
     const services = getAppServices();
     const url = `${pathname}${searchParams?.size ? `?${searchParams.toString()}` : ''}`;
+    
+    // Track pageview with the full URL
     services.analytics.trackPageview(url);
+    
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Umami] Tracked pageview:', url);
+    }
   }, [pathname, searchParams]);
 
   return null;