feat: 🎸 Ajoutes les stats des filtres dans Matomo (#545)

✅ Closes: #519

front/screens/aroundMe/aroundMeFilter.component.tsx

+import { useMatomo } from "matomo-tracker-react-native";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import {
@@ -33,7 +34,7 @@ import type {
   PoiTypeFromDB,
   StepFromDB,
 } from "../../type";
-import { StorageUtils, StringUtils } from "../../utils";
+import { StorageUtils, StringUtils, TrackerUtils } from "../../utils";
 
 interface Props {
   visible: boolean;
@@ -41,6 +42,7 @@ interface Props {
 }
 
 const AroundMeFilter: React.FC<Props> = ({ visible, hideModal }) => {
+  const { trackScreenView } = useMatomo();
   const [filterDataFromDb, setFilterDataFromDb] = useState<unknown>();
 
   const [fetchedFiltersFromDB, setFetchedFiltersFromDB] =
@@ -54,14 +56,14 @@ const AroundMeFilter: React.FC<Props> = ({ visible, hideModal }) => {
 
   useEffect(() => {
     if (!filterDataFromDb) return;
-    const extractFilterDataAndCheckSavedFilters = async () => {
+    const extractFilterDataAndCheckSavedFilters = () => {
       const { cartographieTypes, etapes } = filterDataFromDb as {
         cartographieTypes: PoiTypeFromDB[];
         etapes: StepFromDB[];
       };
       extractFilterData(cartographieTypes, etapes);
     };
-    void extractFilterDataAndCheckSavedFilters();
+    extractFilterDataAndCheckSavedFilters();
   }, [filterDataFromDb]);
 
   useEffect(() => {
@@ -245,6 +247,16 @@ const AroundMeFilter: React.FC<Props> = ({ visible, hideModal }) => {
     ));
   };
 
+  const sendFiltersTracker = (filters: string[]) => {
+    if (!StringUtils.stringArrayIsNullOrEmpty(filters)) {
+      filters.forEach((filter) => {
+        trackScreenView(
+          `${TrackerUtils.TrackingEvent.FILTER_CARTO} - ${filter}`
+        );
+      });
+    }
+  };
+
   return (
     <>
       <FetchFilterData setFilterData={setFilterDataFromDb} />
@@ -307,6 +319,8 @@ const AroundMeFilter: React.FC<Props> = ({ visible, hideModal }) => {
                         StorageKeysConstants.cartoFilterKey,
                         cartoFilterStorage
                       );
+                      sendFiltersTracker(cartoFilterStorage.etapes);
+                      sendFiltersTracker(cartoFilterStorage.types);
                       setCartoFilterStorage({ etapes: [], types: [] });
                       hideModal(true);
                     }}

front/screens/listArticles.component.tsx

@@ -99,8 +99,17 @@ const ListArticles: FC<Props> = ({ navigation, route }) => {
     return isMatching;
   };
 
+  const sendFiltersTracker = (filters: ArticleFilter[]) => {
+    filters.forEach((filter) => {
+      trackScreenView(
+        `${TrackerUtils.TrackingEvent.FILTER_ARTICLES} - ${filter.thematique.nom}`
+      );
+    });
+  };
+
   const applyFilters = (filters: ArticleFilter[]) => {
     const activeFilters = _.filter(filters, { active: true });
+    sendFiltersTracker(activeFilters);
     const result = filteredArticles.map((article) => {
       if (activeFilters.length > 0)
         article.hide = !matchWithFilters(article, activeFilters);

front/utils/tracker.util.ts

@@ -18,4 +18,6 @@ export enum TrackingEvent {
   CARTO = "Cartographie",
   EPDS = "EPDS",
   NOTIFICATION = "Notification",
+  FILTER_CARTO = "Filtre (Carto)",
+  FILTER_ARTICLES = "Filtre (Articles)",
 }