feat: add analytics tracking to home page elements

apps/frontend-v3/lib/components/navs/BuildNavLink.tsx

@@ -10,6 +10,7 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import { BuildPopover } from './BuildPopover'
+import { AnalyticsEvent, trackEvent } from '@repo/lib/shared/services/fathom/Fathom'
 
 export function BuildNavLink() {
   const { isOpen, onOpen, onClose } = useDisclosure()
@@ -43,6 +44,7 @@ export function BuildNavLink() {
   }, [isOpen, onClose])
 
   const handleToggle = () => {
+    trackEvent(AnalyticsEvent.ClickNavBuild)
     if (isOpen) {
       onClose()
     } else {

apps/frontend-v3/lib/components/navs/NavLogo.tsx

@@ -6,11 +6,16 @@ import { BalancerLogoType } from '../imgs/BalancerLogoType'
 import { Box, Link } from '@chakra-ui/react'
 import { motion } from 'framer-motion'
 import NextLink from 'next/link'
+import { AnalyticsEvent, trackEvent } from '@repo/lib/shared/services/fathom/Fathom'
 
 export function NavLogo() {
+  const handleLogoClick = () => {
+    trackEvent(AnalyticsEvent.ClickNavBalancerLogo)
+  }
+
   return (
     <Box as={motion.div} variants={fadeIn}>
-      <Link as={NextLink} href="/" prefetch variant="nav">
+      <Link as={NextLink} href="/" onClick={handleLogoClick} prefetch variant="nav">
         <Box>
           <Box display={{ base: 'block', md: 'none' }}>
             <BalancerLogo width="26px" />

packages/lib/config/projects/balancer.ts

@@ -53,7 +53,7 @@ export const ProjectConfigBalancer: ProjectConfig = {
     isOnSafeAppList: true,
   },
   links: {
-    appLinks: [{ href: '/vebal', label: 'veBAL' }],
+    appLinks: [{ analyticsEvent: 'ClickNavVeBal', href: '/vebal', label: 'veBAL' }],
     ecosystemLinks: [
       { label: 'Pool creator', href: 'https://pool-creator.balancer.fi/' },
       { label: 'Blog', href: 'https://medium.com/balancer-protocol' },

packages/lib/modules/pool/PoolList/PoolListFilters.tsx

@@ -53,6 +53,7 @@ import { isCowAmm, isBalancer, PROJECT_CONFIG } from '@repo/lib/config/getProjec
 import { poolTypeLabel } from '../pool.helpers'
 import { AnimatedTag } from '@repo/lib/shared/components/other/AnimatedTag'
 import { PoolMinTvlFilter } from './PoolMinTvlFilter'
+import { AnalyticsEvent, trackEvent } from '@repo/lib/shared/services/fathom/Fathom'
 
 export function useFilterTagsVisible() {
   const {
@@ -378,12 +379,24 @@ export function FilterTags({
 }
 
 export const FilterButton = forwardRef<ButtonProps & { totalFilterCount: number }, 'button'>(
-  ({ totalFilterCount, ...props }, ref) => {
+  ({ totalFilterCount, onClick, ...props }, ref) => {
     const { isMobile } = useBreakpoints()
     const textColor = useColorModeValue('#fff', 'font.dark')
 
+    const handleFilterClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      trackEvent(AnalyticsEvent.ClickPoolListFilter)
+      onClick?.(e)
+    }
+
     return (
-      <Button ref={ref} {...props} display="flex" gap="2" variant="tertiary">
+      <Button
+        ref={ref}
+        {...props}
+        display="flex"
+        gap="2"
+        onClick={handleFilterClick}
+        variant="tertiary"
+      >
         <Icon as={Filter} boxSize={4} />
         {!isMobile && 'Filters'}
         {totalFilterCount > 0 && (
@@ -634,6 +647,7 @@ export function PoolListFilters() {
           href={poolCreatorUrl}
           isExternal
           ml="ms"
+          onClick={() => trackEvent(AnalyticsEvent.ClickPoolListCreatePool)}
           variant="tertiary"
         >
           <Icon as={Plus} boxSize={4} />

packages/lib/modules/user/UserFeedback.tsx

@@ -3,12 +3,18 @@
 import { Button } from '@chakra-ui/react'
 import { ThumbsUp } from 'react-feather'
 import { useAppzi } from '@repo/lib/shared/hooks/useAppzi'
+import { AnalyticsEvent, trackEvent } from '@repo/lib/shared/services/fathom/Fathom'
 
 export function UserFeedback() {
   const { openNpsModal } = useAppzi()
 
+  const handleFeedbackClick = () => {
+    trackEvent(AnalyticsEvent.ClickNavUtilitiesFeedback)
+    openNpsModal()
+  }
+
   return (
-    <Button onClick={openNpsModal} p="0" variant="tertiary">
+    <Button onClick={handleFeedbackClick} p="0" variant="tertiary">
       <ThumbsUp size={18} />
     </Button>
   )

packages/lib/modules/user/settings/UserSettings.tsx

@@ -23,6 +23,8 @@ import { blockInvalidNumberInput } from '@repo/lib/shared/utils/numbers'
 import { Percent, Settings } from 'react-feather'
 import { CurrencySelect } from './CurrencySelect'
 import { EnableTxBundleSetting } from './EnableTxBundlesSetting'
+import { AnalyticsEvent, trackEvent } from '@repo/lib/shared/services/fathom/Fathom'
+import { isBalancer } from '@repo/lib/config/getProjectConfig'
 
 interface SlippageInputProps {
   slippage: string
@@ -96,10 +98,14 @@ function ToggleAllowSounds() {
 export function UserSettings() {
   const { slippage, setSlippage } = useUserSettings()
 
+  const handleSettingsClick = () => {
+    if (isBalancer) trackEvent(AnalyticsEvent.ClickNavUtilitiesSettings)
+  }
+
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Button p="0" variant="tertiary">
+        <Button onClick={handleSettingsClick} p="0" variant="tertiary">
           <Settings size={18} />
         </Button>
       </PopoverTrigger>

packages/lib/modules/web3/ConnectWallet.tsx

@@ -3,6 +3,8 @@ import { Box, Button, ButtonProps, HStack, Img, Show } from '@chakra-ui/react'
 import { CustomAvatar } from './CustomAvatar'
 import { useUserAccount } from './UserAccountProvider'
 import { useIsSafeApp } from './safe.hooks'
+import { AnalyticsEvent, trackEvent } from '@repo/lib/shared/services/fathom/Fathom'
+import { isBalancer } from '@repo/lib/config/getProjectConfig'
 
 export function ConnectWallet({
   connectLabel = 'Connect wallet',
@@ -33,6 +35,11 @@ export function ConnectWallet({
           (!authenticationStatus || authenticationStatus === 'authenticated')
 
         if (!isConnected) {
+          const handleConnectClick = () => {
+            if (isBalancer) trackEvent(AnalyticsEvent.ClickNavUtilitiesWalletConnect)
+            openConnectModal()
+          }
+
           return (
             <HStack width="full">
               {showCreateWalletButton && (
@@ -54,7 +61,7 @@ export function ConnectWallet({
               <Button
                 isDisabled={isLoading || !mounted}
                 loadingText={connectLabel}
-                onClick={openConnectModal}
+                onClick={handleConnectClick}
                 type="button"
                 variant="primary"
                 {...rest}
@@ -79,13 +86,23 @@ export function ConnectWallet({
           )
         }
 
+        const handleNetworkClick = () => {
+          if (isBalancer) trackEvent(AnalyticsEvent.ClickNavUtilitiesNetwork)
+          openChainModal()
+        }
+
+        const handleWalletClick = () => {
+          if (isBalancer) trackEvent(AnalyticsEvent.ClickNavUtilitiesWalletChange)
+          openAccountModal()
+        }
+
         return (
           <HStack spacing="sm">
             <Button
               alignItems="center"
               display="flex"
               isDisabled={isSafeApp}
-              onClick={openChainModal}
+              onClick={handleNetworkClick}
               type="button"
               variant="tertiary"
               {...rest}
@@ -110,7 +127,7 @@ export function ConnectWallet({
               )}
               <Show above="sm">{chain.name}</Show>
             </Button>
-            <Button onClick={openAccountModal} variant="tertiary" {...rest} isDisabled={isSafeApp}>
+            <Button onClick={handleWalletClick} variant="tertiary" {...rest} isDisabled={isSafeApp}>
               <CustomAvatar
                 address={account.address}
                 alt="Avatar"

packages/lib/shared/components/btns/DarkModeToggle.tsx

@@ -5,13 +5,16 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
 import { Moon, Sun } from 'react-feather'
+import { AnalyticsEvent, trackEvent } from '../../services/fathom/Fathom'
+import { isBalancer } from '@repo/lib/config/getProjectConfig'
 
 export default function DarkModeToggle() {
   const [mounted, setMounted] = useState(false)
   const { theme, setTheme } = useTheme()
   const { setColorMode } = useColorMode()
 
   function toggleColorMode() {
+    if (isBalancer) trackEvent(AnalyticsEvent.ClickNavUtilitiesDarkmode)
     setTheme(theme == 'light' ? 'dark' : 'light')
   }
 

packages/lib/shared/components/navs/NavBar.tsx

@@ -21,6 +21,7 @@ import { isBalancer, isCowAmm } from '@repo/lib/config/getProjectConfig'
 import { UserFeedback } from '@repo/lib/modules/user/UserFeedback'
 import { ApiOutageAlert } from '../alerts/ApiOutageAlert'
 import { useApiHealth } from '../../hooks/useApiHealth'
+import { AnalyticsEvent, trackEvent } from '../../services/fathom/Fathom'
 
 type Props = {
   mobileNav?: ReactNode
@@ -61,6 +62,16 @@ function NavLinks({
 }) {
   const { linkColorFor } = useNav()
 
+  const handleLinkClick = (analyticsEvent?: string) => {
+    if (
+      isBalancer &&
+      analyticsEvent &&
+      AnalyticsEvent[analyticsEvent as keyof typeof AnalyticsEvent]
+    ) {
+      trackEvent(AnalyticsEvent[analyticsEvent as keyof typeof AnalyticsEvent])
+    }
+  }
+
   return (
     <HStack fontWeight="medium" spacing="lg" {...props}>
       {appLinks.map(link => {
@@ -72,6 +83,7 @@ function NavLinks({
               color={linkColorFor(link.href || '')}
               href={link.href}
               isExternal={link.isExternal}
+              onClick={() => handleLinkClick(link.analyticsEvent)}
               prefetch
               variant="nav"
             >

packages/lib/shared/components/navs/useNav.tsx

@@ -9,6 +9,7 @@ export type AppLink = {
   icon?: ReactNode
   isExternal?: boolean
   iconType?: IconType
+  analyticsEvent?: string
   onClick?: () => void
 }
 
@@ -19,14 +20,17 @@ export function useNav() {
 
   const defaultAppLinks: AppLink[] = [
     {
+      analyticsEvent: 'ClickNavPools',
       href: '/pools',
       label: 'Pools',
     },
     {
+      analyticsEvent: 'ClickNavSwap',
       href: swapHref,
       label: 'Swap',
     },
     {
+      analyticsEvent: 'ClickNavPortfolio',
       href: '/portfolio',
       label: 'Portfolio',
     },

packages/lib/shared/components/other/RecentTransactions.tsx

@@ -28,6 +28,8 @@ import { getChainId, getChainShortName } from '@repo/lib/config/app.config'
 import { getBlockExplorerTxUrl } from '../../utils/blockExplorer'
 import { getSafeWebUrl } from '@repo/lib/modules/transactions/transaction-steps/safe/safe.helpers'
 import { formatDistanceToNowAbbr } from '../../utils/time'
+import { AnalyticsEvent, trackEvent } from '../../services/fathom/Fathom'
+import { isBalancer } from '@repo/lib/config/getProjectConfig'
 
 function TransactionIcon({ status }: { status: TransactionStatus }) {
   switch (status) {
@@ -131,10 +133,14 @@ export default function RecentTransactions() {
     tx => tx.status === 'confirming'
   ).length
 
+  const handleActivityClick = () => {
+    if (isBalancer) trackEvent(AnalyticsEvent.ClickNavUtilitiesActivity)
+  }
+
   return (
     <Popover>
       <PopoverTrigger>
-        <Button p="0" variant="tertiary">
+        <Button onClick={handleActivityClick} p="0" variant="tertiary">
           {confirmingTxCount > 0 ? (
             <CircularProgress
               color="font.warning"

packages/lib/shared/services/fathom/Fathom.tsx

@@ -7,9 +7,24 @@ import { isProd } from '@repo/lib/config/app.config'
 
 export enum AnalyticsEvent {
   ClickAddLiquidity = 'click: Add liquidity',
-  TransactionSubmitted = 'transaction: Submitted',
+  ClickNavBalancerLogo = 'click: Primary nav Balancer logo',
+  ClickNavBuild = 'click: Build  primary nav',
+  ClickNavPools = 'click: Pools primary nav',
+  ClickNavPortfolio = 'click: Portfolio primary nav',
+  ClickNavSwap = 'click: Swap primary nav',
+  ClickNavUtilitiesActivity = 'click: Nav utilities activity',
+  ClickNavUtilitiesDarkmode = 'click: Nav utilities darkmode',
+  ClickNavUtilitiesFeedback = 'click: Nav utilities feedback',
+  ClickNavUtilitiesNetwork = 'click: Nav utilities network',
+  ClickNavUtilitiesSettings = 'click: Nav utilities settings',
+  ClickNavUtilitiesWalletChange = 'click: Nav utilities wallet change',
+  ClickNavUtilitiesWalletConnect = 'click: Nav utilities wallet connect',
+  ClickNavVeBal = 'click: veBAL primary nav',
+  ClickPoolListCreatePool = 'click: Pool list create pool',
+  ClickPoolListFilter = 'click: Pool list filter',
   TransactionConfirmed = 'transaction: Confirmed',
   TransactionReverted = 'transaction: Reverted',
+  TransactionSubmitted = 'transaction: Submitted',
 }
 
 /**
@@ -42,7 +57,7 @@ function TrackPageView() {
     load('MKFEFCXC', {
       auto: false,
       // Optional but I like to explicitly choose the domains to track:
-      includedDomains: ['balancer.fi', 'zen.balancer.fi'],
+      includedDomains: ['balancer.fi'],
     })
   }, [])