From 259c0d9caff39f5e3a30bcf5b278e1194830b9be Mon Sep 17 00:00:00 2001
From: Max Alekseenko <nnwen0609@gmail.com>
Date: Thu, 17 Aug 2023 19:24:46 +0200
Subject: [PATCH] add custom ids for analytics

---
 package.json                                  |  2 +-
 .../AccountSetUpModal/Confirm/index.js        |  6 ++-
 .../AccountSetUpModal/Generate/index.js       |  5 ++-
 .../AccountSetUpModal/Password/index.js       |  2 +-
 .../AccountSetUpModal/Restore/index.js        |  4 +-
 src/components/AccountSetUpModal/index.js     | 18 ++++-----
 .../ConfirmTransactionModal/index.js          |  7 +++-
 src/components/ConvertOptions/index.js        |  7 +++-
 src/components/Header/index.js                |  9 +++--
 src/components/IncreasedLimitsBanner/index.js |  2 +-
 src/components/IncreasedLimitsModal/index.js  |  9 ++++-
 src/components/MoreDropdown/index.js          |  7 ++--
 src/components/NetworkDropdown/index.js       |  1 +
 src/components/Tabs/index.js                  |  1 +
 src/components/TransferInput/index.js         |  9 ++++-
 src/components/WalletConnectors/index.js      |  3 +-
 src/components/ZkAccountDropdown/index.js     | 39 ++++++++++++++-----
 src/containers/AccountSetUpButton/index.js    |  1 +
 src/pages/Deposit/index.js                    |  3 +-
 src/pages/Transfer/MultiTransfer/index.js     |  4 +-
 src/pages/Transfer/SingleTransfer/index.js    |  3 +-
 src/pages/Transfer/index.js                   |  6 ++-
 src/pages/Withdraw/index.js                   |  3 +-
 23 files changed, 107 insertions(+), 44 deletions(-)

diff --git a/package.json b/package.json
index 097a7ace..f5c7ca68 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zkbob-ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "private": true,
   "dependencies": {
     "@dicebear/avatars": "^4.10.2",
diff --git a/src/components/AccountSetUpModal/Confirm/index.js b/src/components/AccountSetUpModal/Confirm/index.js
index adf62d55..30eecd40 100644
--- a/src/components/AccountSetUpModal/Confirm/index.js
+++ b/src/components/AccountSetUpModal/Confirm/index.js
@@ -59,7 +59,11 @@ export default ({ mnemonic, confirmMnemonic }) => {
           );
         })}
       </Words>
-      <Button disabled={!match} onClick={confirmMnemonic}>Verify</Button>
+      <Button
+        disabled={!match}
+        onClick={confirmMnemonic}
+        data-ga-id="signup-secret-phrase-confirm"
+      >Verify</Button>
     </Container>
   );
 };
diff --git a/src/components/AccountSetUpModal/Generate/index.js b/src/components/AccountSetUpModal/Generate/index.js
index 6b260494..12978cf0 100644
--- a/src/components/AccountSetUpModal/Generate/index.js
+++ b/src/components/AccountSetUpModal/Generate/index.js
@@ -12,7 +12,10 @@ export default ({ next, isCreation }) => {
           : 'Select the wallet you used to create your zkAccount'
         }
       </Description>
-      <WalletConnectors callback={next} />
+      <WalletConnectors
+        callback={next}
+        gaIdPrefix={(isCreation ? 'signup-' : 'login-')}
+      />
     </Container>
   );
 };
diff --git a/src/components/AccountSetUpModal/Password/index.js b/src/components/AccountSetUpModal/Password/index.js
index 44e6b51d..1305facc 100644
--- a/src/components/AccountSetUpModal/Password/index.js
+++ b/src/components/AccountSetUpModal/Password/index.js
@@ -64,7 +64,7 @@ export default ({ confirmPassword }) => {
         <Rule $error={lengthError}>Please enter 6 or more characters</Rule>
         <Rule $error={matchError}>Password should match</Rule>
       </RulesContainer>
-      <Button onClick={confirm}>Verify</Button>
+      <Button onClick={confirm} data-ga-id="password-confirm">Verify</Button>
     </Container>
   );
 };
diff --git a/src/components/AccountSetUpModal/Restore/index.js b/src/components/AccountSetUpModal/Restore/index.js
index c1a1ecf0..a8979c9e 100644
--- a/src/components/AccountSetUpModal/Restore/index.js
+++ b/src/components/AccountSetUpModal/Restore/index.js
@@ -30,7 +30,9 @@ export default ({ restore }) => {
         Input your saved secret phrase to restore an existing account
       </Description>
       <TextArea value={mnemonic} onChange={onChange} $error={error} />
-      <Button onClick={onRestore}>Restore account</Button>
+      <Button onClick={onRestore} data-ga-id="login-secret-phrase-confirm">
+        Restore account
+      </Button>
     </Container>
   );
 };
diff --git a/src/components/AccountSetUpModal/index.js b/src/components/AccountSetUpModal/index.js
index 7860378d..61c363ca 100644
--- a/src/components/AccountSetUpModal/index.js
+++ b/src/components/AccountSetUpModal/index.js
@@ -35,10 +35,10 @@ const Start = ({ setStep }) => (
     <Description>
       To start working with zkBob you need a zkAccount
     </Description>
-    <Button onClick={() => setStep(STEP.CREATE_OPTIONS)}>
+    <Button onClick={() => setStep(STEP.CREATE_OPTIONS)} data-ga-id="signup-start">
       Create new zkAccount
     </Button>
-    <SecondButton onClick={() => setStep(STEP.RESTORE_OPTIONS)}>
+    <SecondButton onClick={() => setStep(STEP.RESTORE_OPTIONS)} data-ga-id="login-start">
       I already have a zkAccount
     </SecondButton>
   </Container>
@@ -46,10 +46,10 @@ const Start = ({ setStep }) => (
 
 const CreateOptions = ({ setStep }) => (
   <Container>
-    <Button onClick={() => setStep(STEP.CREATE_WITH_WALLET)}>
+    <Button onClick={() => setStep(STEP.CREATE_WITH_WALLET)} data-ga-id="signup-web3-wallet">
       Use my Web3 wallet
     </Button>
-    <SecondButton onClick={() => setStep(STEP.CREATE_WITH_SECRET)}>
+    <SecondButton onClick={() => setStep(STEP.CREATE_WITH_SECRET)} data-ga-id="signup-secret-phrase">
       Use zkBob secret phrase
     </SecondButton>
     <Description>
@@ -63,10 +63,10 @@ const CreateOptions = ({ setStep }) => (
 
 const RestoreOptions = ({ setStep }) => (
   <Container>
-    <Button onClick={() => setStep(STEP.RESTORE_WITH_WALLET)}>
+    <Button onClick={() => setStep(STEP.RESTORE_WITH_WALLET)} data-ga-id="login-web3-wallet">
       I used a Web3 wallet
     </Button>
-    <SecondButton onClick={() => setStep(STEP.RESTORE_WITH_SECRET)}>
+    <SecondButton onClick={() => setStep(STEP.RESTORE_WITH_SECRET)} data-ga-id="login-secret-phrase">
       I used zkBob secret phrase
     </SecondButton>
   </Container>
@@ -77,10 +77,10 @@ const PasswordPrompt = ({ setStep, close }) => (
     <Description>
       You can create a secure password that we'll ask you every time when you log in to zkAccount
     </Description>
-    <Button onClick={() => setStep(STEP.CREATE_PASSWORD)}>
+    <Button onClick={() => setStep(STEP.CREATE_PASSWORD)} data-ga-id="password-set">
       Set a password
     </Button>
-    <SecondButton onClick={close}>
+    <SecondButton onClick={close} data-ga-id="password-skip">
       Skip
     </SecondButton>
   </Container>
@@ -163,7 +163,7 @@ export default ({ isOpen, onClose, saveZkAccountMnemonic, closePasswordModal })
       break;
     case STEP.CREATE_WITH_WALLET:
       title = 'Create new zkAccount';
-      component = <Generate next={() => setStep(STEP.SING_MESSAGE_TO_CREATE)} />;
+      component = <Generate isCreation next={() => setStep(STEP.SING_MESSAGE_TO_CREATE)} />;
       prevStep = STEP.CREATE_OPTIONS;
       break;
     case STEP.CREATE_WITH_SECRET:
diff --git a/src/components/ConfirmTransactionModal/index.js b/src/components/ConfirmTransactionModal/index.js
index 9cfe8741..9699d92f 100644
--- a/src/components/ConfirmTransactionModal/index.js
+++ b/src/components/ConfirmTransactionModal/index.js
@@ -84,7 +84,12 @@ export default ({
             )}
           </Row>
         </DetailsContainer>
-        <Button onClick={onConfirm}>Confirm {isMultitransfer && 'multitransfer'}</Button>
+        <Button
+          onClick={onConfirm}
+          data-ga-id="confirm-operation"
+        >
+          Confirm {isMultitransfer && 'multitransfer'}
+        </Button>
       </Container>
     </Modal>
   );
diff --git a/src/components/ConvertOptions/index.js b/src/components/ConvertOptions/index.js
index a5630200..d7b5d637 100644
--- a/src/components/ConvertOptions/index.js
+++ b/src/components/ConvertOptions/index.js
@@ -31,7 +31,11 @@ export default ({
         <Text style={{ marginRight: 8 }}>
           Convert some {currentPool.tokenSymbol} to {details.toTokenSymbol} on withdrawal
         </Text>
-        <Switch checked={isConverting} onChange={setIsConverting} />
+        <Switch
+          checked={isConverting}
+          onChange={setIsConverting}
+          data-ga-id={`turn-${isConverting ? 'off' : 'on'}-convert-native-token`}
+        />
       </Row>
       {isConverting && (
         <Row>
@@ -45,6 +49,7 @@ export default ({
                 onClick={() => setAmountToConvert(option)}
                 active={amountToConvert.eq(option)}
                 disabled={option.gt(amountToWithdraw) || option.gt(maxAmountToWithdraw)}
+                data-ga-id={`native-token-convert-tier${index + 1}`}
               >
                 <TextBold>{formatNumber(option, currentPool.tokenDecimals)} {currentPool.tokenSymbol}</TextBold>
                 <Text>
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index fddfa8a1..8d00867b 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -110,14 +110,14 @@ export default ({ empty }) => {
       </AccountDropdownButton>
     </WalletDropdown>
   ) : (
-    <Button small onClick={openWalletModal}>
+    <Button small onClick={openWalletModal} data-ga-id="wallet-header">
       Connect wallet
     </Button>
   );
 
   const zkAccountDropdown = zkAccount ? (
     <ZkAccountDropdown>
-      <AccountDropdownButton $refreshing={isLoadingState}>
+      <AccountDropdownButton $refreshing={isLoadingState} data-ga-id="zkaccount-profile">
         <Row>
           <ZkAvatar seed={zkAccount} size={16} />
           <Address>zkAccount</Address>
@@ -141,6 +141,7 @@ export default ({ empty }) => {
       contrast
       disabled={isLoadingZkAccount}
       onClick={openAccountSetUpModal}
+      data-ga-id="zkaccount-header"
     >
       {isLoadingZkAccount ? (isMobile ? 'Loading' : 'Loading zkAccount') : 'zkAccount'}
     </Button>
@@ -154,7 +155,7 @@ export default ({ empty }) => {
         </LogoSection>
         <AccountSection>
           {!isMobile && networkDropdown}
-          <BridgeButton small onClick={openSwapModal}>
+          <BridgeButton small onClick={openSwapModal} data-ga-id="get-token-header">
             Get {currentPool.tokenSymbol}
           </BridgeButton>
           {!isMobile && walletDropdown}
@@ -169,7 +170,7 @@ export default ({ empty }) => {
             </RefreshButtonContainer>
           )}
           <MoreDropdown>
-            <DropdownButton>
+            <DropdownButton data-ga-id="extra-menu-header">
               <DotsIcon />
             </DropdownButton>
           </MoreDropdown>
diff --git a/src/components/IncreasedLimitsBanner/index.js b/src/components/IncreasedLimitsBanner/index.js
index 40f1de42..9bfab313 100644
--- a/src/components/IncreasedLimitsBanner/index.js
+++ b/src/components/IncreasedLimitsBanner/index.js
@@ -17,7 +17,7 @@ export default ({ status, account, openModal, kycUrls }) => {
       component = <>
         <InfinityLoopIcon />
         <Text>Want to increase your deposit limits?</Text>
-        <Button type="link" onClick={openModal}>Learn more</Button>
+        <Button type="link" onClick={openModal} data-ga-id="kyc-banner">Learn more</Button>
       </>;
       break;
     case INCREASED_LIMITS_STATUSES.ACTIVE:
diff --git a/src/components/IncreasedLimitsModal/index.js b/src/components/IncreasedLimitsModal/index.js
index 1a078d12..0b456a0e 100644
--- a/src/components/IncreasedLimitsModal/index.js
+++ b/src/components/IncreasedLimitsModal/index.js
@@ -33,11 +33,16 @@ export default ({ isOpen, onClose, account, isWalletModalOpen, openWalletModal,
           That's it. Your deposit limits will automatically increase if your connected wallet contains a BAB token.
         </Text>
         {account ? (
-          <LinkButton href={currentPool.kycUrls?.homepage.replace('%s', account)}>
+          <LinkButton
+            href={currentPool.kycUrls?.homepage.replace('%s', account)}
+            data-ga-id="kyc-banner-verify-bab"
+          >
             Verify my BAB token
           </LinkButton>
         ) : (
-          <Button onClick={openWalletModal}>Connect wallet</Button>
+          <Button onClick={openWalletModal} data-ga-id="kyc-banner-connect-wallet">
+            Connect wallet
+          </Button>
         )}
       </Container>
     </Modal>
diff --git a/src/components/MoreDropdown/index.js b/src/components/MoreDropdown/index.js
index 2170223c..e3b4cea9 100644
--- a/src/components/MoreDropdown/index.js
+++ b/src/components/MoreDropdown/index.js
@@ -7,9 +7,9 @@ import OptionButton from 'components/OptionButton';
 import { ModalContext } from 'contexts';
 
 const links = [
-  { name: 'Dune Analytics', href: 'https://dune.com/projects/zkBob' },
-  { name: 'Documentation', href: 'https://docs.zkbob.com/' },
-  { name: 'Linktree', href: 'https://linktr.ee/zkbob' },
+  { name: 'Dune Analytics', href: 'https://dune.com/projects/zkBob', gaIdPostfix: 'dune' },
+  { name: 'Documentation', href: 'https://docs.zkbob.com/', gaIdPostfix: 'docs' },
+  { name: 'Linktree', href: 'https://linktr.ee/zkbob', gaIdPostfix: 'linktree' },
 ];
 
 const Content = ({ close }) => (
@@ -21,6 +21,7 @@ const Content = ({ close }) => (
         type="link"
         href={link.href}
         onClick={close}
+        data-ga-id={'extra-menu-' + link.gaIdPostfix}
       >
         {link.name}
       </OptionButton>
diff --git a/src/components/NetworkDropdown/index.js b/src/components/NetworkDropdown/index.js
index 624e0126..fd79c08a 100644
--- a/src/components/NetworkDropdown/index.js
+++ b/src/components/NetworkDropdown/index.js
@@ -72,6 +72,7 @@ const Content = ({ switchToPool, currentPool, close }) => {
                   key={index}
                   onClick={() => onSwitchPool(pool.alias)}
                   className={currentPool.alias === pool.alias ? 'active' : ''}
+                  data-ga-id={`pool-${pool.alias.toLowerCase()}`}
                 >
                   <RowSpaceBetween>
                     <Row>
diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js
index 520394a0..143a8093 100644
--- a/src/components/Tabs/index.js
+++ b/src/components/Tabs/index.js
@@ -10,6 +10,7 @@ export default ({ tabs, activeTab, onTabClick, showBadge }) => {
           active={activeTab === index}
           onClick={() => onTabClick(index)}
           $showBadge={showBadge && tab.badge}
+          data-ga-id={`tab-${tab.name.toLowerCase()}`}
         >{tab.name}</Tab>
       )}
     </Tabs>
diff --git a/src/components/TransferInput/index.js b/src/components/TransferInput/index.js
index b7927c2e..5f960b3f 100644
--- a/src/components/TransferInput/index.js
+++ b/src/components/TransferInput/index.js
@@ -16,7 +16,7 @@ import { TOKENS_ICONS } from 'constants';
 export default ({
   amount, onChange, balance, nativeBalance, isLoadingBalance, fee,
   shielded, setMax, maxAmountExceeded, isLoadingFee, currentPool,
-  isNativeSelected, setIsNativeSelected, isNativeTokenUsed,
+  isNativeSelected, setIsNativeSelected, isNativeTokenUsed, gaIdPostfix,
 }) => {
   const displayedFee = useDisplayedFee(currentPool, fee);
   const [showTooltip, setShowTooltip] = useState(false);
@@ -74,7 +74,12 @@ export default ({
                   {formatNumber(isNativeTokenUsed ? nativeBalance : balance, currentPool.tokenDecimals)}{' '}
                   {currentPool.tokenSymbol}
                 </Text>
-                <MaxButton type="link" onClick={setMax} tabIndex="-1">Max</MaxButton>
+                <MaxButton
+                  type="link"
+                  onClick={setMax}
+                  tabIndex="-1"
+                  data-ga-id={`max-${gaIdPostfix}`}
+                >Max</MaxButton>
                 <Tooltip
                   content={`Click Max to set the maximum amount of ${currentPool.tokenSymbol} you can send including all fees and limits`}
                   placement="right"
diff --git a/src/components/WalletConnectors/index.js b/src/components/WalletConnectors/index.js
index c1a7d269..d739e62e 100644
--- a/src/components/WalletConnectors/index.js
+++ b/src/components/WalletConnectors/index.js
@@ -10,7 +10,7 @@ const getConnectorName = connector => {
   return connector.name;
 }
 
-export default ({ callback }) => {
+export default ({ callback, gaIdPrefix = '' }) => {
   const { connector: activeConnector } = useAccount();
   const { connectAsync, connectors } = useConnect();
   const { disconnectAsync } = useDisconnect();
@@ -29,6 +29,7 @@ export default ({ callback }) => {
         <WalletConnector
           key={index}
           onClick={() => connectWallet(connector)}
+          data-ga-id={gaIdPrefix + connector.name}
         >
           <WalletConnectorName>{getConnectorName(connector)}</WalletConnectorName>
           <WalletConnectorIcon src={CONNECTORS_ICONS[connector.name]} />
diff --git a/src/components/ZkAccountDropdown/index.js b/src/components/ZkAccountDropdown/index.js
index f6892220..a5c5b170 100644
--- a/src/components/ZkAccountDropdown/index.js
+++ b/src/components/ZkAccountDropdown/index.js
@@ -61,8 +61,16 @@ const Content = ({
   }, [close]);
 
   const settingsOptions = [
-    { text: 'Show secret phrase', action: showSeedPhrase },
-    { text: `${hasPassword ? 'Disable' : 'Set'} password`, action: hasPassword ? removePassword : setPassword  },
+    {
+      text: 'Show secret phrase',
+      action: showSeedPhrase,
+      gaIdPostfix: 'secret-phrase',
+    },
+    {
+      text: `${hasPassword ? 'Disable' : 'Set'} password`,
+      action: hasPassword ? removePassword : setPassword,
+      gaIdPostfix: `${hasPassword ? 'disable' : 'enable'}-password`,
+    },
   ];
 
   if (showQRCode) {
@@ -88,7 +96,11 @@ const Content = ({
         <BackIcon onClick={() => setShowSettings(false)} />
         <Title style={{ marginBottom: 20 }}>Settings</Title>
         {settingsOptions.map((item, index) =>
-          <OptionButton key={index} onClick={() => handleOptionClick(item.action)}>
+          <OptionButton
+            key={index}
+            onClick={() => handleOptionClick(item.action)}
+            data-ga-id={`zkaccount-settings-${item.gaIdPostfix}`}
+          >
             {item.text}
           </OptionButton>
         )}
@@ -108,13 +120,22 @@ const Content = ({
           <Balance style={{ marginLeft: 5 }}>{currentPool.tokenSymbol}</Balance>
         </Row>
       </RowSpaceBetween>
-      <Button style={{ marginBottom: 10 }} onClick={generateQRCode} disabled={isLoadingState}>
+      <Button
+        style={{ marginBottom: 10 }}
+        onClick={generateQRCode}
+        disabled={isLoadingState}
+        data-ga-id="zkaccount-generate-qr-code"
+      >
         Generate QR code address
       </Button>
       {privateAddress ? (
         <PrivateAddress>{privateAddress}</PrivateAddress>
       ) : (
-        <Button onClick={generatePrivateAddress} disabled={isLoadingState}>
+        <Button
+          onClick={generatePrivateAddress}
+          disabled={isLoadingState}
+          data-ga-id="zkaccount-generate-address"
+        >
           Generate receiving address
         </Button>
       )}
@@ -124,17 +145,17 @@ const Content = ({
         Receive tokens to this address or a previously generated address.
       </Description>
       {currentPool.paymentContractAddress && (
-        <OptionButton onClick={() => handleOptionClick(generatePaymentLink)}>
+        <OptionButton onClick={() => handleOptionClick(generatePaymentLink)} data-ga-id="zkaccount-payment-link">
           Get payment link
         </OptionButton>
       )}
       <QRCodeReader onResult={initGiftCard}>
-        <OptionButton>Redeem gift card</OptionButton>
+        <OptionButton data-ga-id="zkaccount-gift-card">Redeem gift card</OptionButton>
       </QRCodeReader>
-      <OptionButton onClick={() => setShowSettings(true)}>
+      <OptionButton onClick={() => setShowSettings(true)} data-ga-id="zkaccount-settings">
         Settings
       </OptionButton>
-      <OptionButton onClick={() => handleOptionClick(logout)}>
+      <OptionButton onClick={() => handleOptionClick(logout)} data-ga-id="zkaccount-logout">
         Log out
       </OptionButton>
     </Container>
diff --git a/src/containers/AccountSetUpButton/index.js b/src/containers/AccountSetUpButton/index.js
index eb251160..677be415 100644
--- a/src/containers/AccountSetUpButton/index.js
+++ b/src/containers/AccountSetUpButton/index.js
@@ -13,6 +13,7 @@ export default () => {
       contrast
       disabled={isLoadingZkAccount}
       onClick={openAccountSetUpModal}
+      data-ga-id="zkaccount-get-started"
     >
       {isLoadingZkAccount ? 'Loading...' : 'Get started!'}
     </Button>
diff --git a/src/pages/Deposit/index.js b/src/pages/Deposit/index.js
index 37c0e8a3..7dd6bc34 100644
--- a/src/pages/Deposit/index.js
+++ b/src/pages/Deposit/index.js
@@ -100,6 +100,7 @@ export default () => {
           isNativeSelected={isNativeSelected}
           setIsNativeSelected={setIsNativeSelected}
           isNativeTokenUsed={isNativeTokenUsed}
+          gaIdPostfix="deposit"
         />
         {(() => {
           if (!zkAccount && !isLoadingZkAccount) return <AccountSetUpButton />
@@ -112,7 +113,7 @@ export default () => {
           else if (amount.gt(usedBalance.sub(usedFee))) return <Button disabled>Reduce amount to include {formatNumber(usedFee, currentPool.tokenDecimals)} fee</Button>
           else if (amount.gt(depositLimit)) return <Button disabled>Amount exceeds daily limit</Button>
           else if (currentPool.isNative && !isNativeSelected && !isApproved) return <Button onClick={approve}>Approve tokens</Button>
-          else return <Button onClick={onDeposit}>Deposit</Button>;
+          else return <Button onClick={onDeposit} data-ga-id="initiate-operation-deposit">Deposit</Button>;
         })()}
         {isNativeTokenUsed && (
           <MessageContainer>
diff --git a/src/pages/Transfer/MultiTransfer/index.js b/src/pages/Transfer/MultiTransfer/index.js
index 56373552..13b8a51b 100644
--- a/src/pages/Transfer/MultiTransfer/index.js
+++ b/src/pages/Transfer/MultiTransfer/index.js
@@ -171,7 +171,7 @@ export default forwardRef((props, ref) => {
           if (!zkAccount) return <AccountSetUpButton />
           else if (isLoadingState) return <Button loading contrast disabled>Loading...</Button>
           else if (!data) return <Button disabled>Proceed</Button>
-          else return <Button onClick={validate}>Proceed</Button>;
+          else return <Button onClick={validate} data-ga-id="initiate-operation-multitransfer">Proceed</Button>;
         })()}
         <ConfirmTransactionModal
           title="Multitransfer confirmation"
@@ -184,7 +184,7 @@ export default forwardRef((props, ref) => {
           fee={fee}
           isLoadingFee={isLoadingFee}
           numberOfTxs={numberOfTxs}
-          type="transfer"
+          type="multitransfer"
           currentPool={currentPool}
         />
         <MultitransferDetailsModal
diff --git a/src/pages/Transfer/SingleTransfer/index.js b/src/pages/Transfer/SingleTransfer/index.js
index b24db6fa..5e747b91 100644
--- a/src/pages/Transfer/SingleTransfer/index.js
+++ b/src/pages/Transfer/SingleTransfer/index.js
@@ -70,7 +70,7 @@ export default () => {
     } else if (!isAddressValid) {
       button = <Button disabled>Invalid address</Button>;
     } else {
-      button = <Button onClick={() => setIsConfirmModalOpen(true)}>Transfer</Button>;
+      button = <Button onClick={() => setIsConfirmModalOpen(true)} data-ga-id="initiate-operation-transfer">Transfer</Button>;
     }
   } else {
     button = <AccountSetUpButton />;
@@ -88,6 +88,7 @@ export default () => {
         maxAmountExceeded={maxAmountExceeded}
         isLoadingFee={isLoadingFee}
         currentPool={currentPool}
+        gaIdPostfix="transfer"
       />
       <MultilineInput
         placeholder="Enter address of zkBob receiver"
diff --git a/src/pages/Transfer/index.js b/src/pages/Transfer/index.js
index 4af1f12d..db410d9b 100644
--- a/src/pages/Transfer/index.js
+++ b/src/pages/Transfer/index.js
@@ -36,7 +36,11 @@ export default () => {
           <Title>Transfer</Title>
           <Row>
             <Text>Multitransfer</Text>
-            <Switch checked={isMulti} onChange={setIsMulti} />
+            <Switch
+              checked={isMulti}
+              onChange={setIsMulti}
+              data-ga-id={`turn-${isMulti ? 'off' : 'on'}-multitransfer`}
+            />
             <CsvButtonContainer disabled={!isMulti}>
               <Button
                 type="link"
diff --git a/src/pages/Withdraw/index.js b/src/pages/Withdraw/index.js
index 2b1c4be4..80d82ed6 100644
--- a/src/pages/Withdraw/index.js
+++ b/src/pages/Withdraw/index.js
@@ -81,7 +81,7 @@ export default () => {
     } else if (!ethers.utils.isAddress(receiver)) {
       button = <Button disabled>Invalid address</Button>;
     } else {
-      button = <Button onClick={() => setIsConfirmModalOpen(true)}>Withdraw</Button>;
+      button = <Button onClick={() => setIsConfirmModalOpen(true)} data-ga-id="initiate-operation-withdraw">Withdraw</Button>;
     }
   } else {
     button = <AccountSetUpButton />;
@@ -103,6 +103,7 @@ export default () => {
           maxAmountExceeded={maxAmountExceeded}
           isLoadingFee={isLoadingFee}
           currentPool={currentPool}
+          gaIdPostfix="withdraw"
         />
         {convertionDetails.exist && (
           <ConvertOptions