Set up Matomo via matomo-next

.env.example

@@ -1 +1,4 @@
 API_BASE_URL=http://localhost:3000/api
+
+NEXT_PUBLIC_MATOMO_URL=https://piwik.technologiestiftung-berlin.de
+NEXT_PUBLIC_MATOMO_SITE_ID=1234

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@socialgouv/matomo-next": "1.6.1",
     "lucide-react": "^0.263.1",
     "next": "13.4.7",
     "next-intl": "^2.17.5",

src/pages/_app.tsx

@@ -1,13 +1,27 @@
+import { init } from "@socialgouv/matomo-next";
 import { NextIntlClientProvider } from "next-intl";
 import type { AppProps } from "next/app";
+import { useEffect, useRef } from "react";
 import "react-tooltip/dist/react-tooltip.css";
 import GlobalStyles from "../components/GlobalStyles";
 
+const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL as string;
+const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID as string;
+
 type CustomPageProps = {
 	messages: IntlMessages;
 };
 
 export default function App({ Component, pageProps }: AppProps<CustomPageProps>) {
+	const matomoInitialized = useRef(false);
+	useEffect(() => {
+		if (MATOMO_URL && MATOMO_SITE_ID && matomoInitialized.current === false) {
+			init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
+		}
+		return () => {
+			matomoInitialized.current = true;
+		};
+	}, []);
 	return (
 		<NextIntlClientProvider messages={pageProps.messages}>
 			<GlobalStyles />