Add useMatomo to prevent matomo stats in dev

MTES-MCT · Oct 18, 2024 · f477339 · f477339
1 parent ea0324b
commit f477339
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 16 deletions.
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -38,6 +38,12 @@ FRONTEND_MONITORFISH_VERSION=
 FRONTEND_SENTRY_TRACING_ORIGINS=
 FRONTEND_SENTRY_ENV=
 
+################################################################################
+# UseMatomo
+
+FRONTEND_MATOMO_URL=
+FRONTEND_MATOMO_ID=
+
 ################################################################################
 # Shom
 

diff --git a/frontend/.env.local.defaults b/frontend/.env.local.defaults
@@ -38,6 +38,12 @@ FRONTEND_MONITORFISH_VERSION=
 FRONTEND_SENTRY_TRACING_ORIGINS=
 FRONTEND_SENTRY_ENV=
 
+################################################################################
+# UseMatomo
+
+FRONTEND_MATOMO_URL=
+FRONTEND_MATOMO_ID=
+
 ################################################################################
 # Shom
 

diff --git a/frontend/index.html b/frontend/index.html
@@ -8,21 +8,6 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="MonitorFish" />
     <title>MonitorFish</title>
-    <!-- Matomo -->
-    <script>
-      var _paq = window._paq = window._paq || [];
-      /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-      _paq.push(['trackPageView']);
-      _paq.push(['enableLinkTracking']);
-      (function() {
-        var u="https://stats.beta.gouv.fr/";
-        _paq.push(['setTrackerUrl', u+'matomo.php']);
-        _paq.push(['setSiteId', '146']);
-        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-        g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
-      })();
-    </script>
-    <!-- End Matomo Code -->
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import { CustomGlobalStyle } from '@components/CustomGlobalStyle'
 import { FrontendErrorBoundary } from '@components/FrontendErrorBoundary'
+import { useMatomo } from '@hooks/useMatomo'
 import { GlobalStyle, THEME, ThemeProvider } from '@mtes-mct/monitor-ui'
 import { UnsupportedBrowserPage } from '@pages/UnsupportedBrowserPage'
 import { isBrowserSupported } from '@utils/isBrowserSupported'
@@ -14,6 +15,8 @@ import { router } from './router'
 countries.registerLocale(COUNTRIES_FR)
 
 export function App() {
+  useMatomo()
+
   if (!isBrowserSupported()) {
     return <UnsupportedBrowserPage />
   }

diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts
@@ -5,6 +5,8 @@ interface ImportMetaEnv {
   readonly FRONTEND_GEOSERVER_LOCAL_URL: string
   readonly FRONTEND_GEOSERVER_REMOTE_URL: string
   readonly FRONTEND_MAPBOX_KEY: string
+  readonly FRONTEND_MATOMO_ID: string
+  readonly FRONTEND_MATOMO_URL: string
   readonly FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED: string
   readonly FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED: string
   readonly FRONTEND_MONITORENV_URL: string

diff --git a/frontend/src/hooks/useMatomo.tsx b/frontend/src/hooks/useMatomo.tsx
@@ -0,0 +1,43 @@
+import { useEffect } from 'react'
+
+/* eslint-disable no-underscore-dangle */
+export function useMatomo() {
+  const matomoUrl = import.meta.env.FRONTEND_MATOMO_URL
+  const matomoSiteId = import.meta.env.FRONTEND_MATOMO_ID
+  const isMatomoActivated = matomoUrl && matomoSiteId
+
+  useEffect(() => {
+    if (!isMatomoActivated) {
+      return
+    }
+
+    const normalizedMatomoUrl = matomoUrl[matomoUrl.length - 1] !== '/' ? `${matomoUrl}/` : matomoUrl
+
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    window._paq = window._paq || []
+
+    window._paq.push(['trackPageView'])
+    window._paq.push(['enableLinkTracking'])
+    window._paq.push(['setTrackerUrl', `${normalizedMatomoUrl}matomo.php`])
+    window._paq.push(['setSiteId', matomoSiteId])
+
+    const doc = document
+    const scriptElement = doc.createElement('script')
+    const scripts = doc.getElementsByTagName('script')[0]
+
+    scriptElement.type = 'text/javascript'
+    scriptElement.async = true
+    scriptElement.defer = true
+    scriptElement.src = `${normalizedMatomoUrl}matomo.js`
+
+    if (scripts && scripts.parentNode) {
+      scripts.parentNode.insertBefore(scriptElement, scripts)
+    }
+  }, [matomoSiteId, matomoUrl, isMatomoActivated])
+
+  return null
+}
+/* eslint-enable no-underscore-dangle */
diff --git a/frontend/src/hooks/useTracking.ts b/frontend/src/hooks/useTracking.ts
@@ -11,7 +11,7 @@ type Tracking = {
 }
 
 /**
- * Wrapper of Matomo script injected in `index.html`.
+ * Wrapper of UseMatomo script injected in `index.html`.
  *
  *
  * @see https://developer.matomo.org/guides/tracking-javascript-guide

diff --git a/infra/docker/docker-compose.cypress.yml b/infra/docker/docker-compose.cypress.yml
@@ -53,6 +53,8 @@ services:
       - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true # Even if we inject this env var, the value is not used (see cypress.config.ts)
       - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=true
       - FRONTEND_PRIOR_NOTIFICATION_LIST_ENABLED=true
+      - FRONTEND_MATOMO_URL=
+      - FRONTEND_MATOMO_ID=
     ports:
       - 8880:8880
       - 8000:8000

diff --git a/infra/docker/docker-compose.puppeteer.yml b/infra/docker/docker-compose.puppeteer.yml
@@ -69,6 +69,8 @@ services:
       - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=true
       - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=true
       - FRONTEND_PRIOR_NOTIFICATION_LIST_ENABLED=true
+      - FRONTEND_MATOMO_URL=
+      - FRONTEND_MATOMO_ID=
     ports:
       - 8880:8880
       - 8000:8000

diff --git a/infra/remote/docker-compose.yml b/infra/remote/docker-compose.yml
@@ -50,6 +50,8 @@ services:
       - FRONTEND_MISSION_FORM_AUTO_SAVE_ENABLED=$MONITORFISH_MISSION_FORM_AUTO_SAVE_ENABLED
       - FRONTEND_MISSION_FORM_AUTO_UPDATE_ENABLED=$MONITORFISH_MISSION_FORM_AUTO_UPDATE_ENABLED
       - FRONTEND_PRIOR_NOTIFICATION_LIST_ENABLED=$MONITORFISH_PRIOR_NOTIFICATION_LIST_ENABLED
+      - FRONTEND_MATOMO_URL=$MONITORFISH_MATOMO_URL
+      - FRONTEND_MATOMO_ID=$MONITORFISH_MATOMO_ID
     ports:
       - 8880:8880
       - 8000:8000