klz-cables.com/components/analytics/AnalyticsProvider.tsx

'use client';

import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import { getAppServices } from '@/lib/services/create-services';

/**
 * AnalyticsProvider Component
 *
 * Automatically tracks pageviews on client-side route changes.
 * This component should be placed inside your layout to handle navigation events.
 *
 * @param {Object} props - Component props
 * @param {string} [props.websiteId] - The Umami website ID (passed from server config)
 *
 * @example
 * ```tsx
 * // In your layout.tsx
 * const { websiteId } = config.analytics.umami;
 * <AnalyticsProvider websiteId={websiteId} />
 * ```
 */
export default function AnalyticsProvider({ websiteId }: { websiteId?: string }) {
  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]);

  if (!websiteId) return null;

  return null;
}