Marc Mintel
72711c74ba
Some checks failed
Build & Deploy KLZ Cables / deploy (push) Failing after 13m20s
78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
'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,
|
|
};
|
|
}
|