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

next.config.mjs

@@ -23,7 +23,7 @@ const babelIncludeRegexes = [
  * @type {import('next').NextConfig}
  * */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: process.env.NODE_ENV !== 'development',
   compiler: {
     styledComponents: true,
   },

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,12 @@ export const TransactionStageModal = ({
           !!requestError ||
           isTransactionRequestCachedData
         }
-        onClick={() => sendTransaction(request!)}
+        onClick={() => {
+          sendTransaction(request!)
+          trackRegistrationEvent(
+            actionName === 'commitName' ? 'Commit Wallet Opened' : 'Finish Wallet Opened',
+          )
+        }}
         data-testid="transaction-modal-confirm-button"
       >
         {t('transaction.dialog.confirm.openWallet')}
@@ -496,6 +502,8 @@ export const TransactionStageModal = ({
     transactionLoading,
     request,
     isTransactionRequestCachedData,
+    trackRegistrationEvent,
+    actionName,
   ])
 
   const stepStatus = useMemo(() => {

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.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 = () => {

src/components/pages/profile/[name]/registration/types.ts

@@ -23,6 +23,8 @@ export type RegistrationStepData = {
     seconds: number
     reverseRecord: boolean
     paymentMethodChoice: PaymentMethod | ''
+    estimatedTotal?: bigint
+    ethPrice?: bigint
   }
   profile: {
     records: ProfileRecord[]

src/hooks/useRegistrationEventTracker.ts

@@ -0,0 +1,56 @@
+import { useCallback } from 'react'
+import { formatUnits } from 'viem'
+
+import { PaymentMethod } from '@app/components/pages/profile/[name]/registration/types'
+import { PlausibleProps, PlausibleType } from '@app/types'
+import { trackEvent } from '@app/utils/analytics'
+import { secondsToYears } from '@app/utils/time'
+
+import { useChainName } from './chain/useChainName'
+
+export const useRegistrationEventTracker = () => {
+  const chain = useChainName()
+
+  const trackRegistrationEvent = useCallback(
+    (type: PlausibleType, customProps?: PlausibleProps) => {
+      trackEvent(type, chain, customProps)
+    },
+    [chain],
+  )
+
+  const trackPaymentSelectedEvent = useCallback(
+    ({
+      duration,
+      paymentMethod,
+      estimatedTotal,
+      ethPrice,
+    }: {
+      duration: number
+      paymentMethod: PaymentMethod | ''
+      estimatedTotal?: bigint
+      ethPrice?: bigint
+    }) => {
+      if (!estimatedTotal || !ethPrice) return
+
+      const year = secondsToYears(duration)
+      const durationType = Number.isInteger(year) ? 'year' : 'date'
+      const paymentAmount = formatUnits((estimatedTotal * ethPrice) / BigInt(1e8), 18)
+
+      const props: PlausibleProps = {
+        durationType,
+        duration: durationType === 'year' ? year : duration,
+        paymentType: paymentMethod === PaymentMethod.ethereum ? 'eth' : 'fiat',
+        paymentAmount,
+        currencyUnit: 'usd',
+      }
+
+      trackRegistrationEvent('Payment selected', props)
+    },
+    [trackRegistrationEvent],
+  )
+
+  return {
+    trackRegistrationEvent,
+    trackPaymentSelectedEvent,
+  }
+}