From 458e5864b034809904d5ab7999fe3a7cd2125af2 Mon Sep 17 00:00:00 2001
From: marius-mather <marius.mather@sydney.edu.au>
Date: Mon, 30 Sep 2024 11:25:14 +1000
Subject: [PATCH] Rework analytics to work on page change

---
 app/_components/AnalyticsScript.tsx |  1 +
 app/_components/AnalyticsUpdate.tsx | 29 +++++++++++++++++++++++++++++
 app/layout.tsx                      |  2 ++
 3 files changed, 32 insertions(+)
 create mode 100644 app/_components/AnalyticsUpdate.tsx
diff --git a/app/_components/AnalyticsScript.tsx b/app/_components/AnalyticsScript.tsx
index deaea74..e2cfec6 100644
--- 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
new file mode 100644
index 0000000..73e53fa
--- /dev/null
+++ 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
index 4bed289..7750b72 100644
--- 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 />
