feat: pas de matomo en prod

.infra/ansible/roles/setup/files/app/.overrides/recette/docker-compose.env.yml

@@ -21,6 +21,7 @@ services:
       - NEXT_PUBLIC_SIRIUS_API_BASE_URL=https://sirius-recette.inserjeunes.beta.gouv.fr
       - NEXT_PUBLIC_MATOMO_SITE_ID=183
       - NEXT_PUBLIC_MATOMO_URL=https://stats.beta.gouv.fr
+      - NEXT_PUBLIC_MATOMO_ENABLE=true
     build:
       args:
         - NEXT_PUBLIC_LOGROCKET=jf5zdt/cest-qui-le-pro-recette
@@ -29,6 +30,7 @@ services:
         - NEXT_PUBLIC_SIRIUS_API_BASE_URL=https://sirius-recette.inserjeunes.beta.gouv.fr
         - NEXT_PUBLIC_MATOMO_SITE_ID=183
         - NEXT_PUBLIC_MATOMO_URL=https://stats.beta.gouv.fr
+        - NEXT_PUBLIC_MATOMO_ENABLE=true
 
   metabase:
     environment:

ui/Dockerfile

@@ -38,6 +38,7 @@ ARG NEXT_PUBLIC_SIRIUS_API_BASE_URL
 ARG NEXT_PUBLIC_LOGROCKET
 ARG NEXT_PUBLIC_MATOMO_SITE_ID
 ARG NEXT_PUBLIC_MATOMO_URL
+ARG NEXT_PUBLIC_MATOMO_ENABLE
 ARG BASE_PATH
 
 ENV HAS_PROXY true
@@ -52,6 +53,7 @@ ENV NEXT_PUBLIC_SIRIUS_API_BASE_URL $NEXT_PUBLIC_SIRIUS_API_BASE_URL
 ENV NEXT_PUBLIC_LOGROCKET $NEXT_PUBLIC_LOGROCKET
 ENV NEXT_PUBLIC_MATOMO_SITE_ID $NEXT_PUBLIC_MATOMO_SITE_ID
 ENV NEXT_PUBLIC_MATOMO_URL $NEXT_PUBLIC_MATOMO_URL
+ENV NEXT_PUBLIC_MATOMO_ENABLE $NEXT_PUBLIC_MATOMO_ENABLE
 ENV BASE_PATH $BASE_PATH
 
 RUN yarn workspace ui build

ui/app/(accompagnateur)/components/Matomo.tsx

@@ -3,7 +3,7 @@
 import { useConsent } from "#/app/components/ConsentManagement";
 import { init, push } from "@socialgouv/matomo-next";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 
 function sanitizeUrl(str: string): string {
   let strSanitized = str.replace(/address=([^&]*)/, "address=***");
@@ -26,6 +26,10 @@ export function Matomo() {
       return;
     }
 
+    if (process.env.NEXT_PUBLIC_MATOMO_ENABLE !== "true") {
+      return;
+    }
+
     init({
       siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID || "",
       url: process.env.NEXT_PUBLIC_MATOMO_URL || "",

ui/app/(accompagnateur)/context/FormationsSearchContext.tsx

@@ -5,6 +5,7 @@ import { useMatomo } from "../hooks/useMatomo";
 import { useRouter, useSearchParams } from "next/navigation";
 import { createContext, useContext, useCallback, useEffect } from "react";
 import { omit } from "lodash-es";
+import { usePlausible } from "next-plausible";
 
 type FormationsSearchParams = {
   address: string;
@@ -24,6 +25,7 @@ const FormationsSearchContext = createContext<{
 });
 
 const FormationsSearchProvider = ({ children }: { children: React.ReactNode }) => {
+  const plausible = usePlausible();
   const { push } = useMatomo();
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -35,6 +37,14 @@ const FormationsSearchProvider = ({ children }: { children: React.ReactNode }) =
     });
   }, [push, searchParams, params]);
 
+  useEffect(() => {
+    plausible("recherche", {
+      props: {
+        ...params,
+      },
+    });
+  }, [plausible, searchParams, params]);
+
   const getUrlParams = useCallback(() => {
     const urlSearchParams = paramsToString(params);
     return `${urlSearchParams}`;

ui/app/components/Plausible.tsx

@@ -0,0 +1,17 @@
+"use client";
+import PlausibleProvider from "next-plausible";
+import { useConsent } from "./ConsentManagement";
+
+export function Plausible() {
+  const { finalityConsent } = useConsent();
+
+  return (
+    finalityConsent?.analytics && (
+      <PlausibleProvider
+        domain={process.env.NEXT_PUBLIC_DOMAIN || ""}
+        trackOutboundLinks={true}
+        taggedEvents={true}
+      ></PlausibleProvider>
+    )
+  );
+}

ui/app/components/RootLayout.tsx

@@ -4,6 +4,7 @@ import StartDsfr from "#/app/StartDsfr";
 import { defaultColorScheme } from "#/app/defaultColorScheme";
 import Link from "next/link";
 import { LogRocketInitializer } from "./LogRocketInitializer";
+import { Plausible } from "./Plausible";
 import { Matomo } from "../(accompagnateur)/components/Matomo";
 import { Suspense } from "react";
 
@@ -40,6 +41,7 @@ export default function RootLayout({ title, children }: { title?: string; childr
           ]}
         />
         <Suspense>
+          <Plausible />
           <Matomo />
           <LogRocketInitializer />
         </Suspense>