umami

components/analytics/useAnalytics.ts

@@ -0,0 +1,77 @@
+'use client';
+
+import { useCallback } from 'react';
+import { getAppServices } from '@/lib/services/create-services';
+import type { AnalyticsEventProperties } from '@/lib/services/analytics/analytics-service';
+
+/**
+ * Custom hook for tracking analytics events with Umami.
+ * 
+ * Provides a convenient way to track custom events throughout your application.
+ * 
+ * @example
+ * ```tsx
+ * import { useAnalytics } from '@/components/analytics/useAnalytics';
+ * 
+ * function MyComponent() {
+ *   const { trackEvent, trackPageview } = useAnalytics();
+ * 
+ *   const handleButtonClick = () => {
+ *     trackEvent('button_click', {
+ *       button_id: 'cta-primary',
+ *       page: 'homepage'
+ *     });
+ *   };
+ * 
+ *   return <button onClick={handleButtonClick}>Click me</button>;
+ * }
+ * ```
+ * 
+ * @example
+ * ```tsx
+ * // Track a custom pageview
+ * const { trackPageview } = useAnalytics();
+ * trackPageview('/custom-path?param=value');
+ * ```
+ */
+export function useAnalytics() {
+  const services = getAppServices();
+
+  /**
+   * Track a custom event with optional properties.
+   * 
+   * @param eventName - The name of the event to track
+   * @param properties - Optional event properties (metadata)
+   */
+  const trackEvent = useCallback(
+    (eventName: string, properties?: AnalyticsEventProperties) => {
+      services.analytics.track(eventName, properties);
+      
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[Umami] Tracked event:', eventName, properties);
+      }
+    },
+    [services]
+  );
+
+  /**
+   * Track a pageview (useful for custom navigation or SPA routing).
+   * 
+   * @param url - The URL to track (defaults to current location)
+   */
+  const trackPageview = useCallback(
+    (url?: string) => {
+      services.analytics.trackPageview(url);
+      
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[Umami] Tracked pageview:', url ?? 'current location');
+      }
+    },
+    [services]
+  );
+
+  return {
+    trackEvent,
+    trackPageview,
+  };
+}