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

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

@@ -2,10 +2,12 @@ import { useState, useCallback } from 'react'
 import { SVGSpinner } from '@/assets'
 import { InputField, ToolsPrimaryButton, CodeBlockLink } from '@/components'
 import { Heading5 } from '@/typography'
+import { TOOLS_EVENTS } from '@shared/analytics-events'
 import {
   validateAndConfirmPointer,
   WalletAddressFormatError,
 } from '@shared/utils/index'
+import { useTrackEvent } from '~/lib/analytics'
 
 const htmlEncodePointer = (pointer: string): string => {
   return pointer
@@ -24,6 +26,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 +39,7 @@ export const LinkTagGenerator = () => {
         const validatedPointer = await validateAndConfirmPointer(pointerInput)
         setParsedLinkTag(htmlEncodePointer(validatedPointer))
         setShowCodeBox(true)
+        trackEvent(TOOLS_EVENTS.GENERATED_TAG, { tag_type: 'link_tag' })
       } catch (err) {
         const message =
           err instanceof WalletAddressFormatError
@@ -47,7 +51,7 @@ export const LinkTagGenerator = () => {
         setIsLoading(false)
       }
     },
-    [pointerInput],
+    [pointerInput, trackEvent],
   )
 
   const handleOnChange = useCallback(

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

@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react'
 import { cx } from 'class-variance-authority'
 import { ToolsSecondaryButton, InputField, Tooltip } from '@/components'
 import { Heading5 } from '@/typography'
+import { TOOLS_EVENTS } from '@shared/analytics-events'
 import {
   checkHrefFormat,
   getWalletAddress,
@@ -65,7 +66,7 @@ export const ToolsWalletAddress = ({
       const walletAddressInfo = await getWalletAddress(walletAddressUrl)
       walletActions.setWalletAddressId(walletAddressInfo.id)
       await connect()
-      trackEvent('wallet_connected')
+      trackEvent(TOOLS_EVENTS.WALLET_CONNECTED)
     } catch (error) {
       setError({
         fieldErrors: { walletAddress: [(error as Error).message] },
@@ -76,6 +77,11 @@ export const ToolsWalletAddress = ({
     }
   }
 
+  const handleDisconnect = () => {
+    trackEvent(TOOLS_EVENTS.WALLET_DISCONNECTED)
+    disconnect()
+  }
+
   const handleWalletAddressChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ) => {
@@ -167,7 +173,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

@@ -1,6 +1,7 @@
 import React, { useId } from 'react'
 import { Link } from 'react-router'
 import { PillTag } from '@/components'
+import { TOOLS_EVENTS } from '@shared/analytics-events'
 import arrowOutwardIcon from '~/assets/images/landing/arrow-outward.svg'
 import { useTrackEvent } from '~/lib/analytics'
 
@@ -31,7 +32,7 @@ export const ToolCard = ({
   const isExternalLink = target !== undefined
 
   const handleClick = () => {
-    trackEvent('click_card_tool', { link: to })
+    trackEvent(TOOLS_EVENTS.CLICK_CARD_TOOL, { link: to })
   }
 
   return (

frontend/app/hooks/useSaveProfile.tsx

@@ -4,8 +4,10 @@ import {
   ScriptDialog,
   GrantConfirmationDialog,
 } from '@/components'
+import { TOOLS_EVENTS } from '@shared/analytics-events'
 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 +30,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 +51,13 @@ export const useSaveProfile = (wallet: WalletStore) => {
 
         if (result.success) {
           actions.commitProfile()
+          trackEvent(TOOLS_EVENTS.SETTINGS_CHANGED)
 
           if (action === 'script') {
+            trackEvent(TOOLS_EVENTS.SCRIPT_GENERATED)
             openDialog(<ScriptDialog wallet={wallet} />)
           } else {
+            trackEvent(TOOLS_EVENTS.PROFILE_SAVED)
             openDialog(<StatusDialog onDone={closeDialog} />)
           }
         }
@@ -69,7 +75,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,12 @@
+export {
+  TOOLS_EVENTS,
+  EMBED_EVENTS,
+  API_EVENTS,
+} from '@shared/analytics-events'
+
+export type {
+  ToolsEventName,
+  EmbedEventName,
+  ApiEventName,
+  AnalyticsEventName,
+} from '@shared/analytics-events'

frontend/app/routes/_index.tsx

@@ -1,4 +1,6 @@
+import { useEffect } from 'react'
 import type { MetaFunction } from 'react-router'
+import { TOOLS_EVENTS } from '@shared/analytics-events'
 import { urlWithParams } from '@shared/utils'
 import SVGBanner from '~/assets/images/landing/illustration_banner.svg?url'
 import SVGButton from '~/assets/images/landing/illustration_button.svg?url'
@@ -10,6 +12,7 @@ import SVGWordpressPlugin from '~/assets/images/landing/illustration_wordpress_p
 import SVGHeadingVector from '~/assets/images/landing/tools-heading-vector.svg?url'
 import { ToolCard } from '~/components/redesign/components/landing/ToolCard'
 import { Heading1, Heading3 } from '~/components/redesign/Typography'
+import { useTrackEvent } from '~/lib/analytics'
 
 const DEFAULT_TITLE = 'Publisher Tools'
 const DEFAULT_DESCRIPTION = 'Choose and customize your tools!'
@@ -137,6 +140,11 @@ export const meta: MetaFunction = () => {
 }
 
 export default function Index() {
+  const trackEvent = useTrackEvent()
+
+  useEffect(() => {
+    trackEvent(TOOLS_EVENTS.VIEW_MAIN_PAGE)
+  }, [trackEvent])
   return (
     <div className="bg-interface-bg-main min-h-screen flex flex-col gap-2xl items-center pt-5xl pb-xl px-0">
       <div className="flex flex-col gap-2xl items-center justify-start px-md py-0 w-full max-w-[1280px]">

frontend/package.json

@@ -23,6 +23,7 @@
     "@shared/config-storage-service": "workspace:^",
     "@shared/probabilistic-revenue-share": "workspace:^",
     "@shared/utils": "workspace:^",
+    "@shared/analytics-events": "workspace:^",
     "@tailwindcss/postcss": "^4.2.1",
     "@tools/components": "workspace:*",
     "@typescript-eslint/parser": "^8.44.1",

shared/analytics-events/index.ts

@@ -0,0 +1,25 @@
+export const TOOLS_EVENTS = {
+  VIEW_MAIN_PAGE: 'tools_view_main_page',
+  CLICK_CARD_TOOL: 'tools_click_card_tool',
+  PROFILE_SAVED: 'tools_profile_saved',
+  SCRIPT_GENERATED: 'tools_script_generated',
+  WALLET_CONNECTED: 'tools_wallet_connected',
+  WALLET_DISCONNECTED: 'tools_wallet_disconnected',
+  SETTINGS_CHANGED: 'tools_settings_changed',
+  GENERATED_TAG: 'tools_generated_tag',
+} as const
+
+export const EMBED_EVENTS = {
+  CLICK_LINK_BANNER: 'embed_click_link_banner',
+  CLICK_LINK_OFFERWALL: 'embed_click_link_offerwall',
+  RENDER_TOOL: 'embed_render_tool',
+} as const
+
+export const API_EVENTS = {
+  FINALIZED_PAYMENT: 'api_finalized_payment',
+} as const
+
+export type ToolsEventName = (typeof TOOLS_EVENTS)[keyof typeof TOOLS_EVENTS]
+export type EmbedEventName = (typeof EMBED_EVENTS)[keyof typeof EMBED_EVENTS]
+export type ApiEventName = (typeof API_EVENTS)[keyof typeof API_EVENTS]
+export type AnalyticsEventName = ToolsEventName | EmbedEventName | ApiEventName

shared/analytics-events/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@shared/analytics-events",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true
+}