Add GA4 and Clarity analytics

2026-05-05 11:31:09 +02:00
parent 52121fa682
commit 3a8a38ea25
4 changed files with 113 additions and 2 deletions
@@ -11,6 +11,11 @@ npm run dev

 Open `http://localhost:3000`.

+Optional analytics env vars:
+
+- `NEXT_PUBLIC_GA_MEASUREMENT_ID`: GA4 measurement ID, e.g. `G-XXXXXXXXXX`
+- `NEXT_PUBLIC_CLARITY_PROJECT_ID`: Microsoft Clarity project ID
+
 ## Production build

 ```bash
@@ -55,6 +60,11 @@ The app is configured for:
 - Ingress class: `public`
 - TLS secret: `hidden11-tls`

+To enable analytics in Kubernetes, create a secret named `hidden11-analytics` in the `hidden11` namespace with:
+
+- `NEXT_PUBLIC_GA_MEASUREMENT_ID`
+- `NEXT_PUBLIC_CLARITY_PROJECT_ID`
+
 ## ArgoCD

 ```bash
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
-import type { ReactNode } from "react";
+import { Suspense, type ReactNode } from "react";
+import Analytics from "@/components/Analytics";
 import "./globals.css";

 export const metadata: Metadata = {
@@ -39,7 +40,12 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body>{children}</body>
+      <body>
+        {children}
+        <Suspense fallback={null}>
+          <Analytics />
+        </Suspense>
+      </body>
    </html>
  );
 }
@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect } from "react";
+import Script from "next/script";
+import { usePathname, useSearchParams } from "next/navigation";
+
+declare global {
+  interface Window {
+    dataLayer?: unknown[];
+    gtag?: (...args: unknown[]) => void;
+  }
+}
+
+const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID;
+const CLARITY_PROJECT_ID = process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID;
+
+function trackPageView(url: string) {
+  if (!GA_MEASUREMENT_ID || !window.gtag) {
+    return;
+  }
+
+  window.gtag("event", "page_view", {
+    page_location: window.location.href,
+    page_path: url,
+    page_title: document.title,
+  });
+}
+
+export default function Analytics() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
+
+    const query = searchParams.toString();
+    const url = query ? `${pathname}?${query}` : pathname;
+    trackPageView(url);
+  }, [pathname, searchParams]);
+
+  if (!GA_MEASUREMENT_ID && !CLARITY_PROJECT_ID) {
+    return null;
+  }
+
+  return (
+    <>
+      {GA_MEASUREMENT_ID ? (
+        <>
+          <Script
+            src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+            strategy="afterInteractive"
+          />
+          <Script id="ga4-init" strategy="afterInteractive">
+            {`
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              window.gtag = gtag;
+              gtag('js', new Date());
+              gtag('config', '${GA_MEASUREMENT_ID}', { send_page_view: false });
+            `}
+          </Script>
+        </>
+      ) : null}
+      {CLARITY_PROJECT_ID ? (
+        <Script id="clarity-init" strategy="afterInteractive">
+          {`
+            (function(c,l,a,r,i,t,y){
+              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+              t=l.createElement(r);
+              t.async=1;
+              t.src="https://www.clarity.ms/tag/" + i;
+              y=l.getElementsByTagName(r)[0];
+              y.parentNode.insertBefore(t,y);
+            })(window, document, "clarity", "script", "${CLARITY_PROJECT_ID}");
+          `}
+        </Script>
+      ) : null}
+    </>
+  );
+}
@@ -21,6 +21,19 @@ spec:
        - name: hidden11
          image: gitea.alexandre-vazquez.cloud/alexandrev/hidden11:latest
          imagePullPolicy: IfNotPresent
+          env:
+            - name: NEXT_PUBLIC_GA_MEASUREMENT_ID
+              valueFrom:
+                secretKeyRef:
+                  name: hidden11-analytics
+                  key: NEXT_PUBLIC_GA_MEASUREMENT_ID
+                  optional: true
+            - name: NEXT_PUBLIC_CLARITY_PROJECT_ID
+              valueFrom:
+                secretKeyRef:
+                  name: hidden11-analytics
+                  key: NEXT_PUBLIC_CLARITY_PROJECT_ID
+                  optional: true
          ports:
            - name: http
              containerPort: 3000