-
Notifications
You must be signed in to change notification settings - Fork 65
Description
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()fromuseYearn()context
Tasks
Create constants file
- Create
src/components/shared/utils/plausible.tswithPLAUSIBLE_EVENTSobject containingDEPOSIT: 'deposit'andWITHDRAW: 'withdraw'
Add tracking to deposit widget
- Import
usePlausiblefrom@hooks/usePlausibleandPLAUSIBLE_EVENTSfrom@shared/utils/plausible - Call
usePlausible()at component level to gettrackEvent - Add tracking call in
handleDepositSuccesscallback 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 string
Add tracking to withdraw widget
- Import
usePlausiblefrom@hooks/usePlausibleandPLAUSIBLE_EVENTSfrom@shared/utils/plausible - Call
usePlausible()at component level to gettrackEvent - Add tracking call in
handleWithdrawSuccesscallback 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 string
Acceptance Criteria
- Deposit events fire on successful vault deposits with all specified properties
- Withdraw events fire on successful vault withdrawals with all specified properties
-
isZapcorrectly reflects whether ENSO routing was used -
priceUsdcontains the token's USD price at time of transaction -
valueUsdcontains the total USD value (amount × price) -
generation: 3is included in all events - No TypeScript errors (
bun run buildpasses) - Events visible in browser Network tab at
/proxy/plausible/api/event
Technical Notes
- The
isZapproperty maps from main'sSolver.enum.Cowswap || Solver.enum.PortalstorouteType === 'ENSO'since ENSO handles all zap/aggregator routes - Route types:
DIRECT_DEPOSIT/DIRECT_WITHDRAWare NOT zaps,ENSOIS a zap - The
generation: 3property indicates site version (not vault version) - old events will show "(none)" for this field - Pricing is available via
getPrice({ address, chainID }).normalizedfromuseYearn()context - USD value calculation:
Number(formatUnits(amount, decimals)) * priceUsd - These USD fields enable Plausible revenue tracking and value-weighted analytics in the future
Metadata
Metadata
Assignees
Labels
Type
Projects
Status