e-tib.com/components/analytics/useAnalytics.ts

'use client';

import { useCallback } from 'react';

export type AnalyticsEventProperties = Record<string, any>;

/**
 * Sends a payload to the proxy API without loading backend config/logger dependencies.
 */
function sendAnalyticsPayload(type: 'event', data: Record<string, any>) {
  if (typeof window === 'undefined') return;
  if (process.env.NEXT_PUBLIC_CI === 'true') return;

  const payload = {
    hostname: window.location.hostname,
    screen: `${window.screen.width}x${window.screen.height}`,
    language: navigator.language,
    referrer: document.referrer,
    title: document.title,
    ...data,
  };

  try {
    fetch('/stats/api/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ type, payload }),
      keepalive: true,
    }).catch(e => console.error('[Umami] Failed to send payload', e));
  } catch (error) {
    console.error('[Umami] Error sending analytics', error);
  }
}

/**
 * Custom hook for tracking analytics events with Umami.
 */
export function useAnalytics() {
  const trackEvent = useCallback(
    (eventName: string, properties?: AnalyticsEventProperties) => {
      sendAnalyticsPayload('event', {
        name: eventName,
        data: properties,
        url: window.location.pathname + window.location.search,
      });
      
      if (process.env.NODE_ENV === 'development') {
        console.log('[Umami] Tracked event:', eventName, properties);
      }
    },
    []
  );

  const trackPageview = useCallback(
    (url?: string) => {
      sendAnalyticsPayload('event', {
        url: url || window.location.pathname + window.location.search,
      });
      
      if (process.env.NODE_ENV === 'development') {
        console.log('[Umami] Tracked pageview:', url ?? 'current location');
      }
    },
    []
  );

  return {
    trackEvent,
    trackPageview,
  };
}