From d4d040f9cbf78bcf1b2fc58b249acc2a1b1d0ab7 Mon Sep 17 00:00:00 2001
From: Dorian Niemiec <dorian.niemiec@svrjs.org>
Date: Sun, 8 Sep 2024 14:34:54 +0200
Subject: [PATCH] feat: add Matomo tracking code

---
 .env.example                              |  3 ++
 app/layout.tsx                            |  2 +
 components/shared/providers/Analytics.tsx | 57 +++++++++++++++++++++++
 pages/_app.tsx                            |  2 +
 4 files changed, 64 insertions(+)
 create mode 100644 components/shared/providers/Analytics.tsx

diff --git a/.env.example b/.env.example
index ae082d2..24193f0 100644
--- a/.env.example
+++ b/.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=
diff --git a/app/layout.tsx b/app/layout.tsx
index b2dc836..16e637a 100644
--- a/app/layout.tsx
+++ b/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>
diff --git a/components/shared/providers/Analytics.tsx b/components/shared/providers/Analytics.tsx
new file mode 100644
index 0000000..e79d1ef
--- /dev/null
+++ b/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;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0d0d480..e489f2c 100644
--- a/pages/_app.tsx
+++ b/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>
     </>
   );