Merge pull request #733 from MTES-MCT/fix/matomo-tracking

Corriger les tracking matomo hs
MTES-MCT · Nov 21, 2024 · c00b6a9 · c00b6a9
2 parents 976ee4d + 986df7f
commit c00b6a9
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 16 deletions.
diff --git a/assets/scripts/components/layout/Navbar.tsx b/assets/scripts/components/layout/Navbar.tsx
@@ -249,7 +249,15 @@ const Navbar: React.FC = ({ projectData }: { projectData: any}) => {
                                     'data-fr-opened': 'false',
                                     'aria-controls': 'fr-modal-download-word',
                                 }}
-                                onClick={resetModalContent}
+                                onClick={() => {
+                                    resetModalContent();
+                                    if (window.trackEvent)
+                                        window.trackEvent(
+                                            'diagnostic_download_funnel',
+                                            'click_button_conso_report_download',
+                                            'conso_report_download_button_clicked'
+                                        );
+                                }}
                             />
                         </DownloadListItem>
                         <DownloadListItem>
@@ -263,7 +271,15 @@ const Navbar: React.FC = ({ projectData }: { projectData: any}) => {
                                     'data-fr-opened': 'false',
                                     'aria-controls': 'fr-modal-download-word',
                                 }}
-                                onClick={resetModalContent}
+                                onClick={() => {
+                                    resetModalContent();
+                                    if (window.trackEvent)
+                                        window.trackEvent(
+                                            'diagnostic_download_funnel',
+                                            'click_button_diagnostic_download_word',
+                                            'diagnostic_download_word_button_clicked'
+                                        );
+                                }}
                             />
                         </DownloadListItem>
                         <DownloadListItem>
@@ -277,7 +293,15 @@ const Navbar: React.FC = ({ projectData }: { projectData: any}) => {
                                     'data-fr-opened': 'false',
                                     'aria-controls': 'fr-modal-download-word',
                                 }}
-                                onClick={resetModalContent}
+                                onClick={() => {
+                                    resetModalContent();
+                                    if (window.trackEvent)
+                                        window.trackEvent(
+                                            'diagnostic_download_funnel',
+                                            'click_button_local_report_download',
+                                            'local_report_download_button_clicked'
+                                        );
+                                }}
                             />
                         </DownloadListItem>
                         <DownloadListItem>
@@ -286,6 +310,14 @@ const Navbar: React.FC = ({ projectData }: { projectData: any}) => {
                                 icon="bi bi-file-earmark-excel"
                                 label="Export Excel"
                                 url={urls.dowloadCsvReport}
+                                onClick={() => {
+                                    if (window.trackEvent)
+                                        window.trackEvent(
+                                            'diagnostic_download_funnel',
+                                            'click_button_diagnostic_download_excel',
+                                            'diagnostic_download_excel_success'
+                                        );
+                                }}
                             />
                         </DownloadListItem>
                     </DownloadList>

diff --git a/assets/scripts/components/pages/RapportLocal.tsx b/assets/scripts/components/pages/RapportLocal.tsx
@@ -52,7 +52,15 @@ const RapportLocal: React.FC<{ endpoint: string }> = ({ endpoint }) => {
                                         'data-fr-opened': 'false',
                                         'aria-controls': 'fr-modal-download-word',
                                     }}
-                                    onClick={resetModalContent}
+                                    onClick={() => {
+                                        resetModalContent();
+                                        if (window.trackEvent)
+                                            window.trackEvent(
+                                                'diagnostic_download_funnel',
+                                                'click_button_local_report_download',
+                                                'local_report_download_button_clicked'
+                                            );
+                                    }}
                                 />
                             </div>
                         </CallToAction>

diff --git a/assets/scripts/components/widgets/SearchBar.tsx b/assets/scripts/components/widgets/SearchBar.tsx
@@ -7,6 +7,7 @@ import Loader from '@components/ui/Loader';
 
 interface SearchBarProps {
     createUrl: string;
+    origin?: string;
 }
 
 export interface Territory {
@@ -114,20 +115,14 @@ const Badge = styled.p`
     text-transform: none;
 `;
 
-
 const NoResultsMessage = styled.div`
     padding: 0.5rem;
     font-size: 0.9em;
     color: ${secondaryColor};
     text-align: center;
 `;
 
-const HighlightedText = styled.span`
-    font-weight: bold;
-    color: ${activeColor};
-`;
-
-const SearchBar: React.FC<SearchBarProps> = ({ createUrl }) => {
+const SearchBar: React.FC<SearchBarProps> = ({ createUrl, origin }) => {
     const [query, setQuery] = useState<string>('');
     const [isFocused, setIsFocused] = useState<boolean>(false);
     const [data, setData] = useState<Territory[] | undefined>(undefined);
@@ -165,6 +160,20 @@ const SearchBar: React.FC<SearchBarProps> = ({ createUrl }) => {
         if (isSubmitting || disabled) return;
 
         setIsSubmitting(true);
+
+        if (origin === "home" && window.trackEvent) {
+            window.trackEvent(
+                'north_star_activation_funnel',
+                'search_territory',
+                'step_1_north_star_activation_funnel'
+            );
+        } else if (origin === "rapport-local" && window.trackEvent) {
+            window.trackEvent(
+                'local_report_download_funnel',
+                'search_territory',
+                'local_report_home_search_territory_selected'
+            );
+        }
 
         const form = document.createElement('form');
         form.action = createUrl;

diff --git a/assets/scripts/react-roots.tsx b/assets/scripts/react-roots.tsx
@@ -11,9 +11,10 @@ const searchBar = document.getElementById('react-search-bar')
 if (searchBar)
 {
   const createUrl = searchBar.dataset.createUrl;
+  const origin = searchBar.dataset.origin;
   createRoot(searchBar).render(
     <Provider store={store}>
-      <SearchBar createUrl={createUrl}/>
+      <SearchBar createUrl={createUrl} origin={origin} />
     </Provider>,
   )
 }

diff --git a/assets/types/global.d.ts b/assets/types/global.d.ts
@@ -1,4 +1,5 @@
 interface Window {
     htmx?: any;
     bootstrap?: any;
+    trackEvent: (category: string, action: string, name: string) => void;
 }
diff --git a/home/templates/home/home.html b/home/templates/home/home.html
@@ -35,7 +35,7 @@ <h1 class="fr-mb-0">Mon Diagnostic Artificialisation vous aide à analyser et ma
             </div>
           </div>
         </div>
-        <div id="react-search-bar" data-create-url="{% url 'project:create' %}"></div>
+        <div id="react-search-bar" data-create-url="{% url 'project:create' %}" data-origin="home"></div>
       </div>
     </div>
   </div>

diff --git a/home/templates/home/home_rapport_local.html b/home/templates/home/home_rapport_local.html
@@ -34,7 +34,7 @@ <h1 class="fr-mb-0">Préparer le rapport triennal local de suivi de l’artifici
             </div>
           </div>
         </div>
-        <div id="react-search-bar" data-create-url="{% url 'project:create' %}"></div>
+        <div id="react-search-bar" data-create-url="{% url 'project:create' %}" data-origin="rapport-local"></div>
       </div>
     </div>
   </div>

diff --git a/project/templates/project/components/dashboard/rapport_local.html b/project/templates/project/components/dashboard/rapport_local.html
@@ -181,3 +181,9 @@ <h4>Quelles sont les sources d’informations disponibles pour ce rapport ?</h4>
         <p class="fr-text--sm mb-0">Ces données locales doivent être conformes aux définitions légales de la consommation d'espaces (et le cas échéant de l'artificialisation nette des sols), homogènes et cohérentes sur la décennie de référence de la loi (1er janvier 2011-1er janvier 2021) et sur la décennie en cours (1er janvier 2021-1er janvier 2031).</p>
     </div>
 </div>
+
+<script language="javascript" nonce="[NONCE_PLACEHOLDER]">
+window.onload = function(event) {
+    trackEvent('local_report_download_funnel', 'open_dashboard_local_report', 'local_report_dashboard_opened')
+}
+</script>
diff --git a/project/templates/project/components/dashboard/synthese.html b/project/templates/project/components/dashboard/synthese.html
@@ -198,3 +198,9 @@ <h6 class="fr-mt-2w">Calcul</h6>
 {% endif %}
 {% endif %}
 </div>
+
+<script language="javascript" nonce="[NONCE_PLACEHOLDER]">
+window.onload = function(event) {
+  trackEvent('north_star_activation_funnel', 'open_dashboard_synthesis', 'step_2_north_star_activation_funnel')
+}
+</script>
diff --git a/project/templates/project/components/dashboard/trajectoires.html b/project/templates/project/components/dashboard/trajectoires.html
@@ -49,7 +49,6 @@ <h1 class="fr-modal__title" id="setTargetLabel">
     </div>
 </div>
 
-{% block tagging %}
 <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
 window.onload = function(event) {
     trackEvent('north_star_activation_funnel', 'open_dashboard_trajectory', 'step_3_north_star_activation_funnel')
@@ -59,4 +58,3 @@ <h1 class="fr-modal__title" id="setTargetLabel">
     trackEvent('north_star_activation_funnel', 'click_button_set_target_2031', 'set_target_2031_button_clicked')
 }
 </script>
-{% endblock tagging %}
diff --git a/project/templates/project/components/forms/report_set_period.html b/project/templates/project/components/forms/report_set_period.html
@@ -7,6 +7,8 @@ <h3 class="fr-alert__title">La période de votre diagnostic a été mise à jour
     </div>
 
     <script language="javascript" nonce="[NONCE_PLACEHOLDER]">
+        trackEvent('north_star_activation_funnel', 'success_form_set_target_2031', 'set_target_2031_form_success')
+
         setTimeout(() => {
             window.location.replace('{{next}}');
         }, 2000);