[web] Add GA tracking for some onboarding actions

apps/web/src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 import { Flex, Link, Text } from "@chakra-ui/react";
 
 import { useColor } from "../../styles/useColor";
+import { trackButtonClick } from "../../utils/analytics";
 
 export const Footer = () => {
   const color = useColor();
@@ -29,7 +30,11 @@ export const Footer = () => {
       >
         Terms
       </Link>
-      <Link href="https://umamiwallet.com/privacypolicy.html" isExternal>
+      <Link
+        href="https://umamiwallet.com/privacypolicy.html"
+        isExternal
+        onClick={() => trackButtonClick("onboarding", "open_terms_of_use")}
+      >
         Privacy
       </Link>
     </Flex>

apps/web/src/components/Onboarding/ImportWallet/ImportBackupTab.tsx

@@ -15,6 +15,7 @@ import { FormProvider } from "react-hook-form";
 
 import { CheckmarkIcon, CloseIcon, FileUploadIcon } from "../../../assets/icons";
 import { useColor } from "../../../styles/useColor";
+import { trackSuccessfulConnection } from "../../../utils/analytics";
 import { persistor } from "../../../utils/persistor";
 import { PasswordInput } from "../../PasswordInput";
 
@@ -42,6 +43,7 @@ export const ImportBackupTab = () => {
       }
       const backup = JSON.parse(await file[0].text());
       await restoreBackup(backup, password, persistor);
+      trackSuccessfulConnection("onboarding", "restore_from_backup");
     });
 
   const { ref, ...inputRegisterProps } = register("file", {

apps/web/src/components/Onboarding/OnboardOptions/OnboardOptions.tsx

@@ -7,6 +7,7 @@ import { OnboardWithGoogleButton } from "./OnboardWithGoogleButton";
 import { OnboardWithRedditButton } from "./OnboardWithRedditButton";
 import { OnboardWithTwitterButton } from "./OnboardWithTwitterButton";
 import { useColor } from "../../../styles/useColor";
+import { trackButtonClick } from "../../../utils/analytics";
 import { AccountTileWrapper } from "../../AccountTile";
 import { NameAccountModal } from "../../NameAccountModal";
 import { ImportWallet } from "../ImportWallet";
@@ -68,17 +69,26 @@ export const OnboardOptions = ({ children }: PropsWithChildren) => {
         </Center>
 
         <Flex flexDirection="column" gap="12px" width="full">
-          <Button width="full" onClick={handleCreateNewWallet} size="lg" variant="primary">
+          <Button
+            width="full"
+            onClick={() => {
+              trackButtonClick("onboarding", "create_new_wallet");
+              return handleCreateNewWallet();
+            }}
+            size="lg"
+            variant="primary"
+          >
             Create a new wallet
           </Button>
           <Button
             width="full"
-            onClick={() =>
-              openWith(<ImportWallet />, {
+            onClick={() => {
+              trackButtonClick("onboarding", "use_existing_wallet");
+              return openWith(<ImportWallet />, {
                 size: "xl",
                 variant: "onboarding",
-              })
-            }
+              });
+            }}
             size="lg"
             variant="secondary"
           >

apps/web/src/components/Onboarding/OnboardOptions/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).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?.();
         },

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, connectionType: string) => {
+  trackGAEvent({
+    eventName: GAEvent.CONNECT_SUCCESS,
+    params: {
+      section,
+      connectionType,
+    },
+  });
+};
+
+export const trackSuccessfulSocialConnection = (section: string, idp: Auth.IDP) => {
+  trackGAEvent({
+    eventName: GAEvent.CONNECT_SUCCESS,
+    params: {
+      section,
+      connectionType: "social",
+      idp,
+    },
+  });
+};