feat: 🎸 Ajoute des stats dans Matomo (#542)

* feat: 🎸 Ajoute des stats dans Matomo

✅ Closes: #517, #518, #523

* refactor: 💡 PR Ajoute des stats dans Matomo

front/App.tsx

@@ -7,16 +7,18 @@ import { MatomoProvider, useMatomo } from "matomo-tracker-react-native";
 import type { FC } from "react";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
+import type { AppStateStatus } from "react-native";
+import { AppState } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import IcomoonFont from "./assets/icomoon/icomoon.ttf";
 import { initLocales } from "./config/calendar-config";
-import { StorageKeysConstants } from "./constants";
+import { Labels, StorageKeysConstants } from "./constants";
 import useCachedResources from "./hooks/useCachedResources";
 import useColorScheme from "./hooks/useColorScheme";
 import Navigation from "./navigation";
 import { StorageUtils, TrackerUtils } from "./utils";
-import { initMonitoring, reportError } from "./utils/logging.util";
+import { initMonitoring } from "./utils/logging.util";
 import { registerForPushNotificationsAsync } from "./utils/notification.util";
 
 Notifications.setNotificationHandler({
@@ -41,6 +43,7 @@ initMonitoring();
 const customFonts = { IcoMoon: IcomoonFont };
 
 const App: FC = () => {
+  const { trackScreenView } = useMatomo();
   const isLoadingComplete = useCachedResources();
   const colorScheme = useColorScheme();
 
@@ -52,6 +55,33 @@ const App: FC = () => {
   const notificationListener = useRef<Subscription>();
   const responseListener = useRef<Subscription>();
 
+  const updateAppActiveCounter = async () => {
+    const appActiveCounterStr = await StorageUtils.getStringValue(
+      StorageKeysConstants.appActiveCounter
+    );
+    const appActiveCounter = appActiveCounterStr
+      ? Number(appActiveCounterStr)
+      : 0;
+    const newAppActiveCounter = appActiveCounter + 1;
+    void StorageUtils.storeStringValue(
+      StorageKeysConstants.appActiveCounter,
+      newAppActiveCounter.toString()
+    );
+    trackScreenView(
+      `${TrackerUtils.TrackingEvent.APP_ACTIVE} - ${newAppActiveCounter}`
+    );
+  };
+
+  const appState = useRef(AppState.currentState);
+  const handleAppStateChange = (nextAppState: AppStateStatus) => {
+    if (
+      /inactive|background/.exec(appState.current) &&
+      nextAppState === "active"
+    ) {
+      void updateAppActiveCounter();
+    }
+  };
+
   useEffect(() => {
     trackAppStart();
     Font.loadAsync(customFonts)
@@ -59,9 +89,12 @@ const App: FC = () => {
         setFontsLoaded(true);
       })
       .catch((error) => {
-        reportError(error);
+        console.log(error);
       });
 
+    // Permet de détecter lorsque l'app change d'état ('active' | 'background' | 'inactive' | 'unknown' | 'extension')
+    AppState.addEventListener("change", handleAppStateChange);
+
     // Notifications
     void registerForPushNotificationsAsync();
     // Se déclenche lorsque l'on reçoit une notification et que l'app est ouverte
@@ -72,10 +105,17 @@ const App: FC = () => {
     // Se déclenche lorsque l'on clique sur la notification native
     responseListener.current =
       Notifications.addNotificationResponseReceivedListener((response) => {
+        const notificationType =
+          response.notification.request.content.data.type ?? "";
+        trackScreenView(
+          `${TrackerUtils.TrackingEvent.NOTIFICATION} (${notificationType}) - ${Labels.notification.openTheApp}`
+        );
         setNotification(response.notification);
       });
 
     return () => {
+      AppState.removeEventListener("change", handleAppStateChange);
+
       if (notificationListener.current)
         Notifications.removeNotificationSubscription(
           notificationListener.current

front/components/base/notification.component.tsx

 import type { NavigationContainerRef } from "@react-navigation/native";
 import type { Notification as ExpoNotificaiton } from "expo-notifications";
+import { useMatomo } from "matomo-tracker-react-native";
 import * as React from "react";
 import { useEffect, useState } from "react";
 import { Modal, StyleSheet, TouchableOpacity } from "react-native";
@@ -7,6 +8,7 @@ import { Modal, StyleSheet, TouchableOpacity } from "react-native";
 import { Colors, FontWeight, Paddings, Sizes } from "../../constants";
 import type { NotificationStyle } from "../../types";
 import { NotificationType } from "../../utils/notification.util";
+import { TrackingEvent } from "../../utils/tracker.util";
 import { SecondaryText } from "../StyledText";
 import { View } from "../Themed";
 import Button from "./button.component";
@@ -37,12 +39,17 @@ const Notification: React.FC<Props> = ({
   notification,
   onDismiss,
 }) => {
+  const { trackScreenView } = useMatomo();
   const notificationType = notification.request.content.data
     .type as NotificationType;
 
   const [modalVisible, setModalVisible] = useState(true);
 
   const action = () => {
+    const buttonTitle = notification.request.content.data.redirectTitle ?? "";
+    trackScreenView(
+      `${TrackingEvent.NOTIFICATION} (${notificationType}) - ${buttonTitle}`
+    );
     const redirectTo = notification.request.content.data.redirectTo as string;
 
     if (redirectTo) {

front/constants/Labels.ts

@@ -364,6 +364,9 @@ export default {
     myProfil: "Mon profil",
     title: "Menu",
   },
+  notification: {
+    openTheApp: "Ouverture de l'app",
+  },
   onboarding: {
     slidesText: [
       {

front/constants/storageKeys.constants.ts

+export const appActiveCounter = "@appActiveCounter";
 export const isFirstLaunchKey = "@isFirstLaunch";
 export const currentStepId = "@currentStepId";
 export const userSituationsKey = "@userSituations";
@@ -14,6 +15,7 @@ export const notifIdsEvents = "@notifIdsEvents";
 export const eventsCalcFromBirthday = "@eventsCalcFromBirthday";
 
 export const allStorageKeys = [
+  appActiveCounter,
   isFirstLaunchKey,
   currentStepId,
   userSituationsKey,

front/screens/Profile.tsx

@@ -282,7 +282,12 @@ const Profile: FC<Props> = ({ navigation }) => {
                     color={Colors.primaryBlue}
                   />
                 }
-                action={navigateToRoot}
+                action={() => {
+                  trackScreenView(
+                    `${TrackerUtils.TrackingEvent.PROFILE} - ${Labels.buttons.pass}`
+                  );
+                  navigateToRoot();
+                }}
               />
             </View>
             <View style={[styles.buttonContainer]}>

front/utils/tracker.util.ts

@@ -8,6 +8,7 @@ export const matomoInstance = new MatomoTracker({
 });
 
 export enum TrackingEvent {
+  APP_ACTIVE = "Ouverture de l'app",
   ONBOARDING = "Onboarding",
   PROFILE = "Profil",
   HOME = "Accueil",
@@ -16,11 +17,5 @@ export enum TrackingEvent {
   CALENDAR = "Calendrier",
   CARTO = "Cartographie",
   EPDS = "EPDS",
+  NOTIFICATION = "Notification",
 }
-
-export const TrackingActions = {
-  UPDATE_PROFILE: {
-    action: "Mise à jour du profil",
-    name: "Situation",
-  },
-};