add Matomo analytics code

src/components/MatomoAnalytics.tsx

@@ -0,0 +1,33 @@
+import { trackAppRouter } from "@socialgouv/matomo-next";
+import { useLocation, useSearch } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+const MATOMO_URL = import.meta.env.NEXT_PUBLIC_MATOMO_URL;
+const MATOMO_SITE_ID = import.meta.env.NEXT_PUBLIC_MATOMO_SITE_ID;
+
+export function MatomoAnalytics() {
+	const location = useLocation();
+	const searchParams = useSearch({ strict: false });
+
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+
+		const serializedParams = new URLSearchParams(
+			searchParams as Record<string, string>,
+		);
+
+		trackAppRouter({
+			url: MATOMO_URL || "",
+			siteId: MATOMO_SITE_ID || "",
+			pathname: location.pathname,
+			searchParams: serializedParams,
+			enableHeatmapSessionRecording: false,
+			enableHeartBeatTimer: true,
+			cleanUrl: true,
+			disableCookies: true,
+			debug: import.meta.env.DEV,
+		});
+	}, [location.pathname, searchParams]);
+
+	return null;
+}

src/routes/__root.tsx

@@ -1,10 +1,10 @@
 import { TanStackDevtools } from "@tanstack/react-devtools";
 import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
-import type { ReactNode } from "react";
+import { type ReactNode, Suspense } from "react";
+import { MatomoAnalytics } from "#/components/MatomoAnalytics.tsx";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
-
 import appCss from "../styles.css?url";
 
 export const Route = createRootRoute({
@@ -53,6 +53,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 					]}
 				/>
 				<Scripts />
+				<Suspense fallback={null}>
+					<MatomoAnalytics />
+				</Suspense>
 			</body>
 		</html>
 	);