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");