feat: add Matomo analytics

.env.example

@@ -15,3 +15,6 @@ NEXT_PUBLIC_SANITY_PROJECT_ID=
 SANITY_AUTH_TOKEN=
 NEXT_PUBLIC_SANITY_DATASET=
 SANITY_WEBHOOK_SECRET=
+
+NEXT_PUBLIC_MATOMO_URL=
+NEXT_PUBLIC_MATOMO_SITE_ID=

app/layout.jsx

@@ -1,5 +1,6 @@
 import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
+import Analytics from "@/components/Analytics";
 import "./globals.css";
 
 const inter = Inter({
@@ -49,6 +50,7 @@ export default function RootLayout({ children }) {
           disableTransitionOnChange={true}
         >
           {children}
+          <Analytics pagesRouter={false} />
         </ThemeProvider>
       </body>
     </html>

components/Analytics.jsx

@@ -0,0 +1,65 @@
+"use client";
+import { useEffect, Suspense } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import PropTypes from "prop-types";
+const MATOMO_URL = `${process.env.NEXT_PUBLIC_MATOMO_URL}`;
+const MATOMO_SITE_ID = `${process.env.NEXT_PUBLIC_MATOMO_SITE_ID}`;
+let firstUseEffect = true;
+let firstUseEffect2 = true;
+
+function AnalyticsInternal(props) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (firstUseEffect) {
+      firstUseEffect = false;
+    } else {
+      if (firstUseEffect2) {
+        firstUseEffect2 = false;
+        if (props.pagesRouter) return;
+      }
+
+      // Track page view
+      const _paq = (window._paq = window._paq || []);
+      _paq.push(["setDocumentTitle", document.title]);
+      _paq.push(["setCustomUrl", document.location]);
+      _paq.push(["trackPageView"]);
+      return;
+    }
+
+    // Matomo tracking code
+    const _paq = (window._paq = window._paq || []);
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(["disableCookies"]);
+    _paq.push(["trackPageView"]);
+    _paq.push(["enableLinkTracking"]);
+    (function () {
+      const u = MATOMO_URL + "/";
+      _paq.push(["setTrackerUrl", u + "matomo.php"]);
+      _paq.push(["setSiteId", MATOMO_SITE_ID]);
+      const d = document,
+        g = d.createElement("script"),
+        s = d.getElementsByTagName("script")[0];
+      g.async = true;
+      g.src = u + "matomo.js";
+      s.parentNode.insertBefore(g, s);
+    })();
+  }, [pathname, searchParams, props.pagesRouter]);
+
+  return null;
+}
+
+function Analytics(props) {
+  return (
+    <Suspense>
+      <AnalyticsInternal {...props} />
+    </Suspense>
+  );
+}
+
+Analytics.propTypes = {
+  pagesRouter: PropTypes.bool
+};
+
+export default Analytics;