From f477339f3c9f4be11e37f74870e08c749a825542 Mon Sep 17 00:00:00 2001 From: Loup Theron Date: Fri, 18 Oct 2024 11:14:37 +0200 Subject: [PATCH] Add useMatomo to prevent matomo stats in dev --- frontend/.env.example | 6 ++++ frontend/.env.local.defaults | 6 ++++ frontend/index.html | 15 -------- frontend/src/App.tsx | 3 ++ frontend/src/env.d.ts | 2 ++ frontend/src/hooks/useMatomo.tsx | 43 +++++++++++++++++++++++ frontend/src/hooks/useTracking.ts | 2 +- infra/docker/docker-compose.cypress.yml | 2 ++ infra/docker/docker-compose.puppeteer.yml | 2 ++ infra/remote/docker-compose.yml | 2 ++ 10 files changed, 67 insertions(+), 16 deletions(-) create mode 100644 frontend/src/hooks/useMatomo.tsx diff --git a/frontend/.env.example b/frontend/.env.example index 204b72a38b..b26b0c486d 100644 --- 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 index 2af6a618b1..c14aa92eeb 100644 --- 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 index a452a754cb..83b88d8538 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,21 +8,6 @@ MonitorFish - - - diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4290669d8b..6d0e7815ae 100644 --- 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 } diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts index e0033d32d4..4a9ea48515 100644 --- 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 new file mode 100644 index 0000000000..7594a6165a --- /dev/null +++ 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 index deb637384f..df2e7eda9e 100644 --- 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 index f77b2af7d6..f8c65947ac 100644 --- 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 index 2fbfb2ed21..8dd8c15cf7 100644 --- 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 index c01292c85b..ae66143f85 100644 --- 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