Skip to content

Commit

Permalink
feat: add additional analytics capture events (#967)
Browse files Browse the repository at this point in the history
  • Loading branch information
mchappell authored Nov 6, 2024
1 parent a6f7583 commit 952ed12
Show file tree
Hide file tree
Showing 10 changed files with 107 additions and 39 deletions.
10 changes: 10 additions & 0 deletions src/features/analytics/events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,16 @@ export enum Events {
MigrationDownloadLaceClicked = 'nami tool | nami | download lace | click',
MigrationOpenLaceClicked = 'nami tool | nami | open lace | click',
NamiMigrationDismissed = 'nami tool | nami | migration dismissed | click',

// Enhanced migration events
MigrationViewed = 'nami tool | nami | migration tool viewed',
MigrationViewNoWalletViewed = 'nami tool | nami | migration tool | no wallet viewed',
MigrationNoStartedViewed = 'nami tool | nami | migration tool | not started viewed',
MigrationInProgressViewed = 'nami tool | nami | migration tool | in progress viewed',
NamiMigrationDismissedNoWallet = 'nami tool | nami | migration dismissed | no wallet | click',
NamiMigrationDismissedNotStarted = 'nami tool | nami | migration dismissed | not started | click',
NamiMigrationDismissedInProgress = 'nami tool | nami | migration dismissed | in progress | click',
NamiMigrationOpenLaceOrOpenChromeStore = 'nami tool | nami | open lace or open chrome store link | click',
}

export type Property =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { ReactComponent as Download } from '../../assets/download.svg';
import { ReactComponent as Arrow } from '../../assets/arrow.svg';
import { ReactComponent as PendingDark } from '../../assets/pending-dark-mode.svg';
import { ReactComponent as PendingWhite } from '../../assets/pending-white-mode.svg';
import { useCaptureEvent } from '../../../../features/analytics/hooks';
import { Events } from '../../../../features/analytics/events';

export const AlmostThere = ({
isLaceInstalled,
Expand All @@ -13,6 +15,7 @@ export const AlmostThere = ({
dismissibleSeconds,
}) => {
const { colorMode } = useColorMode();
const captureEvent = useCaptureEvent();
return (
<Slide
showTerms={false}
Expand All @@ -35,10 +38,14 @@ export const AlmostThere = ({
}
buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
buttonIcon={isLaceInstalled ? Arrow : Download}
onButtonClick={onAction}
onButtonClick={async () => {
await captureEvent(Events.NamiMigrationOpenLaceOrOpenChromeStore);
onAction();
}}
isDismissable={isDismissable}
buttonOrientation="column"
dismissibleSeconds={dismissibleSeconds}
onDismiss={() => captureEvent(Events.NamiMigrationDismissedInProgress)}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import { Box } from '@chakra-ui/react';
import { Slide } from '../../slide.component';
import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
import { ReactComponent as BackpackImg } from '../../../assets/backpack.svg';
import { useCaptureEvent } from '../../../../../features/analytics/hooks';
import { Events } from '../../../../../features/analytics/events';

export const Slide1 = ({ onAction, isDismissable, dismissibleSeconds }) => {
const captureEvent = useCaptureEvent();
return (
<Slide
showTerms
Expand All @@ -17,10 +20,13 @@ export const Slide1 = ({ onAction, isDismissable, dismissibleSeconds }) => {
description="The Nami Wallet is now integrated into Lace. Click 'Upgrade your wallet' to begin the process."
buttonText="Upgrade your wallet"
buttonIcon={Arrow}
onButtonClick={onAction}
onButtonClick={async () => await onAction()}
isDismissable={isDismissable}
dismissibleSeconds={dismissibleSeconds}
buttonOrientation={isDismissable ? 'column' : 'row'}
onDismiss={async () =>
captureEvent(Events.NamiMigrationDismissedNotStarted)
}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
import { ReactComponent as SeamlessDark } from '../../../assets/grouped-dark-mode.svg';
import { ReactComponent as SeamlessWhite } from '../../../assets/grouped-white-mode.svg';
import { useColorMode, Box } from '@chakra-ui/react';
import { useCaptureEvent } from '../../../../../features/analytics/hooks';
import { Events } from '../../../../../features/analytics/events';

export const Slide2 = ({ onAction, isDismissable, dismissibleSeconds }) => {
const { colorMode } = useColorMode();
const captureEvent = useCaptureEvent();
return (
<Slide
showTerms
Expand All @@ -27,6 +30,9 @@ export const Slide2 = ({ onAction, isDismissable, dismissibleSeconds }) => {
isDismissable={isDismissable}
dismissibleSeconds={dismissibleSeconds}
buttonOrientation={isDismissable ? 'column' : 'row'}
onDismiss={async () =>
captureEvent(Events.NamiMigrationDismissedNotStarted)
}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import { Slide } from '../../slide.component';
import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
import { Box } from '@chakra-ui/react';
import { ReactComponent as FeaturesImg } from '../../../assets/features.svg';
import { useCaptureEvent } from '../../../../../features/analytics/hooks';
import { Events } from '../../../../../features/analytics/events';

export const Slide3 = ({ onAction, isDismissable, dismissibleSeconds }) => {
const captureEvent = useCaptureEvent();
return (
<Slide
showTerms
Expand All @@ -21,6 +24,9 @@ export const Slide3 = ({ onAction, isDismissable, dismissibleSeconds }) => {
isDismissable={isDismissable}
dismissibleSeconds={dismissibleSeconds}
buttonOrientation={isDismissable ? 'column' : 'row'}
onDismiss={async () =>
captureEvent(Events.NamiMigrationDismissedNotStarted)
}
/>
);
};
7 changes: 6 additions & 1 deletion src/ui/lace-migration/components/dismiss-btn.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { Text } from './text.component';
import { dismissMigration } from '../../../api/migration-tool/cross-extension-messaging/nami-migration-client.extension';
import { ReactComponent as PendingDark } from '../assets/clock.svg';

export const DismissBtn = ({ dismissableIntervalSeconds, hasIcon }) => {
export const DismissBtn = ({
dismissableIntervalSeconds,
hasIcon,
onDismiss,
}) => {
const futureDate = new Date();
const futureTime = futureDate.setTime(
futureDate.getTime() + dismissableIntervalSeconds * 1000
Expand All @@ -22,6 +26,7 @@ export const DismissBtn = ({ dismissableIntervalSeconds, hasIcon }) => {
border="2px solid transparent"
backgroundColor="none"
onClick={async () => {
onDismiss();
await dismissMigration({ dismissMigrationUntil: futureTime });
}}
>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { MigrationState } from '../../../../api/migration-tool/migrator/migration-state.data';
import { Carousel } from '../carousel/carousel.component';
import { Slide1 } from '../carousel/slides/Slide1.component';
Expand All @@ -9,6 +9,10 @@ import { AllDone } from '../all-done/all-done.component';
import { NoWallet } from '../no-wallet/no-wallet.component';
import { useColorModeValue, Flex } from '@chakra-ui/react';
import { useFeatureFlagsContext } from '../../../../features/feature-flags/provider';
import { Events } from '../../../../features/analytics/events';
import { useCaptureEvent } from '../../../../features/analytics/hooks';
import { AnalyticsConsentModal } from '../../../../features/analytics/ui/AnalyticsConsentModal';
import { useAnalyticsContext } from '../../../../features/analytics/provider';

export const MigrationView = ({
migrationState,
Expand All @@ -26,15 +30,22 @@ export const MigrationView = ({
const panelBg = useColorModeValue('#349EA3', 'gray.800');
const bgColor = useColorModeValue('#FFF', '#1A202C');
const { featureFlags } = useFeatureFlagsContext();
const [analytics, setAnalyticsConsent] = useAnalyticsContext();
const captureEvent = useCaptureEvent();
useEffect(() => {
captureEvent(Events.MigrationViewed);
}, []);

const isDismissable =
featureFlags?.['is-migration-active']?.dismissable || false;

const dismissibleSeconds =
featureFlags?.['is-migration-active']?.dismissInterval;

if (!hasWallet) {
captureEvent(Events.MigrationViewNoWalletViewed);
return (
<Flex
<><Flex
h="100%"
backgroundColor={panelBg}
>
Expand All @@ -57,12 +68,18 @@ export const MigrationView = ({
/>
</Flex>
</Flex>
<AnalyticsConsentModal
askForConsent={analytics.consent === undefined}
setConsent={setAnalyticsConsent}
/>
</>
);
}

switch (migrationState) {
case MigrationState.Dismissed:
case MigrationState.None:
captureEvent(Events.MigrationNoStartedViewed);
return (
<Flex
h="100%"
Expand Down
30 changes: 15 additions & 15 deletions src/ui/lace-migration/components/migration.component.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -137,35 +137,35 @@ export const AppWithMigration = () => {
slideIndex: nextSlideIndex,
});
}}
onUpgradeWalletClicked={() => {
onUpgradeWalletClicked={async() => {
enableMigration();
captureEvent(Events.MigrationUpgradeYourWalletClicked);
await captureEvent(Events.MigrationUpgradeYourWalletClicked);
}}
onWaitingForLaceScreenViewed={() => {
captureEvent(Events.MigrationDownloadLaceScreenViewed);
onWaitingForLaceScreenViewed={async() => {
await captureEvent(Events.MigrationDownloadLaceScreenViewed);
}}
onOpenLaceScreenViewed={() => {
captureEvent(Events.MigrationOpenLaceScreenViewed);
onOpenLaceScreenViewed={async() => {
await captureEvent(Events.MigrationOpenLaceScreenViewed);
}}
onDownloadLaceClicked={() => {
captureEvent(Events.MigrationDownloadLaceClicked);
onDownloadLaceClicked={async() => {
await captureEvent(Events.MigrationDownloadLaceClicked);
window.open(
`https://chromewebstore.google.com/detail/lace/${secrets.LACE_EXTENSION_ID}`
);
}}
onOpenLaceClicked={() => {
captureEvent(Events.MigrationOpenLaceClicked);
onOpenLaceClicked={async() => {
await captureEvent(Events.MigrationOpenLaceClicked);
openLace();
}}
onAllDoneScreenViewed={() => {
captureEvent(Events.MigrationAllDoneScreenViewed);
onAllDoneScreenViewed={async() => {
await captureEvent(Events.MigrationAllDoneScreenViewed);
}}
onNoWalletActionClick={() => {
onNoWalletActionClick={async() => {
if (state.isLaceInstalled) {
captureEvent(Events.MigrationOpenLaceClicked, { noWallet: true });
await captureEvent(Events.MigrationOpenLaceClicked);
openLace();
} else {
captureEvent(Events.MigrationDownloadLaceClicked, { noWallet: true });
await captureEvent(Events.MigrationDownloadLaceClicked);
window.open(
`https://chromewebstore.google.com/detail/lace/${secrets.LACE_EXTENSION_ID}`
);
Expand Down
47 changes: 28 additions & 19 deletions src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,32 @@ import { Slide } from '../slide.component';
import { ReactComponent as LaceIcon } from '../../assets/lace-icon.svg';
import { ReactComponent as BackpackImg } from '../../assets/backpack.svg';
import { Box } from '@chakra-ui/react';
import { useCaptureEvent } from '../../../../features/analytics/hooks';
import { Events } from '../../../../features/analytics/events';

export const NoWallet = ({ onAction, isDismissable, dismissibleSeconds }) => (
<Slide
title="Your Nami wallet has upgraded!"
image={
<Box mb={'38px'}>
<BackpackImg width="91px" height="126px" />
</Box>
}
description="To create or import a wallet, proceed using the Lace extension."
buttonText="Get started with Lace"
buttonIcon={LaceIcon}
onButtonClick={onAction}
isDismissable={isDismissable}
buttonOrientation={isDismissable ? 'column' : 'row'}
dismissibleSeconds={dismissibleSeconds}
showTerms={false}
showFindOutMore
/>
);
export const NoWallet = ({ onAction, isDismissable, dismissibleSeconds }) => {
const captureEvent = useCaptureEvent();

return (
<Slide
title="Your Nami wallet has upgraded!"
image={
<Box mb={'38px'}>
<BackpackImg width="91px" height="126px" />
</Box>
}
description="To create or import a wallet, proceed using the Lace extension."
buttonText="Get started with Lace"
buttonIcon={LaceIcon}
onButtonClick={onAction}
isDismissable={isDismissable}
buttonOrientation={isDismissable ? 'column' : 'row'}
dismissibleSeconds={dismissibleSeconds}
showTerms={false}
showFindOutMore
onDismiss={async () =>
captureEvent(Events.NamiMigrationDismissedNoWallet)
}
/>
);
};
2 changes: 2 additions & 0 deletions src/ui/lace-migration/components/slide.component.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export const Slide = ({
dismissibleSeconds,
buttonOrientation,
showFindOutMore,
onDismiss,
}) => {
const borderColor = useColorModeValue('#C0C0C0', '#383838');
const slideBoxBgColor = useColorModeValue('#FFFFFF', '#2D3848');
Expand Down Expand Up @@ -199,6 +200,7 @@ export const Slide = ({
<DismissBtn
hasIcon={buttonOrientation === 'column'}
dismissableIntervalSeconds={dismissibleSeconds}
onDismiss={onDismiss}
/>
)}
</Flex>
Expand Down

0 comments on commit 952ed12

Please sign in to comment.