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('tools_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

@@ -65,7 +65,9 @@ export const ToolsWalletAddress = ({
       const walletAddressInfo = await getWalletAddress(walletAddressUrl)
       walletActions.setWalletAddressId(walletAddressInfo.id)
       await connect()
-      trackEvent('wallet_connected')
+      trackEvent('tools_wallet_connected', {
+        wallet_provider: new URL(walletAddressInfo.id).hostname,
+      })
     } catch (error) {
       setError({
         fieldErrors: { walletAddress: [(error as Error).message] },
@@ -76,6 +78,11 @@ export const ToolsWalletAddress = ({
     }
   }
 
+  const handleDisconnect = () => {
+    trackEvent('tools_wallet_disconnected')
+    disconnect()
+  }
+
   const handleWalletAddressChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -167,7 +174,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/components/redesign/components/landing/ToolCard.tsx

@@ -31,7 +31,7 @@ export const ToolCard = ({
   const isExternalLink = target !== undefined
 
   const handleClick = () => {
-    trackEvent('click_card_tool', { link: to })
+    trackEvent('tools_click_card_tool', { link: to })
   }
 
   return (

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> => {
@@ -47,11 +49,24 @@ export const useSaveProfile = (wallet: WalletStore) => {
         }
 
         if (result.success) {
-          actions.commitProfile()
+          const changedFields = actions.commitProfile()
+
+          if (changedFields.length > 0) {
+            trackEvent('tools_settings_changed', {
+              tool: toolState.currentToolType,
+              changed_fields: changedFields,
+            })
+          }
 
           if (action === 'script') {
+            trackEvent('tools_script_generated', {
+              tool: toolState.currentToolType,
+            })
             openDialog(<ScriptDialog wallet={wallet} />)
           } else {
+            trackEvent('tools_profile_saved', {
+              tool: toolState.currentToolType,
+            })
             openDialog(<StatusDialog onDone={closeDialog} />)
           }
         }
@@ -69,7 +84,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 = {
+  tools_click_card_tool: { link: string }
+  tools_wallet_connected: { wallet_provider: string }
+  tools_wallet_disconnected: undefined
+  tools_profile_saved: { tool: Tool }
+  tools_script_generated: { tool: Tool }
+  tools_settings_changed: { tool: Tool; changed_fields: string[] }
+  tools_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>
 }
 

frontend/app/stores/banner-store.ts

@@ -118,11 +118,23 @@ export const actions = {
   },
   commitProfile() {
     const profile = snapshot(banner.profile)
+    const prev = snapshots.get(toolState.activeTab)
+
+    const changedFields = prev
+      ? Object.keys(profile).filter(
+          (k) =>
+            JSON.stringify(profile[k as keyof BannerProfile]) !==
+            JSON.stringify(prev[k as keyof BannerProfile]),
+        )
+      : Object.keys(profile)
+
     snapshots.set(toolState.activeTab, profile)
     banner.profilesUpdate.delete(toolState.activeTab)
 
     const snaps = Object.fromEntries(snapshots.entries())
     localStorage.setItem(snapshotsStorageKey, JSON.stringify(snaps))
+
+    return changedFields
   },
   commitProfiles() {
     PROFILE_IDS.forEach((id) => {

frontend/app/stores/offerwall-store.ts

@@ -119,11 +119,22 @@ export const actions = {
   },
   commitProfile() {
     const profile = snapshot(offerwall.profile)
+    const prev = snapshots.get(toolState.activeTab)
+
+    const changedFields = prev
+      ? Object.keys(profile).filter(
+          (k) =>
+            JSON.stringify(profile[k as keyof OfferwallProfile]) !==
+            JSON.stringify(prev[k as keyof OfferwallProfile]),
+        )
+      : Object.keys(profile)
     snapshots.set(toolState.activeTab, profile)
     offerwall.profilesUpdate.delete(toolState.activeTab)
 
     const snaps = Object.fromEntries(snapshots.entries())
     localStorage.setItem(snapshotsStorageKey, JSON.stringify(snaps))
+
+    return changedFields
   },
   commitProfiles() {
     PROFILE_IDS.forEach((id) => {

frontend/app/stores/widget-store.ts

@@ -117,11 +117,21 @@ export const actions = {
   },
   commitProfile() {
     const profile = snapshot(widget.profile)
+    const prev = snapshots.get(toolState.activeTab)
+    const changedFields = prev
+      ? Object.keys(profile).filter(
+          (k) =>
+            JSON.stringify(profile[k as keyof WidgetProfile]) !==
+            JSON.stringify(prev[k as keyof WidgetProfile]),
+        )
+      : Object.keys(profile)
     snapshots.set(toolState.activeTab, profile)
     widget.profilesUpdate.delete(toolState.activeTab)
 
     const snaps = Object.fromEntries(snapshots.entries())
     localStorage.setItem(snapshotsStorageKey, JSON.stringify(snaps))
+
+    return changedFields
   },
   commitProfiles() {
     PROFILE_IDS.forEach((id) => {