Description
Re-implement Plausible analytics tracking for vault deposit and withdraw events on the measure branch. This tracking was present on main but was removed during the codebase restructuring. Analytics data helps understand user behavior and vault usage patterns.
Context
Current implementation: The usePlausible hook exists at src/hooks/usePlausible.ts but is not imported anywhere. No deposit/withdraw events are being tracked.
Previous system (main branch): Tracking was in apps/vaults-v3/components/details/actions/QuickActionsButtons.tsx using PLAUSIBLE_EVENTS.DEPOSIT and PLAUSIBLE_EVENTS.WITHDRAW constants from apps/lib/utils/plausible.ts.
Proposed system: Add tracking calls to the success handlers in the new widget components, matching the event properties from main with additional generation: 3, priceUsd, and valueUsd properties.
Relevant references:
- Existing hook:
src/hooks/usePlausible.ts
- Deposit widget:
src/components/pages/vaults/components/widget/deposit/index.tsx
- Withdraw widget:
src/components/pages/vaults/components/widget/withdraw/index.tsx
- Pricing:
getPrice() from useYearn() context
Tasks
Create constants file
- Create
src/components/shared/utils/plausible.ts with PLAUSIBLE_EVENTS object containing DEPOSIT: 'deposit' and WITHDRAW: 'withdraw'
Add tracking to deposit widget
- Import
usePlausible from @hooks/usePlausible and PLAUSIBLE_EVENTS from @shared/utils/plausible
- Call
usePlausible() at component level to get trackEvent
- Add tracking call in
handleDepositSuccess callback with props:
chainID - destination chain
vaultAddress - vault contract address
vaultSymbol - vault symbol
amountToDeposit - formatted deposit amount
tokenAddress - input token address
tokenSymbol - input token symbol
priceUsd - input token USD price (from getPrice())
valueUsd - total USD value of deposit (amount × price)
isZap - true when routeType === 'ENSO'
generation: 3 - site version tag
action - action string
Add tracking to withdraw widget
- Import
usePlausible from @hooks/usePlausible and PLAUSIBLE_EVENTS from @shared/utils/plausible
- Call
usePlausible() at component level to get trackEvent
- Add tracking call in
handleWithdrawSuccess callback with props:
chainID - source chain
vaultAddress - vault contract address
vaultSymbol - vault symbol
sharesToWithdraw - formatted withdrawal amount
tokenAddress - output token address
tokenSymbol - output token symbol
priceUsd - output token USD price (from getPrice())
valueUsd - total USD value of withdrawal (amount × price)
isZap - true when routeType === 'ENSO'
generation: 3 - site version tag
action - action string
Acceptance Criteria
Technical Notes
- The
isZap property maps from main's Solver.enum.Cowswap || Solver.enum.Portals to routeType === 'ENSO' since ENSO handles all zap/aggregator routes
- Route types:
DIRECT_DEPOSIT/DIRECT_WITHDRAW are NOT zaps, ENSO IS a zap
- The
generation: 3 property indicates site version (not vault version) - old events will show "(none)" for this field
- Pricing is available via
getPrice({ address, chainID }).normalized from useYearn() context
- USD value calculation:
Number(formatUnits(amount, decimals)) * priceUsd
- These USD fields enable Plausible revenue tracking and value-weighted analytics in the future
Description
Re-implement Plausible analytics tracking for vault deposit and withdraw events on the
measurebranch. This tracking was present onmainbut was removed during the codebase restructuring. Analytics data helps understand user behavior and vault usage patterns.Context
Current implementation: The
usePlausiblehook exists atsrc/hooks/usePlausible.tsbut is not imported anywhere. No deposit/withdraw events are being tracked.Previous system (main branch): Tracking was in
apps/vaults-v3/components/details/actions/QuickActionsButtons.tsxusingPLAUSIBLE_EVENTS.DEPOSITandPLAUSIBLE_EVENTS.WITHDRAWconstants fromapps/lib/utils/plausible.ts.Proposed system: Add tracking calls to the success handlers in the new widget components, matching the event properties from main with additional
generation: 3,priceUsd, andvalueUsdproperties.Relevant references:
src/hooks/usePlausible.tssrc/components/pages/vaults/components/widget/deposit/index.tsxsrc/components/pages/vaults/components/widget/withdraw/index.tsxgetPrice()fromuseYearn()contextTasks
Create constants file
src/components/shared/utils/plausible.tswithPLAUSIBLE_EVENTSobject containingDEPOSIT: 'deposit'andWITHDRAW: 'withdraw'Add tracking to deposit widget
usePlausiblefrom@hooks/usePlausibleandPLAUSIBLE_EVENTSfrom@shared/utils/plausibleusePlausible()at component level to gettrackEventhandleDepositSuccesscallback with props:chainID- destination chainvaultAddress- vault contract addressvaultSymbol- vault symbolamountToDeposit- formatted deposit amounttokenAddress- input token addresstokenSymbol- input token symbolpriceUsd- input token USD price (fromgetPrice())valueUsd- total USD value of deposit (amount × price)isZap- true whenrouteType === 'ENSO'generation: 3- site version tagaction- action stringAdd tracking to withdraw widget
usePlausiblefrom@hooks/usePlausibleandPLAUSIBLE_EVENTSfrom@shared/utils/plausibleusePlausible()at component level to gettrackEventhandleWithdrawSuccesscallback with props:chainID- source chainvaultAddress- vault contract addressvaultSymbol- vault symbolsharesToWithdraw- formatted withdrawal amounttokenAddress- output token addresstokenSymbol- output token symbolpriceUsd- output token USD price (fromgetPrice())valueUsd- total USD value of withdrawal (amount × price)isZap- true whenrouteType === 'ENSO'generation: 3- site version tagaction- action stringAcceptance Criteria
isZapcorrectly reflects whether ENSO routing was usedpriceUsdcontains the token's USD price at time of transactionvalueUsdcontains the total USD value (amount × price)generation: 3is included in all eventsbun run buildpasses)/proxy/plausible/api/eventTechnical Notes
isZapproperty maps from main'sSolver.enum.Cowswap || Solver.enum.PortalstorouteType === 'ENSO'since ENSO handles all zap/aggregator routesDIRECT_DEPOSIT/DIRECT_WITHDRAWare NOT zaps,ENSOIS a zapgeneration: 3property indicates site version (not vault version) - old events will show "(none)" for this fieldgetPrice({ address, chainID }).normalizedfromuseYearn()contextNumber(formatUnits(amount, decimals)) * priceUsd