Replace Vercel Analytics with Friendly Analytics / Matomo (#110)

* feat: Friendly Analytics instead of Vercel Analytics

app/layout.tsx

@@ -1,7 +1,7 @@
+import Friendly from "@/utils/Friendly";
 import "./globals.css";
 import type { Metadata } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { Analytics } from "@vercel/analytics/react";
 import { Footer, Navbar, Button } from "@opensource-construction/components";
 import { corbert, glyphter } from "@/components/src/tokens/fonts";
 
@@ -67,8 +67,8 @@ export default function RootLayout({
         <footer>
           <Footer />
         </footer>
+        <Friendly />
         <SpeedInsights />
-        <Analytics />
       </body>
     </html>
   );

content/page/imprint-and-data-protection.mdx

@@ -39,6 +39,6 @@ When you access our web pages, the following data is stored in log files: IP add
 
 ## Privacy policy
 
-This website uses Vercel Analytics for analytics. You can read more in the [Vercel Terms of Service](https://vercel.com/docs/analytics/privacy-policy).
+This website uses [Friendly Analytics](https://friendly.ch/en/analytics) for analytics, which is based on Matomo. You can read more in the [Privacy Policy of Friendly Analytics](https://friendly.ch/en/privacy/analytics) and in the [Matomo documentation on privacy](https://matomo.org/guide/manage-matomo/privacy/).
 
 The purpose of us using this software is to understand our website traffic so that we can continually improve our website and business. The lawful basis as per the GDPR is "f); where our legitimate interests are to improve our website and business continually." As per the explanation, no personal data is stored over time.

package.json

@@ -18,7 +18,7 @@
     "@headlessui/react": "^2.0.4",
     "@heroicons/react": "^2.1.3",
     "@opensource-construction/components": "./components",
-    "@vercel/analytics": "^1.2.2",
+    "@socialgouv/matomo-next": "^1.9.0",
     "@vercel/speed-insights": "^1.0.10",
     "country-flag-icons": "^1.5.12",
     "google-spreadsheet": "^4.1.2",

utils/Friendly.tsx

@@ -0,0 +1,49 @@
+"use client";
+import { init, push } from "@socialgouv/matomo-next";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Suspense, useEffect, useRef } from "react";
+
+// matomo-next does not (yet) support next's app router natively
+// details see https://github.com/SocialGouv/matomo-next/issues/99
+// hence we do some manual setup and event tracking in a small wrapper
+// loosely based on https://github.com/betagouv/reno/blob/master/utils/Matomo.tsx
+
+const MATOMO_URL =
+  process.env.NEXT_PUBLIC_MATOMO_URL || "https://app.friendlyanalytics.ch";
+const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID || undefined;
+
+const FriendlyComponent = () => {
+  const pathname = usePathname(),
+    searchParams = useSearchParams();
+  const searchParamsString = searchParams.toString();
+  const isInitialLoad = useRef(true);
+
+  useEffect(() => {
+    init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID ?? "" });
+    return () => push(["HeatmapSessionRecording::disable"]);
+  }, []);
+
+  useEffect(() => {
+    if (isInitialLoad.current) {
+      isInitialLoad.current = false;
+    } else {
+      if (pathname) {
+        const url =
+          pathname + (searchParamsString ? "?" + searchParamsString : "");
+        push(["setCustomUrl", pathname]);
+        push(["disableCookies"]);
+        push(["trackPageView"]);
+      }
+    }
+  }, [pathname, searchParamsString]);
+
+  return null;
+};
+
+export default function Friendly() {
+  return (
+    <Suspense>
+      <FriendlyComponent />
+    </Suspense>
+  );
+}