[web] Track some of the onboarding actions

trilitech · Aug 15, 2024 · 3e957ea · 3e957ea
1 parent bb0637d
commit 3e957ea
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 6 deletions.
diff --git a/apps/web/src/components/Onboarding/connectOptions/ConnectOptions.tsx b/apps/web/src/components/Onboarding/connectOptions/ConnectOptions.tsx
@@ -2,6 +2,7 @@ import { Button, VStack } from "@chakra-ui/react";
 import { useImplicitAccounts } from "@umami/state";
 
 import { StubIcon as LinkIcon } from "../../../assets/icons";
+import { trackButtonClick } from "../../../utils/analytics";
 import { ModalContentWrapper } from "../ModalContentWrapper";
 import { type OnboardingStep } from "../OnboardingStep";
 
@@ -10,12 +11,22 @@ export const ConnectOptions = ({ goToStep }: { goToStep: (step: OnboardingStep)
   return (
     <ModalContentWrapper icon={<LinkIcon />} title="Connect or Import Account">
       <VStack width="100%" spacing="16px">
-        <Button width="100%" onClick={_ => goToStep({ type: "restoreMnemonic" })} size="lg">
+        <Button
+          width="100%"
+          onClick={_ => {
+            trackButtonClick("onboarding", "restore_mnemonic");
+            goToStep({ type: "restoreMnemonic" });
+          }}
+          size="lg"
+        >
           Import with Seed Phrase
         </Button>
         <Button
           width="100%"
-          onClick={_ => goToStep({ type: "restoreSecretKey" })}
+          onClick={_ => {
+            trackButtonClick("onboarding", "restore_secret_key");
+            goToStep({ type: "restoreSecretKey" });
+          }}
           size="lg"
           variant="tertiary"
         >
@@ -24,7 +35,10 @@ export const ConnectOptions = ({ goToStep }: { goToStep: (step: OnboardingStep)
         {!accountsExist && (
           <Button
             width="100%"
-            onClick={_ => goToStep({ type: "restoreBackup" })}
+            onClick={_ => {
+              trackButtonClick("onboarding", "restore_from_backup");
+              goToStep({ type: "restoreBackup" });
+            }}
             size="lg"
             variant="tertiary"
           >
@@ -33,7 +47,10 @@ export const ConnectOptions = ({ goToStep }: { goToStep: (step: OnboardingStep)
         )}
         <Button
           width="100%"
-          onClick={_ => goToStep({ type: "nameAccount", account: { type: "ledger" } })}
+          onClick={_ => {
+            trackButtonClick("onboarding", "connect_ledger");
+            goToStep({ type: "nameAccount", account: { type: "ledger" } });
+          }}
           size="lg"
           variant="tertiary"
         >

diff --git a/apps/web/src/components/Onboarding/connectOrCreate/ConnectOrCreate.tsx b/apps/web/src/components/Onboarding/connectOrCreate/ConnectOrCreate.tsx
@@ -7,6 +7,7 @@ import { OnboardWithTwitterButton } from "./OnboardWithTwitterButton";
 import { StubIcon as WalletPlusIcon } from "../../../assets/icons";
 import { IS_DEV } from "../../../env";
 import { useColor } from "../../../styles/useColor";
+import { trackButtonClick } from "../../../utils/analytics";
 import { ModalContentWrapper } from "../ModalContentWrapper";
 import { type OnboardingStep } from "../OnboardingStep";
 
@@ -22,12 +23,22 @@ export const ConnectOrCreate = ({
   return (
     <ModalContentWrapper icon={<WalletPlusIcon />} title="Connect or Create Account">
       <VStack width="100%" spacing="16px">
-        <Button width="100%" onClick={_ => goToStep({ type: "notice" })} size="lg">
+        <Button
+          width="100%"
+          onClick={_ => {
+            trackButtonClick("onboarding", "create_new_wallet");
+            goToStep({ type: "notice" });
+          }}
+          size="lg"
+        >
           Create a new Account
         </Button>
         <Button
           width="100%"
-          onClick={_ => goToStep({ type: "connectOptions" })}
+          onClick={_ => {
+            trackButtonClick("onboarding", "use_existing_wallet");
+            goToStep({ type: "connectOptions" });
+          }}
           size="lg"
           variant="tertiary"
         >

diff --git a/apps/web/src/components/Onboarding/connectOrCreate/useOnboardWithSocial.tsx b/apps/web/src/components/Onboarding/connectOrCreate/useOnboardWithSocial.tsx
@@ -6,6 +6,11 @@ import { getPublicKeyPairFromSk } from "@umami/tezos";
 import { minutesToMilliseconds } from "date-fns";
 import { useCallback } from "react";
 
+import {
+  trackSocialLoginButtonClick,
+  trackSuccessfulSocialConnection,
+} from "../../../utils/analytics";
+
 const LOGIN_TIMEOUT = minutesToMilliseconds(1);
 
 /**
@@ -24,12 +29,14 @@ export const useOnboardWithSocial = (idp: Auth.IDP, onAuth: () => void) => {
     () =>
       handleAsyncAction(
         async () => {
+          trackSocialLoginButtonClick("onboarding", idp);
           const { secretKey, name, id, email } = await withTimeout(
             () => Auth.forIDP(idp, "desktop").getCredentials(),
             LOGIN_TIMEOUT
           );
           const { pk, pkh } = await getPublicKeyPairFromSk(secretKey);
           restoreSocial(pk, pkh, email || name || id, idp);
+          trackSuccessfulSocialConnection("onboarding", idp);
           toast({ description: `Successfully added ${name || id} account`, status: "success" });
           onAuth();
         },

diff --git a/apps/web/src/components/Onboarding/eula/Eula.tsx b/apps/web/src/components/Onboarding/eula/Eula.tsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 
 import { StubIcon as DocumentIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
+import { trackButtonClick } from "../../../utils/analytics";
 import { ModalContentWrapper } from "../ModalContentWrapper";
 import { type OnboardingStep } from "../OnboardingStep";
 
@@ -34,6 +35,7 @@ export const Eula = ({ goToStep }: { goToStep: (step: OnboardingStep) => void })
               textDecoration="underline"
               _hover={{ color: color("green") }}
               href="https://umamiwallet.com/privacypolicy.html"
+              onClick={() => trackButtonClick("onboarding", "open_terms_of_use")}
               rel="noopener noreferrer"
               target="_blank"
             >

diff --git a/apps/web/src/components/Onboarding/restoreBackupFile/RestoreBackupFile.tsx b/apps/web/src/components/Onboarding/restoreBackupFile/RestoreBackupFile.tsx
@@ -11,6 +11,7 @@ import { useAsyncActionHandler, useRestoreBackup } from "@umami/state";
 import { FormProvider, useForm } from "react-hook-form";
 
 import { StubIcon as RotateIcon } from "../../../assets/icons";
+import { trackSuccessfulConnection } from "../../../utils/analytics";
 import { persistor } from "../../../utils/persistor";
 import { ModalContentWrapper } from "../ModalContentWrapper";
 
@@ -36,6 +37,7 @@ export const RestoreBackupFile = () => {
       const fileContent = await file[0].text();
       const backup = JSON.parse(fileContent);
       await restoreBackup(backup, password, persistor);
+      trackSuccessfulConnection("onboarding", "restore_from_backup");
     });
 
   return (

diff --git a/apps/web/src/utils/analytics.ts b/apps/web/src/utils/analytics.ts
@@ -0,0 +1,60 @@
+import type * as Auth from "@umami/social-auth";
+
+interface EventProps {
+  eventName: GAEvent;
+  params: Record<string, string | number | undefined>;
+}
+
+enum GAEvent {
+  BUTTON_CLICK = "button_click",
+  CONNECT_SUCCESS = "connect_success",
+}
+
+const trackGAEvent = ({ eventName, params }: EventProps) => {
+  (window as any).gtag("event", eventName, {
+    ...params,
+    surface: "web",
+  });
+};
+
+export const trackSocialLoginButtonClick = (section: string, idp: Auth.IDP) => {
+  trackGAEvent({
+    eventName: GAEvent.BUTTON_CLICK,
+    params: {
+      section,
+      action: "social_login",
+      idp,
+    },
+  });
+};
+
+export const trackButtonClick = (section: string, action: string) => {
+  trackGAEvent({
+    eventName: GAEvent.BUTTON_CLICK,
+    params: {
+      section,
+      action,
+    },
+  });
+};
+
+export const trackSuccessfulConnection = (section: string, type: string) => {
+  trackGAEvent({
+    eventName: GAEvent.CONNECT_SUCCESS,
+    params: {
+      section,
+      type,
+    },
+  });
+};
+
+export const trackSuccessfulSocialConnection = (section: string, idp: Auth.IDP) => {
+  trackGAEvent({
+    eventName: GAEvent.CONNECT_SUCCESS,
+    params: {
+      section,
+      type: "social",
+      idp,
+    },
+  });
+};