diff --git a/src/components/MatomoAnalytics.tsx b/src/components/MatomoAnalytics.tsx new file mode 100644 index 0000000..37985fb --- /dev/null +++ b/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, + ); + + 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; +} diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 782812a..972d8a2 100644 --- a/src/routes/__root.tsx +++ b/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 }) { ]} /> + + + );