Skip to content

Add Plausible analytics tracking for deposit and withdraw events #986

@murderteeth

Description

@murderteeth

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

  • Deposit events fire on successful vault deposits with all specified properties
  • Withdraw events fire on successful vault withdrawals with all specified properties
  • isZap correctly reflects whether ENSO routing was used
  • priceUsd contains the token's USD price at time of transaction
  • valueUsd contains the total USD value (amount × price)
  • generation: 3 is included in all events
  • No TypeScript errors (bun run build passes)
  • Events visible in browser Network tab at /proxy/plausible/api/event

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    ⚫ Sort

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions