feat(analytics): add tools event tracking and shared event constants

frontend/app/components/redesign/components/LinkTagGenerator.tsx

@@ -6,6 +6,7 @@ import {
   validateAndConfirmPointer,
   WalletAddressFormatError,
 } from '@shared/utils/index'
+import { useTrackEvent } from '~/lib/analytics'
 
 const htmlEncodePointer = (pointer: string): string => {
   return pointer
@@ -24,6 +25,7 @@ export const LinkTagGenerator = () => {
   const [error, setError] = useState('')
   const [showCodeBox, setShowCodeBox] = useState(false)
   const [isCopied, setIsCopied] = useState(false)
+  const trackEvent = useTrackEvent()
 
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
@@ -36,6 +38,7 @@ export const LinkTagGenerator = () => {
         const validatedPointer = await validateAndConfirmPointer(pointerInput)
         setParsedLinkTag(htmlEncodePointer(validatedPointer))
         setShowCodeBox(true)
+        trackEvent('generated_tag', { tag_type: 'link_tag' })
       } catch (err) {
         const message =
           err instanceof WalletAddressFormatError
@@ -47,7 +50,7 @@ export const LinkTagGenerator = () => {
         setIsLoading(false)
       }
     },
-    [pointerInput],
+    [pointerInput, trackEvent],
   )
 
   const handleOnChange = useCallback(

frontend/app/components/redesign/components/ToolsWalletAddress.tsx

@@ -61,14 +61,21 @@ export const ToolsWalletAddress = ({
       const walletAddressInfo = await getWalletAddress(walletAddressUrl)
       walletActions.setWalletAddressId(walletAddressInfo.id)
       await connect()
-      trackEvent('wallet_connected')
+      trackEvent('wallet_connected', {
+        wallet_provider: new URL(walletAddressInfo.id).hostname,
+      })
     } catch (error) {
       setError({ walletAddress: [(error as Error).message] })
     } finally {
       setIsLoading(false)
     }
   }
 
+  const handleDisconnect = () => {
+    trackEvent('wallet_disconnected')
+    disconnect()
+  }
+
   const handleWalletAddressChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -160,7 +167,7 @@ export const ToolsWalletAddress = ({
           </div>
           {snap.isWalletConnected && (
             <button
-              onClick={disconnect}
+              onClick={handleDisconnect}
               className="flex items-center justify-center w-12 h-12 p-2 rounded-lg shrink-0 hover:bg-gray-50 active:bg-gray-100 transition-colors"
               aria-label="Disconnect wallet"
             >

frontend/app/hooks/useSaveProfile.tsx

@@ -6,6 +6,7 @@ import {
 } from '@/components'
 import { TOOL_BANNER, TOOL_OFFERWALL, TOOL_WIDGET } from '@shared/types'
 import { useDialog } from '~/hooks/useDialog'
+import { useTrackEvent } from '~/lib/analytics'
 import { ApiError } from '~/lib/helpers'
 import { actions as bannerActions } from '~/stores/banner-store'
 import { actions as offerwallActions } from '~/stores/offerwall-store'
@@ -28,6 +29,7 @@ function getToolActions() {
 
 export const useSaveProfile = (wallet: WalletStore) => {
   const [openDialog, closeDialog] = useDialog()
+  const trackEvent = useTrackEvent()
 
   const save = useCallback(
     async (action: 'save-success' | 'script'): Promise<void> => {
@@ -48,10 +50,18 @@ export const useSaveProfile = (wallet: WalletStore) => {
 
         if (result.success) {
           actions.commitProfile()
-
+          trackEvent('settings_changed', {
+            tool: toolState.currentToolType,
+          })
           if (action === 'script') {
+            trackEvent('script_generated', {
+              tool: toolState.currentToolType,
+            })
             openDialog(<ScriptDialog wallet={wallet} />)
           } else {
+            trackEvent('profile_saved', {
+              tool: toolState.currentToolType,
+            })
             openDialog(<StatusDialog onDone={closeDialog} />)
           }
         }
@@ -69,7 +79,7 @@ export const useSaveProfile = (wallet: WalletStore) => {
         )
       }
     },
-    [openDialog, closeDialog],
+    [openDialog, closeDialog, trackEvent],
   )
 
   const saveLastAction = useCallback(async (): Promise<void> => {

frontend/app/lib/analytics-events.ts

@@ -0,0 +1,11 @@
+import type { Tool } from '@shared/types'
+
+export type ToolsEventMap = {
+  click_card_tool: { link: string }
+  wallet_connected: { wallet_provider: string }
+  wallet_disconnected: undefined
+  profile_saved: { tool: Tool }
+  script_generated: { tool: Tool }
+  settings_changed: { tool: Tool }
+  generated_tag: { tag_type: 'link_tag' | 'revshare' }
+}

frontend/app/lib/analytics.tsx

@@ -2,10 +2,12 @@ import { createContext, useCallback, useContext } from 'react'
 import type { ReactNode } from 'react'
 import { useLocation } from 'react-router'
 import { TOOLS } from '@shared/types'
+import type { ToolsEventMap } from '~/lib/analytics-events'
 
-type TrackFn = (
-  eventName: string,
-  eventData?: Record<string, string | number | boolean | null>,
+export type TrackFn = <E extends keyof ToolsEventMap>(
+  ...args: ToolsEventMap[E] extends undefined
+    ? [eventName: E]
+    : [eventName: E, data: ToolsEventMap[E]]
 ) => void
 
 const TrackContext = createContext<TrackFn>(() => {})
@@ -14,12 +16,13 @@ export function TelemetryProvider({ children }: { children: ReactNode }) {
   const { pathname } = useLocation()
   const tool = TOOLS.find((t) => pathname.startsWith(`/${t}`))
 
-  const track = useCallback<TrackFn>(
-    (eventName, eventData) => {
-      window.umami?.track(eventName, tool ? { tool, ...eventData } : eventData)
-    },
+  const track = useCallback(
+    ((eventName, eventData) => {
+      window.umami?.track(eventName, { ...(tool && { tool }), ...eventData })
+    }) as TrackFn,
     [tool],
   )
+
   return <TrackContext.Provider value={track}>{children}</TrackContext.Provider>
 }