Add registration tracking events for .eth and TLD (.box) funnel

e2e/specs/stateless/registerName.spec.ts

@@ -21,6 +21,9 @@ import {
  * get stuck looking for the complete button
  */
 
+const chain = 'localhost'
+const trackEventPrefix = 'Event triggered on local development'
+
 test.describe.serial('normal registration', () => {
   const name = `registration-normal-${Date.now()}.eth`
 
@@ -36,6 +39,16 @@ test.describe.serial('normal registration', () => {
       account: createAccounts().getAddress('user') as `0x${string}`,
     })
 
+    const events: string[] = []
+
+    page.on('console', (msg) => {
+      const message = msg.text()
+
+      if (message.includes(trackEventPrefix)) {
+        events.push(message.replace(trackEventPrefix, '').trim())
+      }
+    })
+
     const homePage = makePageObject('HomePage')
     const registrationPage = makePageObject('RegistrationPage')
     const transactionModal = makePageObject('TransactionModal')
@@ -44,11 +57,18 @@ test.describe.serial('normal registration', () => {
 
     await homePage.goto()
     await login.connect()
+    await expect(events).toContain(JSON.stringify({ type: 'home_page', chain }))
 
     // should redirect to registration page
     await homePage.searchInput.fill(name)
     await homePage.searchInput.press('Enter')
+    await expect(events).toContain(
+      JSON.stringify({ type: 'start_searching', chain, props: { keyword: name } }),
+    )
     await expect(page.getByRole('heading', { name: `Register ${name}` })).toBeVisible()
+    await expect(events).toContain(
+      JSON.stringify({ type: 'search_selected', chain, props: { keyword: name } }),
+    )
 
     // should have payment choice ethereum checked and show primary name setting as checked
     await expect(page.getByTestId('payment-choice-ethereum')).toBeChecked()

src/components/@molecules/SearchInput/SearchInput.tsx

@@ -38,10 +38,11 @@ import { UsePriceQueryKey } from '@app/hooks/ensjs/public/usePrice'
 import { UseWrapperDataQueryKey } from '@app/hooks/ensjs/public/useWrapperData'
 import { useLocalStorage } from '@app/hooks/useLocalStorage'
 import { createQueryKey } from '@app/hooks/useQueryOptions'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { useValidate, validate } from '@app/hooks/useValidate'
 import { useElementSize } from '@app/hooks/useWindowSize'
-import { CreateQueryKey, GenericQueryKey } from '@app/types'
+import { CreateQueryKey, GenericQueryKey, PlausibleProps, PlausibleType } from '@app/types'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { getRegistrationStatus } from '@app/utils/registrationStatus'
 import { thread, yearsToSeconds } from '@app/utils/utils'
@@ -311,6 +312,7 @@ type CreateSearchHandlerProps = {
   setHistory: Dispatch<SetStateAction<HistoryItem[]>>
   setInputVal: Dispatch<SetStateAction<string>>
   queryClient: QueryClient
+  trackRegistrationEvent: (type: PlausibleType, customProps?: PlausibleProps | undefined) => void
 }
 
 const createSearchHandler =
@@ -323,6 +325,7 @@ const createSearchHandler =
     setHistory,
     setInputVal,
     queryClient,
+    trackRegistrationEvent,
   }: CreateSearchHandlerProps): SearchHandler =>
   (index: number) => {
     if (index === -1) return
@@ -338,6 +341,8 @@ const createSearchHandler =
       { lastAccessed: Date.now(), nameType, text, isValid: selectedItem.isValid },
     ])
 
+    trackRegistrationEvent('search_selected', { keyword: text })
+
     const path = getRouteForSearchItem({ address, chainId, queryClient, selectedItem })
     setInputVal('')
     searchInputRef.current?.blur()
@@ -654,6 +659,7 @@ export const SearchInput = ({ size = 'extraLarge' }: { size?: 'medium' | 'extraL
   const handleFocusOut = useCallback(() => toggle(false), [toggle])
 
   const dropdownItems = useBuildDropdownItems(inputVal, history)
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleSearch = useCallback(
@@ -666,6 +672,7 @@ export const SearchInput = ({ size = 'extraLarge' }: { size?: 'medium' | 'extraL
       searchInputRef,
       setHistory,
       setInputVal,
+      trackRegistrationEvent,
     }),
     [address, chainId, dropdownItems, queryClient, router, searchInputRef, setHistory, setInputVal],
   )
@@ -689,6 +696,7 @@ export const SearchInput = ({ size = 'extraLarge' }: { size?: 'medium' | 'extraL
     setInputVal(val)
     setUsingPlaceholder(true)
     debouncer(() => setUsingPlaceholder(false))
+    debouncer(() => trackRegistrationEvent('start_searching', { keyword: val }))
   }
 
   const SearchInputElement = (

src/components/@molecules/TransactionDialogManager/stage/TransactionStageModal.tsx

@@ -25,6 +25,7 @@ import { useAddRecentTransaction } from '@app/hooks/transactions/useAddRecentTra
 import { useRecentTransactions } from '@app/hooks/transactions/useRecentTransactions'
 import { useIsSafeApp } from '@app/hooks/useIsSafeApp'
 import { useQueryOptions } from '@app/hooks/useQueryOptions'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import {
   ManagedDialogProps,
   TransactionFlowAction,
@@ -295,7 +296,7 @@ export const TransactionStageModal = ({
 }: ManagedDialogProps) => {
   const { t } = useTranslation()
   const chainName = useChainName()
-
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
   const { data: isSafeApp, isLoading: safeAppStatusLoading } = useIsSafeApp()
   const { data: connectorClient } = useConnectorClient<ConfigWithEns>()
   const client = useClient()
@@ -476,7 +477,15 @@ export const TransactionStageModal = ({
           !!requestError ||
           isTransactionRequestCachedData
         }
-        onClick={() => sendTransaction(request!)}
+        onClick={() => {
+          sendTransaction(request!)
+
+          if (['commitName', 'registerName'].includes(actionName)) {
+            trackRegistrationEvent(
+              actionName === 'commitName' ? 'commit_wallet_opened' : 'finish_wallet_opened',
+            )
+          }
+        }}
         data-testid="transaction-modal-confirm-button"
       >
         {t('transaction.dialog.confirm.openWallet')}
@@ -496,6 +505,8 @@ export const TransactionStageModal = ({
     transactionLoading,
     request,
     isTransactionRequestCachedData,
+    trackRegistrationEvent,
+    actionName,
   ])
 
   const stepStatus = useMemo(() => {

src/components/pages/dotbox/[name]/DotBoxRegistration.tsx

@@ -13,6 +13,7 @@ import DotBoxLogoSVG from '@app/assets/dotbox/DotBoxLogo.svg'
 import OutlinkSVG from '@app/assets/Outlink.svg'
 import { Card } from '@app/components/Card'
 import { useDotBoxAvailabilityOffchain } from '@app/hooks/dotbox/useDotBoxAvailabilityOffchain'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
 import { Content } from '@app/layouts/Content'
 import { shouldRedirect } from '@app/utils/shouldRedirect'
@@ -104,6 +105,8 @@ export const DotBoxRegistration = () => {
   const dotBoxResult = useDotBoxAvailabilityOffchain({ name })
   const nameStatus = dotBoxResult?.data?.data.status
 
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
+
   shouldRedirect(router, 'DotBoxRegistration.tsx', `/profile/${name}`, dotBoxResult)
 
   const { t } = useTranslation('dnssec')
@@ -159,7 +162,11 @@ export const DotBoxRegistration = () => {
                   .with({ isLoading: true }, () => <Spinner size="medium" color="accent" />)
                   .with({ isLoading: false, nameStatus: 'AVAILABLE' }, () => (
                     <a href={dotBoxResult?.data?.data.href} target="_blank" rel="noreferrer">
-                      <Button width="45" size="small">
+                      <Button
+                        width="45"
+                        size="small"
+                        onClick={() => trackRegistrationEvent('registration_started')}
+                      >
                         <OutlinkInner>
                           Register on my.box
                           <OutlinkSVG />

src/components/pages/profile/[name]/registration/Registration.tsx

@@ -13,6 +13,7 @@ import { ProfileRecord } from '@app/constants/profileRecordOptions'
 import { useContractAddress } from '@app/hooks/chain/useContractAddress'
 import { usePrimaryName } from '@app/hooks/ensjs/public/usePrimaryName'
 import { useNameDetails } from '@app/hooks/useNameDetails'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import useRegistrationReducer from '@app/hooks/useRegistrationReducer'
 import { useResolverExists } from '@app/hooks/useResolverExists'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
@@ -122,6 +123,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
 
   const labelTooLong = isLabelTooLong(normalisedName)
   const { dispatch, item } = useRegistrationReducer(selected)
+  const { trackRegistrationEvent, trackPaymentSelectedEvent } = useRegistrationEventTracker()
   const step = item.queue[item.stepIndex]
 
   const keySuffix = `${nameDetails.normalisedName}-${address}`
@@ -142,7 +144,16 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
     seconds,
     reverseRecord,
     paymentMethodChoice,
+    estimatedTotal,
+    ethPrice,
   }: RegistrationStepData['pricing']) => {
+    trackPaymentSelectedEvent({
+      duration: seconds,
+      paymentMethod: paymentMethodChoice,
+      estimatedTotal,
+      ethPrice,
+    })
+
     if (paymentMethodChoice === PaymentMethod.moonpay) {
       initiateMoonpayRegistrationMutation.mutate(secondsToYears(seconds))
       return
@@ -199,6 +210,11 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
     dispatch({ name: back ? 'decreaseStep' : 'increaseStep', selected })
   }
 
+  const infoCallback = ({ back }: BackObj) => {
+    genericCallback({ back })
+    trackRegistrationEvent('commit_started')
+  }
+
   const transactionsCallback = useCallback(
     ({ back, resetSecret }: BackObj & { resetSecret?: boolean }) => {
       if (resetSecret) {
@@ -301,7 +317,7 @@ const Registration = ({ nameDetails, isLoading }: Props) => {
               <Info
                 name={normalisedName}
                 registrationData={item}
-                callback={genericCallback}
+                callback={infoCallback}
                 onProfileClick={infoProfileCallback}
               />
             ))

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.test.tsx

@@ -21,6 +21,8 @@ describe('ActionButton', () => {
     seconds: yearsToSeconds(1),
     balance: { value: 100n } as any,
     totalRequiredBalance: 1n,
+    estimatedTotal: 1n,
+    ethPrice: 1n,
   }
 
   it('should have disabled "Next" button if no choice has been made', () => {

src/components/pages/profile/[name]/registration/steps/Pricing/Pricing.tsx

@@ -30,6 +30,7 @@ import { ConnectButton } from '@app/components/ConnectButton'
 import { useAccountSafely } from '@app/hooks/account/useAccountSafely'
 import { useContractAddress } from '@app/hooks/chain/useContractAddress'
 import { useEstimateFullRegistration } from '@app/hooks/gasEstimation/useEstimateRegistration'
+import { useEthPrice } from '@app/hooks/useEthPrice'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
 import { ONE_DAY, ONE_YEAR } from '@app/utils/time'
 
@@ -380,6 +381,8 @@ export type ActionButtonProps = {
   seconds: number
   balance: GetBalanceData | undefined
   totalRequiredBalance?: bigint
+  estimatedTotal?: bigint
+  ethPrice?: bigint
 }
 
 export const ActionButton = (props: ActionButtonProps) => {
@@ -404,20 +407,35 @@ export const ActionButton = (props: ActionButtonProps) => {
         reverseRecord,
         seconds,
         paymentMethodChoice,
+        estimatedTotal,
+        ethPrice,
         callback,
       }) => (
         <Button
           loading={initiateMoonpayRegistrationMutation.isPending}
           data-testid="next-button"
-          onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice })}
+          onClick={() =>
+            callback({
+              reverseRecord,
+              seconds,
+              paymentMethodChoice,
+              estimatedTotal,
+              ethPrice,
+            })
+          }
           disabled={!paymentMethodChoice || initiateMoonpayRegistrationMutation.isPending}
         >
           {t('action.next', { ns: 'common' })}
         </Button>
       ),
     )
     .with(
-      P.when((_props) => typeof _props.balance?.value !== 'bigint' || !_props.totalRequiredBalance),
+      P.when(
+        (_props) =>
+          typeof _props.balance?.value !== 'bigint' ||
+          !_props.totalRequiredBalance ||
+          !_props.ethPrice,
+      ),
       () => (
         <Button data-testid="next-button" disabled>
           {t('loading', { ns: 'common' })}
@@ -438,15 +456,25 @@ export const ActionButton = (props: ActionButtonProps) => {
         </Button>
       ),
     )
-    .otherwise(({ reverseRecord, seconds, paymentMethodChoice, callback }) => (
-      <Button
-        data-testid="next-button"
-        onClick={() => callback({ reverseRecord, seconds, paymentMethodChoice })}
-        disabled={!paymentMethodChoice}
-      >
-        {t('action.next', { ns: 'common' })}
-      </Button>
-    ))
+    .otherwise(
+      ({ reverseRecord, seconds, paymentMethodChoice, estimatedTotal, ethPrice, callback }) => (
+        <Button
+          data-testid="next-button"
+          onClick={() =>
+            callback({
+              reverseRecord,
+              seconds,
+              paymentMethodChoice,
+              estimatedTotal,
+              ethPrice,
+            })
+          }
+          disabled={!paymentMethodChoice}
+        >
+          {t('action.next', { ns: 'common' })}
+        </Button>
+      ),
+    )
 }
 
 export type PricingProps = {
@@ -484,6 +512,7 @@ const Pricing = ({
   const { address } = useAccountSafely()
   const { data: balance } = useBalance({ address })
   const resolverAddress = useContractAddress({ contract: 'ensPublicResolver' })
+  const { data: ethPrice } = useEthPrice()
 
   const [seconds, setSeconds] = useState(() => registrationData.seconds ?? ONE_YEAR)
 
@@ -535,6 +564,8 @@ const Pricing = ({
   const totalRequiredBalance = durationRequiredBalance
     ? durationRequiredBalance + (premiumFee || 0n) + (estimatedGasFee || 0n)
     : 0n
+  const estimatedTotal =
+    (totalDurationBasedFee || 0n) + (premiumFee || 0n) + (estimatedGasFee || 0n)
 
   const previousYearlyFee = usePreviousDistinct(yearlyFee) || 0n
 
@@ -594,6 +625,8 @@ const Pricing = ({
             seconds,
             balance,
             totalRequiredBalance,
+            estimatedTotal,
+            ethPrice,
           }}
         />
       </MobileFullWidth>

src/components/pages/profile/[name]/registration/steps/Transactions.tsx

@@ -10,6 +10,7 @@ import { Button, CountdownCircle, Dialog, Heading, mq, Spinner } from '@ensdomai
 import MobileFullWidth from '@app/components/@atoms/MobileFullWidth'
 import { Card } from '@app/components/Card'
 import { useExistingCommitment } from '@app/hooks/registration/useExistingCommitment'
+import { useRegistrationEventTracker } from '@app/hooks/useRegistrationEventTracker'
 import useRegistrationParams from '@app/hooks/useRegistrationParams'
 import { CenteredTypography } from '@app/transaction-flow/input/ProfileEditor/components/CenteredTypography'
 import { createTransactionItem } from '@app/transaction-flow/transaction'
@@ -93,6 +94,7 @@ type Props = {
 
 const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
   const { t } = useTranslation('register')
+  const { trackRegistrationEvent } = useRegistrationEventTracker()
 
   const { address } = useAccount()
   const keySuffix = `${name}-${address}`
@@ -140,6 +142,8 @@ const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
       autoClose: true,
       resumeLink: `/register/${name}`,
     })
+
+    trackRegistrationEvent('finish_started')
   }
 
   const showCommitTransaction = () => {
@@ -148,6 +152,8 @@ const Transactions = ({ registrationData, name, callback, onStart }: Props) => {
 
   const showRegisterTransaction = () => {
     resumeTransactionFlow(registerKey)
+
+    trackRegistrationEvent('finish_started')
   }
 
   const resetTransactions = () => {