Make Matomo work with react

.env.example

@@ -36,8 +36,7 @@ EMAIL_SMTP_KEY=ASK_A_MAINTAINER
 EMAIL_HOST_USER=YOUR_EMAIL
 
 MATOMO_ACTIVATE=0
-MATOMO_SCRIPT_NAME=container_mlVvm9TG.js
-MATOMO_TOKEN=TO_FILL
+
 HIGHCHART_SERVER=https://highcharts-export.osc-fr1.scalingo.io
 
 MATTERMOST_WEBHOOK=https://mattermost.incubateur.net/hooks/uak581f8bidyxp5td67rurj5sh

README.md

@@ -69,8 +69,6 @@ Le site est désormais accessible en local à cette adresse:
 | LOCAL_FILE_DIRECTORY | Emplacement des données locales (utile pour charger des shapefile en local au lieu de S3) | public_data/local_data |
 | MATTERMOST_WEBHOOK | Webhook personnel pour envoyer des messages dans Mattermost | https://mattermost.incubateur.net/hooks/uak581f8bidyxp5td67rurj5sh |
 | MATOMO_ACTIVATE | Détermine si des infos doivent être envoyé à Matomo | 0 |
-| MATOMO_SCRIPT_NAME | | |
-| MATOMO_TOKEN | Token pour envoyer les données à Matomo |  |
 | POSTGRES_DB | Nom de la base de donnée (local uniquement) | postgres |
 | POSTGRES_USER | Username par défaut de la base de donnée (local uniquement) | postgres |
 | POSTGRES_PASSWORD | Password par défaut de la base de donnée (local uniquement) | postgres |

assets/scripts/components/layout/Dashboard.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { useGetProjectQuery } from '../../services/api';
-import { setProjectData } from '../../store/projectSlice';
 import styled from 'styled-components';
+import { useGetProjectQuery } from '@services/api';
+import { setProjectData } from '@store/projectSlice';
+import useMatomoTracking from '@hooks/useMatomoTracking';
+import usePageTitle from '@hooks/usePageTitle';
 import Footer from '@components/layout/Footer';
 import Header from '@components/layout/Header';
 import Navbar from '@components/layout/Navbar';
@@ -54,6 +56,7 @@ const Dashboard: React.FC<DashboardProps> = ({ projectId }) => {
                 <>
                     <Header />
                     <Router>
+                        <TrackingWrapper />
                         <Navbar />
                         <Main>
                             <TopBar />
@@ -106,4 +109,10 @@ const Dashboard: React.FC<DashboardProps> = ({ projectId }) => {
     );
 };
 
+const TrackingWrapper: React.FC = () => {
+    usePageTitle();
+    useMatomoTracking();
+    return null; // Ce composant ne rend rien
+};
+
 export default Dashboard;

assets/scripts/components/layout/TopBar.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from '@store/store';
-import { formatDateTime } from '../../utils/formatUtils';
+import { formatDateTime } from '@utils/formatUtils';
 import styled from 'styled-components';
 import useHtmx from '@hooks/useHtmx';
 import Divider from '@components/ui/Divider';

assets/scripts/hooks/useMatomoTracking.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const useMatomoTracking = (): void => {
+    const location = useLocation();
+
+    useEffect(() => {
+        if (typeof _paq !== 'undefined') {            
+            _paq.push(['setCustomUrl', window.location.href]);
+            _paq.push(['setDocumentTitle', document.title]);
+            _paq.push(['trackPageView']);
+        }
+    }, [location]);
+};
+
+export default useMatomoTracking;

assets/scripts/hooks/usePageTitle.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const pageTitles: { [key: string]: string } = {
+    '/project/:projectId/tableau-de-bord/synthesis': 'Synthèse',
+    '/project/:projectId/tableau-de-bord/consommation': 'Consommation d\'espaces NAF',
+    '/project/:projectId/tableau-de-bord/trajectoires': 'Trajectoire ZAN',
+    '/project/:projectId/tableau-de-bord/découvrir-l-ocsge': 'Usage et couverture du sol (OCS GE)',
+    '/project/:projectId/tableau-de-bord/artificialisation': 'Artificialisation',
+    '/project/:projectId/tableau-de-bord/impermeabilisation': 'Impermeabilisation',
+    '/project/:projectId/tableau-de-bord/zonages-d-urbanisme': 'Artificialisation des zonages d\'urbanisme',
+    '/project/:projectId/tableau-de-bord/rapport-local': 'Rapport triennal local',
+    '/project/:projectId/edit': 'Paramètres du diagnostic',
+};
+
+const usePageTitle = (): void => {
+    const location = useLocation();
+
+    useEffect(() => {
+        const currentPath = location.pathname;
+
+        const projectIdMatch = currentPath.match(/\/project\/([^\/]+)\//);
+        const projectId = projectIdMatch ? projectIdMatch[1] : '';
+
+        const pageTitle = Object.keys(pageTitles).find(path =>
+            currentPath.includes(path.replace(':projectId', projectId))
+        );
+
+        document.title = pageTitle ? `${pageTitles[pageTitle]} | Mon Diagnostic Artificialisation` : 'Mon Diagnostic Artificialisation';
+    }, [location]);
+};
+
+export default usePageTitle;

assets/types/declaration.d.ts

@@ -7,3 +7,5 @@ declare module '*.geojson' {
     const value: any;
     export default value;
 }
+
+declare var _paq: any;

config/settings.py

@@ -475,7 +475,6 @@ def show_toolbar(request):
 
 
 # MATOMO
-MATOMO_TOKEN = env.str("MATOMO_TOKEN", default="")
 MATOMO_ACTIVATE = env.bool("MATOMO_ACTIVATE", default=False)
 
 # GOOGLE TAG ADWORDS

home/templates/home/download.html

@@ -58,7 +58,7 @@ <h1>Trames de rapport triennal local des communes au RNU</h1>
 {% block tagging %}
 <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
 window.onload = function(event) {
-  _paq.push(['trackEvent', 'local_report_download_funnel', 'open_home_local_report', 'local_report_home_opened'])
+  trackEvent('local_report_download_funnel', 'open_home_local_report', 'local_report_home_opened')
 }
 </script>
 {% endblock tagging %}

home/templates/home/home.html

@@ -208,7 +208,7 @@ <h3 class="text-center">D'où proviennent nos données ?</h3>
           <p class="fr-text--xs text-muted">(Nous intégrons sur Mon Diagnostic Artificialisation les millésimes OCS GE en version finalisée 1.1 et 2.0)</p>
         </div>
         <div class="card_content">
-          <div id="react-highcharts-ocsge"></div>
+          {% comment %} <div id="react-highcharts-ocsge"></div> {% endcomment %}
         </div>
       </div>
     </div>
@@ -220,7 +220,7 @@ <h3 class="text-center">D'où proviennent nos données ?</h3>
 {% block tagging %}
 <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
 window.onload = function(event) {
-  _paq.push(['trackEvent', 'north_star_activation_funnel', 'open_homepage', 'step_0_north_star_activation_funnel'])
+  trackEvent('north_star_activation_funnel', 'open_homepage', 'step_0_north_star_activation_funnel')
 }
 </script>
 {% endblock tagging %}

home/templates/home/home_rapport_local.html

@@ -141,7 +141,7 @@ <h2>Cadre réglementaire</h2>
 {% block tagging %}
 <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
 window.onload = function(event) {
-  _paq.push(['trackEvent', 'local_report_download_funnel', 'open_home_local_report', 'local_report_home_opened'])
+  trackEvent('local_report_download_funnel', 'open_home_local_report', 'local_report_home_opened')
 }
 </script>
 {% endblock tagging %}

project/templates/project/components/dashboard/trajectoires.html

@@ -52,11 +52,11 @@ <h1 class="fr-modal__title" id="setTargetLabel">
 {% block tagging %}
 <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
 window.onload = function(event) {
-    _paq.push(['trackEvent', 'north_star_activation_funnel', 'open_dashboard_trajectory', 'step_3_north_star_activation_funnel'])
+    trackEvent('north_star_activation_funnel', 'open_dashboard_trajectory', 'step_3_north_star_activation_funnel')
 }
 
 document.getElementById("btn-change-objective").onclick = function() {
-    _paq.push(['trackEvent', 'north_star_activation_funnel', 'click_button_set_target_2031', 'set_target_2031_button_clicked'])
+    trackEvent('north_star_activation_funnel', 'click_button_set_target_2031', 'set_target_2031_button_clicked')
 }
 </script>
 {% endblock tagging %}

project/templates/project/components/forms/report_download.html

@@ -9,15 +9,15 @@ <h3 class="fr-alert__title">Votre demande a été prise en compte.</h3>
 
     {% if requested_document == 'rapport-complet' %}
         <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
-            _paq.push(['trackEvent', 'diagnostic_download_funnel', 'succes_form_diagnostic_download_word', 'diagnostic_download_word_form_success'])
+            trackEvent('diagnostic_download_funnel', 'succes_form_diagnostic_download_word', 'diagnostic_download_word_form_success')
         </script>
     {% elif requested_document == 'rapport-conso' %}
         <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
-            _paq.push(['trackEvent', 'conso_report_download_funnel', 'success_form_conso_report_download', 'conso_report_download_form_success'])
+            trackEvent('conso_report_download_funnel', 'success_form_conso_report_download', 'conso_report_download_form_success')
         </script>
     {% elif requested_document == 'rapport-local' %}
         <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
-            _paq.push(['trackEvent', 'local_report_download_funnel', 'success_form_local_report_download', 'local_report_download_form_success'])
+            trackEvent('local_report_download_funnel', 'success_form_local_report_download', 'local_report_download_form_success')
         </script>
     {% endif %}
 {% else %}

project/templates/project/components/forms/report_set_target_2031.html

@@ -6,7 +6,7 @@ <h3 class="fr-alert__title">Votre objectif de réduction à 2031 a été mis à
     </div>
 
     <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
-        _paq.push(['trackEvent', 'north_star_activation_funnel', 'success_form_set_target_2031', 'set_target_2031_form_success'])
+        trackEvent('north_star_activation_funnel', 'success_form_set_target_2031', 'set_target_2031_form_success')
     </script>
 {% else %}
     <form hx-post="{% url 'project:set-target-2031' diagnostic.pk %}" hx-ext="disable-element" hx-disable-element="#set_target_2031_btn">
@@ -21,7 +21,7 @@ <h3 class="fr-alert__title">Votre objectif de réduction à 2031 a été mis à
 
     <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
         document.getElementById("set_target_2031_btn").onclick = function() {
-            _paq.push(['trackEvent', 'north_star_activation_funnel', 'submit_form_set_target_2031', 'set_target_2031_form_submitted'])
+            trackEvent('north_star_activation_funnel', 'submit_form_set_target_2031', 'set_target_2031_form_submitted')
         }
     </script>
 {% endif %}

project/templates/project/components/forms/search.html

@@ -238,10 +238,10 @@
         if (!!e.target.id && e.target.id.startsWith('territory-')) {
             const { pathname } = window.location
             if (pathname === "/") {
-                _paq.push(['trackEvent', 'north_star_activation_funnel', 'search_territory', 'step_1_north_star_activation_funnel'])
+                trackEvent('north_star_activation_funnel', 'search_territory', 'step_1_north_star_activation_funnel')
             }
             else if (pathname === "/rapport-local") {
-                _paq.push(['trackEvent', 'local_report_download_funnel', 'search_territory', 'local_report_home_search_territory_selected'])
+                trackEvent('local_report_download_funnel', 'search_territory', 'local_report_home_search_territory_selected')
             }
 
             if (e.target.classList.contains('disabled')) {

project/templates/project/layout/base.html

@@ -27,11 +27,11 @@
         {% sri_static "project/styles/dashboard.css" %}
         <!-- subtemplate header injection -->
         {% block headers %}{% endblock %}
-        <!-- matomo -->
+        <!-- Matomo -->
         {% tracking_code %}
-        <!-- google adwords -->
+        <!-- Google Adwords -->
         {% adwords_google_tag_code %}
-        <!-- crisp -->
+        <!-- Crisp -->
         {% crisp_tag_code %}
     </head>
 
@@ -140,7 +140,7 @@
                         ]  
                     },
                     {
-                        "label": "Paramètres",
+                        "label": "Paramètres du diagnostic",
                         "icon": "bi bi-gear-fill",
                         "url": "{% url 'project:update' project.pk %}"
                     }

project/templates/project/pages/artificialisation.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Artificialisation | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/consommation.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Consommation d'espaces NAF | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/gpu.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Artificialisation des zonages d'urbanisme | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/impermeabilisation.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Imperméabilisation | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/ocsge.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Usage et couverture du sol (OCS GE) | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/rapport_local.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Rapport triennal local | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/synthese.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Synthèse | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/trajectoires.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Trajectoire ZAN | Mon Diagnostic Artificialisation{% endblock pagetitle %}

project/templates/project/pages/update.html

@@ -1,3 +1,3 @@
 {% extends "project/layout/base.html" %}
 
-{% block pagetitle %}{{ project.name }} | Mon Diagnostic Artificialisation{% endblock pagetitle %}
+{% block pagetitle %}Paramètres du diagnostic | Mon Diagnostic Artificialisation{% endblock pagetitle %}

templates/index.html

@@ -27,11 +27,11 @@
         {% sri_static "assets/styles/main.css" %}
         <!-- subtemplate header injection -->
         {% block headers %}{% endblock %}
-        <!-- matomo -->
+        <!-- Matomo -->
         {% tracking_code %}
-        <!-- google adwords -->
+        <!-- Google Adwords -->
         {% adwords_google_tag_code %}
-        <!-- crisp -->
+        <!-- Crisp -->
         {% crisp_tag_code %}
     </head>
     <body class="{% block body_class %}{% endblock %}">

utils/templates/utils/google_tag_adwords.html

@@ -1,4 +1,3 @@
-<!-- Google tag (gtag.js) -->
 {% if GOOGLE_ADWORDS_ACTIVATE %}
 <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11157347812" nonce="[NONCE_PLACEHOLDER]">
 </script>