[FEAT]: Rework LedgerSync Analytics

.changeset/eighty-bikes-press.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Rework LedgerSync Analytics

apps/ledger-live-mobile/src/analytics/segment.ts

@@ -97,6 +97,16 @@ runOnceWhen(() => !!analyticsFeatureFlagMethod && !!segmentClient, getFeatureFla
 
 export const updateSessionId = () => (sessionId = uuid());
 
+const getLedgerSyncAttributes = (state: State) => {
+  if (!analyticsFeatureFlagMethod) return false;
+  const ledgerSync = analyticsFeatureFlagMethod("llmWalletSync");
+
+  return {
+    hasLedgerSync: !!ledgerSync?.enabled,
+    ledgerSyncActivated: !!state.trustchain.trustchain?.rootId,
+  };
+};
+
 const getMandatoryProperties = async (store: AppStore) => {
   const state: State = store.getState();
   const { user } = await getOrCreateUser();
@@ -175,6 +185,8 @@ const extraProperties = async (store: AppStore) => {
   const stakingProvidersCount =
     stakingProviders?.enabled && stakingProviders?.params?.listProvider.length;
 
+  const ledgerSyncAtributes = getLedgerSyncAttributes(state);
+
   return {
     ...mandatoryProperties,
     appVersion,
@@ -209,6 +221,7 @@ const extraProperties = async (store: AppStore) => {
     staxLockscreen: customImageType || "none",
     nps,
     stakingProvidersEnabled: stakingProvidersCount || "flag not loaded",
+    ...ledgerSyncAtributes,
   };
 };
 

apps/ledger-live-mobile/src/newArch/features/Accounts/screens/AddAccount/components/SelectAddAccountMethod/useSelectAddAccountMethodViewModel.ts

@@ -37,7 +37,7 @@ const useSelectAddAccountMethodViewModel = ({ currency, onClose }: AddAccountScr
   }, []);
 
   const onClickImport = useCallback(() => {
-    trackButtonClick("Import from Desktop");
+    trackButtonClick("Import via another Ledger Live app");
     onClose?.();
     navigation.navigate(NavigatorName.ImportAccounts);
   }, [navigation, trackButtonClick, onClose]);

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Error/Simple.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Flex, Icons, Text } from "@ledgerhq/native-ui";
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
+import { TrackScreen } from "~/analytics";
 type Props = {
   title: string;
   desc?: string;
@@ -9,12 +10,14 @@ type Props = {
     onPress: () => void;
     outline: boolean;
   };
+  analyticsPage: string;
 };
 
-export function ErrorComponent({ title, desc, mainButton }: Props) {
+export function ErrorComponent({ title, desc, mainButton, analyticsPage }: Props) {
   const { colors } = useTheme();
   return (
     <Flex flexDirection="column" pb={7}>
+      <TrackScreen name={analyticsPage} />
       <Flex flexDirection="column" alignItems="center" justifyContent="center">
         <Container borderRadius={50}>
           <Icons.DeleteCircleFill size={"L"} color={colors.error.c60} />

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/ManageInstances/ListInstances.tsx

@@ -6,6 +6,8 @@ import { useTranslation } from "react-i18next";
 import { TrustchainMember } from "@ledgerhq/trustchain/types";
 import { TinyCard } from "../TinyCard";
 import { Scene } from "../../screens/ManageInstances/useManageInstanceDrawer";
+import { TrackScreen } from "~/analytics";
+import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 
 type Props = {
   onClickInstance: (member: TrustchainMember) => void;
@@ -41,6 +43,7 @@ export function ListInstances({ onClickInstance, changeScene, members, currentIn
 
   return (
     <Flex pb={4}>
+      <TrackScreen name={AnalyticsPage.ManageSyncInstances} />
       <Text variant="h5" fontWeight="semiBold" color="neutral.c100" mb={4}>
         {t("walletSync.walletSyncActivated.manageInstances.title")}
       </Text>

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/ManageKey/ManageKey.tsx

@@ -4,6 +4,8 @@ import { Flex, Icons, rgba, Text } from "@ledgerhq/native-ui";
 import { TouchableOpacity } from "react-native";
 import styled, { useTheme } from "styled-components/native";
 import { useTranslation } from "react-i18next";
+import { TrackScreen } from "~/analytics";
+import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 
 type Props = {
   onClickDelete: () => void;
@@ -14,6 +16,7 @@ export function ManageKey({ onClickDelete }: Props) {
   const { colors } = useTheme();
   return (
     <Flex pb={4}>
+      <TrackScreen name={AnalyticsPage.ManageBackup} />
       <Text variant="h5" fontWeight="semiBold" color="neutral.c100" mb={4}>
         {t("walletSync.walletSyncActivated.manageKey.drawer.step1.title")}
       </Text>

apps/ledger-live-mobile/src/newArch/features/WalletSync/components/Success/index.tsx

@@ -1,6 +1,7 @@
 import { Box, Button, Flex, Icons, Text } from "@ledgerhq/native-ui";
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
+import { TrackScreen } from "~/analytics";
 import SafeAreaView from "~/components/SafeAreaView";
 type Props = {
   title: string;
@@ -14,12 +15,14 @@ type Props = {
     label: string;
     onPress: () => void;
   };
+  analyticsPage: string;
 };
 
-export function Success({ title, desc, mainButton, secondaryButton }: Props) {
+export function Success({ title, desc, mainButton, secondaryButton, analyticsPage }: Props) {
   const { colors } = useTheme();
   return (
     <SafeAreaView edges={["top", "left", "right", "bottom"]} isFlex>
+      <TrackScreen name={analyticsPage} />
       <Flex flexDirection="column" alignItems="center" justifyContent="space-between" flex={1}>
         <Flex flexDirection="column" alignItems="center" justifyContent="center" rowGap={16}>
           <Container borderRadius={50}>

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useLedgerSyncAnalytics.ts

@@ -4,6 +4,7 @@ export enum AnalyticsPage {
   ActivateLedgerSync = "Activate Ledger Sync",
   ChooseSyncMethod = "Choose sync method",
   BackupCreationSuccess = "Backup creation success",
+  SyncSuccess = "Sync success",
   ScanQRCode = "Scan QR code",
   ShowQRCode = "Show QR code",
   SyncWithQrCode = "Sync with QR code",
@@ -14,14 +15,15 @@ export enum AnalyticsPage {
   LedgerSyncSettings = "Ledger Sync Settings",
   ManageSyncInstances = "Manage synchronized instances",
   RemoveInstanceWrongDevice = "Remove instance wrong device connected",
-  ManageBackup = "Manage backup",
+  RemoveInstanceSuccess = "Instance removal success",
+  ManageBackup = "Manage key",
   ConfirmDeleteBackup = "Confirm delete backup",
+  DeleteBackupSuccess = "Delete key success",
   SyncWithNoKey = "Sync with no key",
   LedgerSyncActivated = "Ledger Sync activated",
-  AutoRemove = "Remove current instance",
-  Unbacked = "Unbacked",
-  OtherSeed = "Other seed",
-  SameSeed = "Same seed",
+  AutoRemove = "Can’t remove current instance",
+  OtherSeed = "You can’t use this Ledger to Sync",
+  SameSeed = "App already secured with this Ledger",
   ScanAttemptWithSameBackup = "Scan attempt with same backup",
   ScanAttemptWithDifferentBackups = "Scan attempt with different backups",
 }
@@ -32,7 +34,7 @@ export enum AnalyticsFlow {
 
 export enum AnalyticsButton {
   SyncYourAccounts = "Sync your accounts",
-  AlreadyCreatedKey = "Already created key",
+  AlreadyCreatedKey = "Already synced a Ledger Live app",
   Close = "Close",
   UseYourLedger = "Use your Ledger",
   ScanQRCode = "Scan a QR code",
@@ -41,15 +43,15 @@ export enum AnalyticsButton {
   TryAgain = "Try again",
   Synchronize = "Synchronize",
   ManageKey = "Manage key",
-  ManageSynchronizations = "Manage Synchronizations",
+  ManageInstances = "Manage instances",
   RemoveInstance = "Remove instance",
   ConnectAnotherLedger = "Connect another Ledger",
   DeleteKey = "Delete key",
   Delete = "Delete",
   Cancel = "Cancel",
   CreateYourKey = "Create your key",
   LedgerSync = "Ledger Sync",
-  UseAnother = "Connect new ledger",
+  UseAnother = "Connect another ledger",
   Understand = "I understand",
 }
 

apps/ledger-live-mobile/src/newArch/features/WalletSync/hooks/useSpecificError.tsx

@@ -153,7 +153,6 @@ export function useSpecificError({ primaryAction, secondaryAction }: SpecificPro
       cta: t("walletSync.synchronize.qrCode.backedWithDifferentSeeds.cta"),
       analyticsPage: AnalyticsPage.ScanAttemptWithDifferentBackups,
       buttonType: "main" as ButtonProps["type"],
-
       primaryAction: () => {
         primaryAction();
         onGoToDelete(AnalyticsPage.ScanAttemptWithDifferentBackups);
@@ -164,12 +163,11 @@ export function useSpecificError({ primaryAction, secondaryAction }: SpecificPro
       title: t("walletSync.synchronize.qrCode.unbacked.title"),
       description: t("walletSync.synchronize.qrCode.unbacked.description"),
       cta: t("walletSync.synchronize.qrCode.unbacked.cta"),
-      analyticsPage: AnalyticsPage.Unbacked,
+      analyticsPage: AnalyticsPage.SyncWithNoKey,
       buttonType: "main" as ButtonProps["type"],
-
       primaryAction: () => {
         primaryAction();
-        onCreate(AnalyticsPage.Unbacked);
+        onCreate(AnalyticsPage.SyncWithNoKey);
       },
     },
   };

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Activation/ActivationSuccess.tsx

@@ -15,6 +15,8 @@ import { isFromLedgerSyncOnboardingSelector } from "~/reducers/settings";
 import { useNavigation } from "@react-navigation/native";
 import { BaseNavigatorStackParamList } from "~/components/RootNavigator/types/BaseNavigator";
 import { setFromLedgerSyncOnboarding } from "~/actions/settings";
+import { AnalyticsButton, AnalyticsFlow, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
+import { track } from "~/analytics";
 
 type Props = BaseComposite<
   StackNavigatorProps<WalletSyncNavigatorStackParamList, ScreenName.WalletSyncSuccess>
@@ -26,16 +28,27 @@ export function ActivationSuccess({ navigation, route }: Props) {
   const { created } = route.params;
   const title = created ? "walletSync.success.activation" : "walletSync.success.sync";
   const desc = created ? "walletSync.success.activationDesc" : "walletSync.success.syncDesc";
+  const page = created ? AnalyticsPage.BackupCreationSuccess : AnalyticsPage.SyncSuccess;
   const dispatch = useDispatch();
 
   const navigationOnbarding =
     useNavigation<RootNavigationComposite<StackNavigatorNavigation<BaseNavigatorStackParamList>>>();
 
   function syncAnother(): void {
+    track("button_clicked", {
+      button: AnalyticsButton.SyncWithAnotherLedgerLive,
+      page,
+      flow: AnalyticsFlow.LedgerSync,
+    });
     navigation.navigate(ScreenName.WalletSyncActivationProcess);
   }
 
   function close(): void {
+    track("button_clicked", {
+      button: AnalyticsButton.Close,
+      page,
+      flow: AnalyticsFlow.LedgerSync,
+    });
     if (isFromLedgerSyncOnboarding) {
       dispatch(setFromLedgerSyncOnboarding(false));
       navigationOnbarding.navigate(NavigatorName.Base, {
@@ -60,6 +73,7 @@ export function ActivationSuccess({ navigation, route }: Props) {
         label: t("walletSync.success.close"),
         onPress: close,
       }}
+      analyticsPage={page}
     />
   );
 }

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/Manage/index.tsx

@@ -37,21 +37,21 @@ const WalletSyncManage = () => {
 
   const goToSync = () => {
     setIsSyncDrawerOpen(true);
-    onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.LedgerSyncActivated });
+    onClickTrack({ button: AnalyticsButton.Synchronize, page: AnalyticsPage.LedgerSyncSettings });
   };
 
   const closeSyncDrawer = () => setIsSyncDrawerOpen(false);
 
   const goToManageBackup = () => {
     manageKeyHook.openDrawer();
-    onClickTrack({ button: AnalyticsButton.ManageKey, page: AnalyticsPage.LedgerSyncActivated });
+    onClickTrack({ button: AnalyticsButton.ManageKey, page: AnalyticsPage.LedgerSyncSettings });
   };
 
   const goToManageInstances = () => {
     manageInstancesHook.openDrawer();
     onClickTrack({
-      button: AnalyticsButton.ManageSynchronizations,
-      page: AnalyticsPage.LedgerSyncActivated,
+      button: AnalyticsButton.ManageInstances,
+      page: AnalyticsPage.LedgerSyncSettings,
     });
   };
 

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageInstances/DeletionSuccess.tsx

@@ -5,6 +5,8 @@ import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/t
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
 
 import { NavigatorName, ScreenName } from "~/const";
+import { AnalyticsButton, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
+import { track } from "~/analytics";
 
 type Props = BaseComposite<
   StackNavigatorProps<
@@ -17,6 +19,10 @@ export function WalletSyncManageInstanceDeletionSuccess({ navigation, route }: P
   const { t } = useTranslation();
   const member = route.params?.member.name;
   function close(): void {
+    track("button_clicked", {
+      button: AnalyticsButton.Close,
+      page: AnalyticsPage.RemoveInstanceSuccess,
+    });
     navigation.navigate(NavigatorName.Settings, {
       screen: ScreenName.GeneralSettings,
     });
@@ -31,6 +37,7 @@ export function WalletSyncManageInstanceDeletionSuccess({ navigation, route }: P
         label: t("walletSync.success.close"),
         onPress: close,
       }}
+      analyticsPage={AnalyticsPage.RemoveInstanceSuccess}
     />
   );
 }

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageInstances/ManageInstancesDrawer.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from "react";
 import QueuedDrawer from "LLM/components/QueuedDrawer";
-import { TrackScreen } from "~/analytics";
 
 import GenericErrorView from "~/components/GenericErrorView";
 import { Flex, InfiniteLoader } from "@ledgerhq/native-ui";
@@ -63,12 +62,9 @@ const ManageInstancesDrawer = ({
   };
 
   return (
-    <>
-      <TrackScreen />
-      <QueuedDrawer isRequestingToBeOpened={isDrawerVisible} onClose={handleClose}>
-        {getScene()}
-      </QueuedDrawer>
-    </>
+    <QueuedDrawer isRequestingToBeOpened={isDrawerVisible} onClose={handleClose}>
+      {getScene()}
+    </QueuedDrawer>
   );
 };
 

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageInstances/useManageInstanceDrawer.ts

@@ -9,6 +9,8 @@ import { useNavigation } from "@react-navigation/native";
 import { StackNavigatorNavigation } from "~/components/RootNavigator/types/helpers";
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
 import { ScreenName } from "~/const";
+import { track } from "~/analytics";
+import { AnalyticsButton, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 
 const messageLog = "Follow Steps on device";
 
@@ -49,9 +51,18 @@ export const useManageInstancesDrawer = (): HookResult => {
   const closeDrawer = useCallback(() => {
     setIsDrawerInstructionsVisible(false);
     logDrawer(messageLog, "close");
-  }, []);
+
+    track("button_clicked", {
+      button: AnalyticsButton.Close,
+      page: scene === Scene.List ? AnalyticsPage.ManageSyncInstances : AnalyticsPage.AutoRemove,
+    });
+  }, [scene]);
 
   const onClickInstance = (instance: TrustchainMember) => {
+    track("button_clicked", {
+      button: AnalyticsButton.RemoveInstance,
+      page: AnalyticsPage.ManageSyncInstances,
+    });
     navigation.navigate(ScreenName.WalletSyncManageInstancesProcess, {
       member: instance,
     });

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/ManageKey/DeletionSuccess.tsx

@@ -5,6 +5,7 @@ import { BaseComposite, StackNavigatorProps } from "~/components/RootNavigator/t
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
 
 import { NavigatorName, ScreenName } from "~/const";
+import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 
 type Props = BaseComposite<
   StackNavigatorProps<
@@ -29,6 +30,7 @@ export function WalletSyncManageKeyDeletionSuccess({ navigation }: Props) {
         label: t("walletSync.success.close"),
         onPress: close,
       }}
+      analyticsPage={AnalyticsPage.DeleteBackupSuccess}
     />
   );
 }