feat: add Matomo tracking code

.env.example

@@ -26,5 +26,8 @@ NEXT_PUBLIC_SANITY_PROJECT_ID=
 SANITY_AUTH_TOKEN=
 SANITY_WEBHOOK_SECRET=
 
+NEXT_PUBLIC_MATOMO_URL=
+NEXT_PUBLIC_MATOMO_SITE_ID=
+
 NEXT_PUBLIC_HCAPTCHA_SITE_KEY=
 HCAPTCHA_SECRET=

app/layout.tsx

@@ -3,6 +3,7 @@ import { Poppins } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/shared/providers/themeprovider";
 import { Toaster } from "@/components/ui/toaster";
+import Analytics from "@/components/shared/providers/Analytics";
 
 const poppins = Poppins({
   weight: ["400", "600", "700", "900"],
@@ -55,6 +56,7 @@ export default function RootLayout({
         >
           {children}
           <Toaster />
+          <Analytics />
         </ThemeProvider>
       </body>
     </html>

components/shared/providers/Analytics.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+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;
+let secondUseEffect2 = true;
+
+export default function AuthProvider() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (firstUseEffect2) {
+      firstUseEffect2 = false;
+      return;
+    }
+    if (secondUseEffect2) {
+      secondUseEffect2 = false;
+      return;
+    }
+
+    // Track page view
+    const _paq = ((window as any)._paq = (window as any)._paq || []);
+    _paq.push(["setDocumentTitle", document.title]);
+    _paq.push(["trackPageView"]);
+  }, [pathname, searchParams]);
+
+  useEffect(() => {
+    if (firstUseEffect) {
+      firstUseEffect = false;
+    } else {
+      return;
+    }
+
+    // Matomo tracking code
+    const _paq = ((window as any)._paq = (window as any)._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 as ParentNode).insertBefore(g, s);
+    })();
+  }, []);
+
+  return null;
+}

pages/_app.tsx

@@ -1,6 +1,7 @@
 import { Poppins } from "next/font/google";
 import "./globals.css";
 import { AppProps } from "next/app";
+import Analytics from "@/components/shared/providers/Analytics";
 
 const poppins = Poppins({
   weight: ["400", "600", "700", "900"],
@@ -17,6 +18,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       `}</style>
       <div className={`antialiased ${poppins.className}`}>
         <Component {...pageProps} />
+        <Analytics />
       </div>
     </>
   );