feat: analyses (#6)

* feat: ajout de plausible

* feat: logrocket

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

@@ -15,6 +15,13 @@ services:
       - ACCOMPAGNATEUR_POSTGRES_CA={{ vault.ACCOMPAGNATEUR_POSTGRES_CA }}
       - DATABASE_URL={{ vault.ACCOMPAGNATEUR_POSTGRES_URI }}
 
+  ui:
+    environment:
+      - NEXT_PUBLIC_LOGROCKET=jf5zdt/cest-qui-le-pro
+    build:
+      args:
+        - NEXT_PUBLIC_LOGROCKET=jf5zdt/cest-qui-le-pro
+
   metabase:
     mem_limit: 4g
     environment:

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

@@ -13,6 +13,13 @@ services:
       - ACCOMPAGNATEUR_POSTGRES_CA={{ vault.ACCOMPAGNATEUR_RECETTE_POSTGRES_CA }}
       - DATABASE_URL={{ vault.ACCOMPAGNATEUR_RECETTE_POSTGRES_URI }}
 
+  ui:
+    environment:
+      - NEXT_PUBLIC_LOGROCKET=jf5zdt/cest-qui-le-pro-recette
+    build:
+      args:
+        - NEXT_PUBLIC_LOGROCKET=jf5zdt/cest-qui-le-pro-recette
+
   metabase:
     environment:
       - MB_SITE_URL=https://{{ dns_name }}/metabase

reverse_proxy/app/nginx/templates/conf.d/default.conf.template

@@ -14,7 +14,7 @@ map $http_host $robots {
 
 map ${IS_LOCALHOST} $CSP {
     "1" "";
-    default "default-src 'self' https://www.notion.so/ https://plausible.io/ https://openmaptiles.github.io/ https://*.inserjeunes.beta.gouv.fr/ https://*.beta.gouv.fr/ https://*.data.gouv.fr/ 'unsafe-inline' data: blob:;";
+    default "default-src 'self' https://www.notion.so/ https://plausible.io/ https://openmaptiles.github.io/ https://*.inserjeunes.beta.gouv.fr/ https://*.beta.gouv.fr/ https://*.data.gouv.fr/ https://*.lrkt-in.com/ 'unsafe-inline' data: blob:;";
 }
 
 server {

server/src/cli.ts

@@ -70,8 +70,8 @@ async function importRCOCommand() {
 async function importFormationEtablissementCommand() {
   const importFormationStats = await importFormation();
   const importIdeoFichesFormationsStats = await importIdeoFichesFormations();
-  const importFormationEtablissementStats = await importFormationEtablissement();
   const importRCOStats = await importRCO();
+  const importFormationEtablissementStats = await importFormationEtablissement();
   const importIndicateurEntreeStats = await importIndicateurEntree();
   const importIndicateurPoursuiteStats = await importIndicateurPoursuite();
   const computeFormationTagStats = await computeFormationTag();

ui/Dockerfile

@@ -32,6 +32,7 @@ ARG NEXT_PUBLIC_EXPOSITION_WIDGET_HASH
 ARG NEXT_PUBLIC_EXPOSITION_API_BASE_URL
 ARG NEXT_PUBLIC_ACCOMPAGNATEUR_API_BASE_URL
 ARG NEXT_PUBLIC_SIRIUS_API_BASE_URL
+ARG NEXT_PUBLIC_LOGROCKET
 ARG BASE_PATH
 
 ENV HAS_PROXY true
@@ -43,6 +44,7 @@ ENV NEXT_PUBLIC_EXPOSITION_WIDGET_HASH $NEXT_PUBLIC_EXPOSITION_WIDGET_HASH
 ENV NEXT_PUBLIC_ACCOMPAGNATEUR_API_BASE_URL $NEXT_PUBLIC_ACCOMPAGNATEUR_API_BASE_URL
 ENV NEXT_PUBLIC_EXPOSITION_API_BASE_URL $NEXT_PUBLIC_EXPOSITION_API_BASE_URL
 ENV NEXT_PUBLIC_SIRIUS_API_BASE_URL $NEXT_PUBLIC_SIRIUS_API_BASE_URL
+ENV NEXT_PUBLIC_LOGROCKET $NEXT_PUBLIC_LOGROCKET
 ENV BASE_PATH $BASE_PATH
 
 RUN yarn workspace ui build

ui/app/(accompagnateur)/details/[id]/FormationBlockPoursuite.tsx

@@ -29,7 +29,7 @@ export default function FormationBlockPoursuite({
       {formation.formationPoursuite && (
         <Container style={{ marginTop: "2rem" }}>
           <Typography variant="h3" style={{ marginBottom: "1rem" }}>
-            Quels études sont envisageables après ?
+            Quelles études sont envisageables après la formation ?
           </Typography>
           <Grid container spacing={"1.25rem"}>
             {formation.formationPoursuite.slice(0, nbrDisplay).map((formationPoursuite, index) => {

ui/app/components/ConsentManagement.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { createConsentManagement } from "@codegouvfr/react-dsfr/consentManagement";
+
+export const {
+  ConsentBannerAndConsentManagement,
+  FooterConsentManagementItem,
+  FooterPersonalDataPolicyItem,
+  useConsent,
+} = createConsentManagement({
+  finalityDescription: ({ lang }) => ({
+    analytics: {
+      title: "Analyse",
+      description: "Nous utilisons des cookies pour mesurer l’audience de notre site et améliorer son contenu.",
+    },
+    // personalization: {
+    //   title: "Personnalisation",
+    //   description: "Nous utilisons des cookies pour vous proposer des contenus adaptés à vos centres d’intérêts.",
+    // },
+  }),
+});

ui/app/components/LogRocketInitializer.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect } from "react";
+import LogRocket from "logrocket";
+import { useConsent } from "./ConsentManagement";
+
+export function LogRocketInitializer() {
+  const { finalityConsent } = useConsent();
+
+  useEffect(() => {
+    finalityConsent?.analytics &&
+      process.env.NEXT_PUBLIC_LOGROCKET &&
+      LogRocket.init(process.env.NEXT_PUBLIC_LOGROCKET, {
+        network: {
+          requestSanitizer: (request) => {
+            // Remove address request
+            request.url = request.url.replace(/address=([^&]*)/, "address=***");
+            request.url = request.url.replace(/latitude=([^&]*)/, "latitude=***");
+            request.url = request.url.replace(/longitude=([^&]*)/, "longitude=***");
+            request.url = request.url.replace(/latitudeA=([^&]*)/, "latitudeA=***");
+            request.url = request.url.replace(/longitudeA=([^&]*)/, "longitudeA=***");
+
+            if (request.url.includes("api-adresse.data.gouv.fr")) {
+              return null;
+            }
+            return request;
+          },
+        },
+        browser: {
+          urlSanitizer: (url) => {
+            let sanitizedUrl = url;
+            // Remove address
+            sanitizedUrl = sanitizedUrl.replace(/address=([^&]*)/, "address=***");
+            sanitizedUrl = sanitizedUrl.replace(/latitude=([^&]*)/, "latitude=***");
+            sanitizedUrl = sanitizedUrl.replace(/longitude=([^&]*)/, "longitude=***");
+            sanitizedUrl = sanitizedUrl.replace(/latitudeA=([^&]*)/, "latitudeA=***");
+            sanitizedUrl = sanitizedUrl.replace(/longitudeA=([^&]*)/, "longitudeA=***");
+            return sanitizedUrl;
+          },
+        },
+      });
+  }, [finalityConsent]);
+  return null;
+}

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

@@ -3,11 +3,11 @@ import { getHtmlAttributes } from "@codegouvfr/react-dsfr/next-appdir/getHtmlAtt
 import StartDsfr from "#/app/StartDsfr";
 import { defaultColorScheme } from "#/app/defaultColorScheme";
 import Link from "next/link";
-import PlausibleProvider from "next-plausible";
+import { LogRocketInitializer } from "./LogRocketInitializer";
+import { Plausible } from "./Plausible";
 
 export default function RootLayout({ title, children }: { title?: string; children: JSX.Element }) {
   const lang = "fr";
-
   return (
     <html
       {...getHtmlAttributes({ defaultColorScheme, lang })}
@@ -38,11 +38,8 @@ export default function RootLayout({ title, children }: { title?: string; childr
             // //"Spectral-ExtraBold"
           ]}
         />
-        <PlausibleProvider
-          domain={process.env.NEXT_PUBLIC_DOMAIN || ""}
-          trackOutboundLinks={true}
-          taggedEvents={true}
-        ></PlausibleProvider>
+        <Plausible />
+        <LogRocketInitializer />
       </head>
       <body
         style={{

ui/app/components/form/AddressField.tsx

@@ -146,6 +146,7 @@ export default function AddressField({
 
   return (
     <div
+      data-private
       style={{
         width: "100%",
         borderRadius: "5px",

ui/app/layout.tsx

@@ -6,6 +6,7 @@ import "./(accompagnateur)/style.scss";
 import Title from "./(accompagnateur)/components/Title";
 import Footer from "./components/Footer";
 import Link from "./components/Link";
+import { ConsentBannerAndConsentManagement } from "./components/ConsentManagement";
 
 export default function MainLayout({ children }: { children: JSX.Element }) {
   return (
@@ -15,6 +16,7 @@ export default function MainLayout({ children }: { children: JSX.Element }) {
         <Layout header={<Header title={title} tagline={tagline} />} title={title}>
           <>
             {children}
+            <ConsentBannerAndConsentManagement />
             <Footer
               brandTop={
                 <>

ui/package.json

@@ -38,6 +38,7 @@
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",
     "lodash-es": "^4.17.21",
+    "logrocket": "^9.0.0",
     "material-react-table": "^1.14.0",
     "mockdate": "^3.0.5",
     "moment": "^2.29.4",

yarn.lock

@@ -7618,6 +7618,11 @@ follow-redirects@^1.15.6:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
   integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
 for-each@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -10219,6 +10224,11 @@ loglevel@^1.6.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.2.tgz#c2e028d6c757720107df4e64508530db6621ba08"
   integrity sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==
 
+logrocket@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/logrocket/-/logrocket-9.0.0.tgz#bbe4c116f9859c9323a71245417521c4f11d4610"
+  integrity sha512-/nYoKA4W8nr3YETPyOin9oiFFzwGDv8Lh02DG8ZnS9coKBYwrEG+dE2OqpOotVbs4zJWjCCPaqhR/HAMi+O3yA==
+
 longest-streak@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"