From 852a6eb9e5559b099ef11ac6b7d201c82659819f Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sun, 26 Jun 2022 20:57:44 +0200
Subject: [PATCH] track pageviews with panelbear

---
 app/config/config.server.ts              |  7 +++++++
 app/features/core/hooks/use-panelbear.ts | 21 +++++++++++++++++++++
 app/root.tsx                             | 20 ++++++++++++++++----
 app/routes/bear[.]js.ts                  |  3 +++
 package-lock.json                        | 11 +++++++++++
 package.json                             |  1 +
 6 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 app/features/core/hooks/use-panelbear.ts
 create mode 100644 app/routes/bear[.]js.ts

diff --git a/app/config/config.server.ts b/app/config/config.server.ts
index f0e8542..86c87fd 100644
--- a/app/config/config.server.ts
+++ b/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,
diff --git a/app/features/core/hooks/use-panelbear.ts b/app/features/core/hooks/use-panelbear.ts
new file mode 100644
index 0000000..b4d50d9
--- /dev/null
+++ b/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]);
+}
diff --git a/app/root.tsx b/app/root.tsx
index e27b06a..8839ba5 100644
--- a/app/root.tsx
+++ b/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>
diff --git a/app/routes/bear[.]js.ts b/app/routes/bear[.]js.ts
new file mode 100644
index 0000000..d73b74f
--- /dev/null
+++ b/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");
diff --git a/package-lock.json b/package-lock.json
index dc7333f..dddfbb7 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2f27570..0734b75 100644
--- a/package.json
+++ b/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",