Rework analytics to work on page change

Sydney-Informatics-Hub · Sep 30, 2024 · 458e586 · 458e586
1 parent 6f48029
commit 458e586
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 0 deletions.
diff --git a/app/_components/AnalyticsScript.tsx b/app/_components/AnalyticsScript.tsx
@@ -9,6 +9,7 @@ export default function AnalyticsScript() {
     <Script
       src="//gc.zgo.at/count.js"
       data-goatcounter={COUNT_URL}
+      data-goatcounter-settings='{"no_onload": true}'
       async
       strategy="afterInteractive"
     />

diff --git a/app/_components/AnalyticsUpdate.tsx b/app/_components/AnalyticsUpdate.tsx
@@ -0,0 +1,29 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+declare global {
+  interface Window {
+    goatcounter: {
+      count: (params: { path: string }) => void;
+    };
+  }
+}
+
+/**
+ * Component to call goatcounter's count function when
+ * the pathname changes
+ */
+export default function AnalyticsUpdate() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window.goatcounter?.count({
+        path: pathname,
+      });
+    }
+  }, [pathname, window?.goatcounter]);
+
+  return null;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -7,6 +7,7 @@ import AceFormProvider from "@/app/_forms/AceFormProvider";
 import MainFooter from "@/app/_components/MainFooter";
 import TermsModal from "@/app/_components/TermsModal";
 import AnalyticsScript from "@/app/_components/AnalyticsScript";
+import AnalyticsUpdate from "@/app/_components/AnalyticsUpdate";
 
 export const metadata: Metadata = {
   title: {
@@ -40,6 +41,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
     >
       <head>
         <AnalyticsScript />
+        <AnalyticsUpdate />
       </head>
       <body>
         <TermsModal />