production analytics with panel bear

app/core/hooks/use-panelbear.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import * as Panelbear from "@panelbear/panelbear-js";
+import type { PanelbearConfig } from "@panelbear/panelbear-js";
+
+export const usePanelbear = (siteId?: string, config: PanelbearConfig = {}) => {
+	const router = useRouter();
+
+	useEffect(() => {
+		if (!siteId) {
+			return;
+		}
+
+		Panelbear.load(siteId, { scriptSrc: "/bear.js", ...config });
+		Panelbear.trackPageview();
+		const handleRouteChange = () => Panelbear.trackPageview();
+		router.events.on("routeChangeComplete", handleRouteChange);
+
+		return () => router.events.off("routeChangeComplete", handleRouteChange);
+	}, [siteId]);
+};