track pageviews with panelbear

This commit is contained in:
m5r 2022-06-26 20:57:44 +02:00
parent 961dc8e461
commit 852a6eb9e5
6 changed files with 59 additions and 4 deletions

View File

@ -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,

View File

@ -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]);
}

View File

@ -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>

3
app/routes/bear[.]js.ts Normal file
View File

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

11
package-lock.json generated
View File

@ -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",

View File

@ -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",