LLD - Ledger Sync Analytics Improvements (#7737)

fix(lld): improved ledger sync analytics

.changeset/forty-geese-hug.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Ledger Sync - Fix Desktop Analytics

apps/ledger-live-desktop/src/newArch/features/WalletSync/components/GenericStatusDisplay.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Icons, Text } from "@ledgerhq/react-ui";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
-import { AnalyticsPage } from "../hooks/useLedgerSyncAnalytics";
+import { AnalyticsFlow, AnalyticsPage } from "../hooks/useLedgerSyncAnalytics";
 import TrackPage from "~/renderer/analytics/TrackPage";
 import ButtonV3 from "~/renderer/components/ButtonV3";
 
@@ -44,7 +44,7 @@ export const GenericStatusDisplay = ({
 
   return (
     <Flex flexDirection="column" alignItems="center" justifyContent="center" rowGap="24px">
-      <TrackPage category={String(analyticsPage)} />
+      <TrackPage category={String(analyticsPage)} flow={AnalyticsFlow} />
       <Container>
         {type === "info" ? (
           <Icons.InformationFill size={"L"} color={colors.primary.c60} />

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

@@ -25,12 +25,12 @@ export enum AnalyticsPage {
   DesktopSync = "Sync from a desktop",
   KeyCreated = "Backup creation success",
   KeyUpdated = "Sync apps success",
-  Loading = "Loading",
+  Loading = "Loading Trustchain",
 
   SyncWithQR = "Sync with QR code",
   PinCode = "Pin code",
   PinCodeError = "Pin code error",
-  UnbackedError = "No trustchain initialized error",
+  UnbackedError = "Trustchain initialization error",
 
   SettingsGeneral = "Settings General",
   LedgerSyncSettings = "Ledger Sync Settings",
@@ -96,6 +96,7 @@ export const StepsOutsideFlow: Step[] = [
   Step.AutoRemoveInstance,
   Step.UnsecuredLedger,
   Step.BackupDeletionError,
+  Step.SynchronizedInstances,
 ];
 
 export function useLedgerSyncAnalytics() {

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/01-CreateOrSynchronizeStep.tsx

@@ -18,7 +18,7 @@ export default function CreateOrSynchronizeStep({ goToCreateBackup, goToSync }:
 
   return (
     <Flex flexDirection="column" alignSelf="center" justifyContent="center" rowGap="24px">
-      <TrackPage category={AnalyticsPage.Activation} />
+      <TrackPage category={AnalyticsPage.Activation} source={AnalyticsPage.SettingsGeneral} />
       <Flex justifyContent="center" alignItems="center">
         <LogoWrapper>
           <Icons.Mobile color={colors.constant.purple} />

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Loading from "../../components/LoadingStep";
 import { useTranslation } from "react-i18next";
-import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
+import { AnalyticsFlow, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
 import TrackPage from "~/renderer/analytics/TrackPage";
 import { useLoadingStep } from "../../hooks/useLoadingStep";
 import { walletSyncHasTrustchainBeenCreatedSelector } from "~/renderer/reducers/walletSync";
@@ -18,7 +18,7 @@ export default function ActivationLoadingStep() {
 
   return (
     <>
-      <TrackPage category={String(AnalyticsPage.Loading)} />
+      <TrackPage category={String(AnalyticsPage.Loading)} flow={AnalyticsFlow} />
       <Loading title={t(title)} subtitle={t(subtitle)} />
     </>
   );

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/ManageBackup/03-FinalStep.tsx

@@ -4,11 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Flex } from "@ledgerhq/react-ui";
 import { Error } from "../../components/Error";
 import { BackupDeletedProps } from "./types";
-import {
-  AnalyticsFlow,
-  AnalyticsPage,
-  useLedgerSyncAnalytics,
-} from "../../hooks/useLedgerSyncAnalytics";
+import { AnalyticsPage, useLedgerSyncAnalytics } from "../../hooks/useLedgerSyncAnalytics";
 import { useDispatch } from "react-redux";
 import { setDrawerVisibility } from "~/renderer/actions/walletSync";
 
@@ -24,7 +20,6 @@ export default function BackupDeleted({ isSuccessful }: BackupDeletedProps) {
     onClickTrack({
       button: "Close",
       page: AnalyticsPage.BackupDeleted,
-      flow: AnalyticsFlow,
     });
   };
 

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/05-UnbackedError.tsx

@@ -1,23 +1,31 @@
 import React from "react";
 import { Error } from "../../components/Error";
 import { useTranslation } from "react-i18next";
-import { AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics";
+import { AnalyticsPage, useLedgerSyncAnalytics } from "../../hooks/useLedgerSyncAnalytics";
 import { useDispatch } from "react-redux";
 import { setFlow } from "~/renderer/actions/walletSync";
 import { Flow, Step } from "~/renderer/reducers/walletSync";
 
 export default function UnbackedError() {
   const { t } = useTranslation();
 
+  const { onClickTrack } = useLedgerSyncAnalytics();
   const dispatch = useDispatch();
+  const onClick = () => {
+    onClickTrack({
+      button: "Create enctryption key",
+      page: AnalyticsPage.UnbackedError,
+    });
+    dispatch(setFlow({ flow: Flow.Activation, step: Step.DeviceAction }));
+  };
 
   return (
     <Error
       title={t("walletSync.synchronize.unbackedError.title")}
       description={t("walletSync.synchronize.unbackedError.description")}
       analyticsPage={AnalyticsPage.UnbackedError}
       cta={t("walletSync.synchronize.unbackedError.cta")}
-      onClick={() => dispatch(setFlow({ flow: Flow.Activation, step: Step.DeviceAction }))}
+      onClick={onClick}
       ctaVariant="main"
     />
   );

apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Synchronize/07-ActivationAlreadyCreatedOther.tsx

@@ -3,11 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 import { setDrawerVisibility, setFlow } from "~/renderer/actions/walletSync";
 import { Flow, Step } from "~/renderer/reducers/walletSync";
-import {
-  AnalyticsPage,
-  useLedgerSyncAnalytics,
-  AnalyticsFlow,
-} from "../../hooks/useLedgerSyncAnalytics";
+import { AnalyticsPage, useLedgerSyncAnalytics } from "../../hooks/useLedgerSyncAnalytics";
 import { Error } from "../../components/Error";
 
 export default function AlreadyCreatedOtherSeedStep() {
@@ -21,7 +17,6 @@ export default function AlreadyCreatedOtherSeedStep() {
     onClickTrack({
       button: "Delete my encryption key",
       page: AnalyticsPage.AlreadySecuredOtherSeed,
-      flow: AnalyticsFlow,
     });
   };
 

apps/ledger-live-desktop/src/renderer/analytics/segment.ts

@@ -299,8 +299,8 @@ export const track = (
   }
 
   const eventPropertiesWithoutExtra = {
-    ...properties,
     page: currentRouteNameRef.current,
+    ...properties,
   };
 
   const allProperties = {

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

@@ -38,7 +38,7 @@ export function ManageKey({ onClickDelete }: Props) {
           >
             <Icons.Trash size="M" color={"error.c50"} />
           </Flex>
-          <Flex flexDirection="column" ml={3}>
+          <Flex flexDirection="column" ml={3} flex={1}>
             <Text variant="paragraph" fontWeight="semiBold" color="neutral.c100">
               {t("walletSync.walletSyncActivated.manageKey.drawer.step1.titleCta")}
             </Text>

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

@@ -2,6 +2,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 PreventNativeBack from "~/components/PreventNativeBack";
 import SafeAreaView from "~/components/SafeAreaView";
 type Props = {
   title: string;
@@ -22,6 +23,7 @@ export function Success({ title, desc, mainButton, secondaryButton, analyticsPag
   const { colors } = useTheme();
   return (
     <SafeAreaView edges={["top", "left", "right", "bottom"]} isFlex>
+      <PreventNativeBack />
       <TrackScreen name={analyticsPage} />
       <Flex flexDirection="column" alignItems="center" justifyContent="space-between" flex={1}>
         <Flex flexDirection="column" alignItems="center" justifyContent="center" rowGap={16}>