49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
"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;
|
|
}
|