track pageviews with panelbear

app/config/config.server.ts

@@ -37,6 +37,10 @@ invariant(
 	`Please define the "WEB_PUSH_VAPID_PUBLIC_KEY" environment variable`,
 );
 invariant(typeof process.env.SENTRY_DSN === "string", `Please define the "SENTRY_DSN" environment variable`);
+invariant(
+	typeof process.env.PANELBEAR_SITE_ID === "string",
+	`Please define the "PANELBEAR_SITE_ID" environment variable`,
+);
 
 export default {
 	app: {
@@ -51,6 +55,9 @@ export default {
 		secretAccessKey: process.env.AWS_SES_ACCESS_KEY_SECRET,
 		fromEmail: process.env.AWS_SES_FROM_EMAIL,
 	},
+	panelBear: {
+		siteId: process.env.PANELBEAR_SITE_ID,
+	},
 	redis: {
 		url: process.env.REDIS_URL,
 		password: process.env.REDIS_PASSWORD,

app/features/core/hooks/use-panelbear.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useLocation } from "@remix-run/react";
+import * as Panelbear from "@panelbear/panelbear-js";
+import type { PanelbearConfig } from "@panelbear/panelbear-js";
+
+export default function usePanelbear(siteId: string, config: PanelbearConfig = {}) {
+	const location = useLocation();
+
+	useEffect(() => {
+		Panelbear.load(siteId, {
+			scriptSrc: "/bear.js",
+			spaMode: "off",
+			autoTrack: false,
+			...config,
+		});
+	}, []);
+
+	useEffect(() => {
+		Panelbear.trackPageview();
+	}, [location]);
+}

app/root.tsx

@@ -13,6 +13,7 @@ import {
 } from "@remix-run/react";
 
 import config from "~/config/config.server";
+import usePanelbear from "~/features/core/hooks/use-panelbear";
 import Logo from "~/features/core/components/logo";
 
 import styles from "./styles/tailwind.css";
@@ -20,27 +21,38 @@ import styles from "./styles/tailwind.css";
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
 
 type LoaderData = {
-	shellphoneConfig: string;
+	shellphoneConfig: {
+		sentry: {
+			dsn: string;
+		};
+		panelbear: {
+			siteId: string;
+		};
+	};
 };
 export const loader: LoaderFunction = () => {
 	return json<LoaderData>({
-		shellphoneConfig: JSON.stringify({
+		shellphoneConfig: {
 			sentry: {
 				dsn: config.sentry.dsn,
 			},
-		}),
+			panelbear: {
+				siteId: config.panelBear.siteId,
+			},
+		},
 	});
 };
 
 export default function App() {
 	const { shellphoneConfig } = useLoaderData<LoaderData>();
+	usePanelbear(shellphoneConfig.panelbear.siteId);
 	return (
 		<Document>
 			<Outlet />
 			<script
 				suppressHydrationWarning
 				dangerouslySetInnerHTML={{
-					__html: `window.shellphoneConfig=${shellphoneConfig};`,
+					__html: `window.shellphoneConfig=${JSON.stringify(shellphoneConfig)};`,
 				}}
 			/>
 		</Document>

app/routes/bear[.]js.ts

@@ -0,0 +1,3 @@
+import type { LoaderFunction } from "remix";
+
+export const loader: LoaderFunction = () => fetch("https://cdn.panelbear.com/analytics.js");

package-lock.json

@@ -9,6 +9,7 @@
 				"@bull-board/express": "3.11.0",
 				"@headlessui/react": "1.6.4",
 				"@maizzle/framework": "3.7.3",
+				"@panelbear/panelbear-js": "1.3.3",
 				"@prisma/client": "3.14.0",
 				"@react-aria/interactions": "3.9.0",
 				"@remix-run/express": "1.5.1",
@@ -3026,6 +3027,11 @@
 				"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@panelbear/panelbear-js": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@panelbear/panelbear-js/-/panelbear-js-1.3.3.tgz",
+			"integrity": "sha512-LsAxdlvdvyoQy04no/VsSMQd1i1qGFNMy328VG/BI5N5hQXIa8CZjCWNXuOjIMbJcltt7QjESMr6BgHuEeo5AA=="
+		},
 		"node_modules/@prisma/client": {
 			"version": "3.14.0",
 			"resolved": "https://registry.npmjs.org/@prisma/client/-/client-3.14.0.tgz",
@@ -24898,6 +24904,11 @@
 				"json-parse-even-better-errors": "^2.3.1"
 			}
 		},
+		"@panelbear/panelbear-js": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@panelbear/panelbear-js/-/panelbear-js-1.3.3.tgz",
+			"integrity": "sha512-LsAxdlvdvyoQy04no/VsSMQd1i1qGFNMy328VG/BI5N5hQXIa8CZjCWNXuOjIMbJcltt7QjESMr6BgHuEeo5AA=="
+		},
 		"@prisma/client": {
 			"version": "3.14.0",
 			"resolved": "https://registry.npmjs.org/@prisma/client/-/client-3.14.0.tgz",

package.json

@@ -52,6 +52,7 @@
 		"@bull-board/express": "3.11.0",
 		"@headlessui/react": "1.6.4",
 		"@maizzle/framework": "3.7.3",
+		"@panelbear/panelbear-js": "1.3.3",
 		"@prisma/client": "3.14.0",
 		"@react-aria/interactions": "3.9.0",
 		"@remix-run/express": "1.5.1",