[IOCOM-1848] Analytics for Push Notifications Engagement

ts/features/landingScreenMultiBanner/components/LandingScreenBannerPicker.tsx

@@ -3,6 +3,7 @@ import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { landingScreenBannerToRenderSelector } from "../store/selectors";
 import { updateLandingScreenBannerVisibility } from "../store/actions";
 import { landingScreenBannerMap } from "../utils/landingScreenBannerMap";
+import { usePushNotificationsBannerTracking } from "../../pushNotifications/hooks/usePushNotificationsBannerTracking";
 
 export const LandingScreenBannerPicker = () => {
   const dispatch = useIODispatch();
@@ -19,6 +20,8 @@ export const LandingScreenBannerPicker = () => {
     }
   }, [bannerToRender, dispatch]);
 
+  usePushNotificationsBannerTracking();
+
   if (bannerToRender === undefined) {
     return null;
   }

ts/features/landingScreenMultiBanner/components/__tests__/LandingScreenBannerPicker.test.tsx

@@ -12,6 +12,7 @@ import { updateLandingScreenBannerVisibility } from "../../store/actions";
 import * as SELECTORS from "../../store/selectors";
 import { LandingScreenBannerId } from "../../utils/landingScreenBannerMap";
 import { LandingScreenBannerPicker } from "../LandingScreenBannerPicker";
+import * as hooks from "../../../pushNotifications/hooks/usePushNotificationsBannerTracking";
 
 jest.mock("../../utils/landingScreenBannerMap", () => ({
   get landingScreenBannerMap() {
@@ -89,6 +90,16 @@ describe("LandingBannerPicker", () => {
       updateLandingScreenBannerVisibility({ id: bannerId, enabled: false })
     );
   });
+  it("should include 'usePushNotificationsBannerTracking'", () => {
+    const spyUsePushNotificationsBannerTracking = jest.spyOn(
+      hooks,
+      "usePushNotificationsBannerTracking"
+    );
+
+    renderComponent();
+
+    expect(spyUsePushNotificationsBannerTracking.mock.calls.length).toBe(1);
+  });
 });
 
 const renderComponent = () => {

ts/features/pushNotifications/analytics/__tests__/index.test.ts

@@ -7,6 +7,14 @@ import {
   trackNotificationsOptInReminderOnPermissionsOff,
   trackNotificationsOptInReminderStatus,
   trackNotificationsOptInSkipSystemPermissions,
+  trackPushNotificationBannerDismissAlert,
+  trackPushNotificationBannerDismissOutcome,
+  trackPushNotificationBannerForceShow,
+  trackPushNotificationBannerStillHidden,
+  trackPushNotificationsBannerClosure,
+  trackPushNotificationsBannerTap,
+  trackPushNotificationsBannerVisualized,
+  trackPushNotificationSystemPopupShown,
   trackPushNotificationTokenUploadFailure,
   trackPushNotificationTokenUploadSucceeded,
   trackSystemNotificationPermissionScreenOutcome,
@@ -15,6 +23,8 @@ import {
 import { PushNotificationsContentTypeEnum } from "../../../../../definitions/backend/PushNotificationsContentType";
 import { ReminderStatusEnum } from "../../../../../definitions/backend/ReminderStatus";
 import * as Mixpanel from "../../../../mixpanel";
+import ROUTES from "../../../../navigation/routes";
+import { MESSAGES_ROUTES } from "../../../messages/navigation/routes";
 
 describe("pushNotifications analytics", () => {
   beforeEach(() => {
@@ -236,6 +246,134 @@ describe("pushNotifications analytics", () => {
       new_notification_status: notificationPermissionsEnabled
     });
   });
+  [MESSAGES_ROUTES.MESSAGES_HOME, ROUTES.SETTINGS_MAIN].forEach(route => {
+    it(`'trackPushNotificationsBannerVisualized' should have expected event name and properties for '${route}'`, () => {
+      const mockMixpanelTrack = getMockMixpanelTrack();
+
+      void trackPushNotificationsBannerVisualized(route);
+
+      expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+      expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+      expect(mockMixpanelTrack.mock.calls[0][0]).toBe("BANNER");
+      expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+        event_category: "UX",
+        event_type: "screen_view",
+        banner_id: "push_notif_activation",
+        banner_page: route,
+        banner_landing: "os_notification_settings"
+      });
+    });
+    it(`'trackPushNotificationsBannerTap' should have expected event name and properties for '${route}'`, () => {
+      const mockMixpanelTrack = getMockMixpanelTrack();
+
+      void trackPushNotificationsBannerTap(route);
+
+      expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+      expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+      expect(mockMixpanelTrack.mock.calls[0][0]).toBe("TAP_BANNER");
+      expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+        event_category: "UX",
+        event_type: "action",
+        banner_id: "push_notif_activation",
+        banner_page: route,
+        banner_landing: "os_notification_settings"
+      });
+    });
+    it(`'trackPushNotificationsBannerClosure' should have expected event name and properties for '${route}'`, () => {
+      const mockMixpanelTrack = getMockMixpanelTrack();
+
+      void trackPushNotificationsBannerClosure(route);
+
+      expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+      expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+      expect(mockMixpanelTrack.mock.calls[0][0]).toBe("CLOSE_BANNER");
+      expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+        event_category: "UX",
+        event_type: "action",
+        banner_id: "push_notif_activation",
+        banner_page: route,
+        banner_landing: "os_notification_settings"
+      });
+    });
+  });
+  it(`'trackPushNotificationSystemPopupShown' should have expected event name and properties`, () => {
+    const mockMixpanelTrack = getMockMixpanelTrack();
+
+    void trackPushNotificationSystemPopupShown();
+
+    expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+    expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+    expect(mockMixpanelTrack.mock.calls[0][0]).toBe("PUSH_NOTIF_SYSTEM_ALERT");
+    expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+      event_category: "UX",
+      event_type: "screen_view"
+    });
+  });
+  it(`'trackPushNotificationBannerDismissAlert' should have expected event name and properties`, () => {
+    const mockMixpanelTrack = getMockMixpanelTrack();
+
+    void trackPushNotificationBannerDismissAlert();
+
+    expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+    expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+    expect(mockMixpanelTrack.mock.calls[0][0]).toBe(
+      "PUSH_NOTIF_THIRD_DISMISS_ALERT"
+    );
+    expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+      event_category: "UX",
+      event_type: "screen_view"
+    });
+  });
+  ["deactivate" as const, "remind_later" as const].forEach(outcome =>
+    it(`'trackPushNotificationBannerDismissOutcome' should have expected event name and properties for '${outcome}'`, () => {
+      const mockMixpanelTrack = getMockMixpanelTrack();
+
+      void trackPushNotificationBannerDismissOutcome(outcome);
+
+      expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+      expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+      expect(mockMixpanelTrack.mock.calls[0][0]).toBe(
+        "PUSH_NOTIF_THIRD_DISMISS_ALERT_INTERACTION"
+      );
+      expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+        event_category: "UX",
+        event_type: "action",
+        outcome
+      });
+    })
+  );
+  it(`'trackPushNotificationBannerForceShow' should have expected event name and properties`, () => {
+    const mockMixpanelTrack = getMockMixpanelTrack();
+
+    void trackPushNotificationBannerForceShow();
+
+    expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+    expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+    expect(mockMixpanelTrack.mock.calls[0][0]).toBe(
+      "PUSH_NOTIF_BANNER_FORCE_SHOW"
+    );
+    expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+      event_category: "TECH",
+      event_type: undefined
+    });
+  });
+  it(`'trackPushNotificationBannerStillHidden' should have expected event name and properties`, () => {
+    const mockMixpanelTrack = getMockMixpanelTrack();
+    const unreadMessagesCount = 3;
+
+    void trackPushNotificationBannerStillHidden(unreadMessagesCount);
+
+    expect(mockMixpanelTrack.mock.calls.length).toBe(1);
+    expect(mockMixpanelTrack.mock.calls[0].length).toBe(2);
+    expect(mockMixpanelTrack.mock.calls[0][0]).toBe(
+      "PUSH_NOTIF_BANNER_STILL_HIDDEN"
+    );
+    expect(mockMixpanelTrack.mock.calls[0][1]).toEqual({
+      event_category: "TECH",
+      event_type: undefined,
+      unread_count: unreadMessagesCount
+    });
+  });
 });
 
 const getMockMixpanelTrack = () =>

ts/features/pushNotifications/analytics/index.ts

@@ -90,3 +90,69 @@ export const trackNotificationPermissionsStatus = (
   });
   void mixpanelTrack(eventName, props);
 };
+
+export const trackPushNotificationsBannerVisualized = (route: string) => {
+  const eventName = "BANNER";
+  const props = buildEventProperties("UX", "screen_view", {
+    banner_id: "push_notif_activation",
+    banner_page: route,
+    banner_landing: "os_notification_settings"
+  });
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationsBannerTap = (route: string) => {
+  const eventName = "TAP_BANNER";
+  const props = buildEventProperties("UX", "action", {
+    banner_id: "push_notif_activation",
+    banner_page: route,
+    banner_landing: "os_notification_settings"
+  });
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationsBannerClosure = (route: string) => {
+  const eventName = "CLOSE_BANNER";
+  const props = buildEventProperties("UX", "action", {
+    banner_id: "push_notif_activation",
+    banner_page: route,
+    banner_landing: "os_notification_settings"
+  });
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationSystemPopupShown = () => {
+  const eventName = "PUSH_NOTIF_SYSTEM_ALERT";
+  const props = buildEventProperties("UX", "screen_view");
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationBannerDismissAlert = () => {
+  const eventName = "PUSH_NOTIF_THIRD_DISMISS_ALERT";
+  const props = buildEventProperties("UX", "screen_view");
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationBannerDismissOutcome = (
+  outcome: "deactivate" | "remind_later"
+) => {
+  const eventName = "PUSH_NOTIF_THIRD_DISMISS_ALERT_INTERACTION";
+  const props = buildEventProperties("UX", "action", { outcome });
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationBannerForceShow = () => {
+  const eventName = "PUSH_NOTIF_BANNER_FORCE_SHOW";
+  const props = buildEventProperties("TECH", undefined);
+  void mixpanelTrack(eventName, props);
+};
+
+export const trackPushNotificationBannerStillHidden = (
+  unreadMessagesCount: number
+) => {
+  const eventName = "PUSH_NOTIF_BANNER_STILL_HIDDEN";
+  const props = buildEventProperties("TECH", undefined, {
+    unread_count: unreadMessagesCount
+  });
+  void mixpanelTrack(eventName, props);
+};

ts/features/pushNotifications/components/PushNotificationsBanner.tsx

@@ -6,6 +6,7 @@ import {
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
+import { useRoute } from "@react-navigation/native";
 import I18n from "../../../i18n";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { useIOBottomSheetModal } from "../../../utils/hooks/bottomSheet";
@@ -19,36 +20,56 @@ import {
   shouldResetNotificationBannerDismissStateSelector,
   timesPushNotificationBannerDismissedSelector
 } from "../store/selectors/notificationsBannerDismissed";
+import {
+  trackPushNotificationBannerDismissAlert,
+  trackPushNotificationBannerDismissOutcome,
+  trackPushNotificationBannerForceShow,
+  trackPushNotificationsBannerClosure,
+  trackPushNotificationsBannerTap,
+  trackPushNotificationsBannerVisualized
+} from "../analytics";
 type Props = {
   closeHandler: () => void;
 };
 
 export const PushNotificationsBanner = ({ closeHandler }: Props) => {
+  const route = useRoute();
   const dispatch = useIODispatch();
   const shouldResetDismissState = useIOSelector(
     shouldResetNotificationBannerDismissStateSelector
   );
 
   React.useEffect(() => {
     if (shouldResetDismissState) {
+      trackPushNotificationBannerForceShow();
       dispatch(resetNotificationBannerDismissState());
     }
   }, [dispatch, shouldResetDismissState]);
+  React.useEffect(() => {
+    trackPushNotificationsBannerVisualized(route.name);
+  }, [route.name]);
 
   const dismissionCount = useIOSelector(
     timesPushNotificationBannerDismissedSelector
   );
   const discardModal = usePushNotificationsBannerBottomSheet(closeHandler);
 
   const onClose = () => {
+    trackPushNotificationsBannerClosure(route.name);
     if (dismissionCount >= 2) {
+      trackPushNotificationBannerDismissAlert();
       discardModal.present();
     } else {
       dispatch(setUserDismissedNotificationsBanner());
       closeHandler();
     }
   };
 
+  const onPress = React.useCallback(() => {
+    trackPushNotificationsBannerTap(route.name);
+    openSystemNotificationSettingsScreen();
+  }, [route.name]);
+
   return (
     <View style={styles.margins} testID="pushnotif-bannerContainer">
       <Banner
@@ -61,7 +82,7 @@ export const PushNotificationsBanner = ({ closeHandler }: Props) => {
         size="big"
         onClose={onClose}
         labelClose={I18n.t("global.buttons.close")}
-        onPress={openSystemNotificationSettingsScreen}
+        onPress={onPress}
       />
       {discardModal.bottomSheet}
     </View>
@@ -73,8 +94,15 @@ const usePushNotificationsBannerBottomSheet = (
 ) => {
   const dispatch = useIODispatch();
 
-  const fullCloseHandler = () =>
+  const internalRemindLaterHandler = () => {
+    trackPushNotificationBannerDismissOutcome("remind_later");
+    remindLaterHandler();
+  };
+
+  const fullCloseHandler = () => {
+    trackPushNotificationBannerDismissOutcome("deactivate");
     dispatch(setPushNotificationBannerForceDismissed());
+  };
 
   return useIOBottomSheetModal({
     title: I18n.t(
@@ -88,7 +116,7 @@ const usePushNotificationsBannerBottomSheet = (
             label: I18n.t(
               "features.messages.pushNotifications.banner.bottomSheet.cta"
             ),
-            onPress: remindLaterHandler
+            onPress: internalRemindLaterHandler
           },
           secondary: {
             label: I18n.t(