feat: track captcha analytics

apps/cowswap-frontend/jest.setup.ts

@@ -29,11 +29,21 @@ jest.mock('@cowprotocol/analytics', () => {
     'tokenSymbol',
     'chainId',
   ])
+  const mockCowAnalytics = {
+    sendEvent: jest.fn(),
+  }
 
   return {
     __esModule: true,
     AnalyticsCategory: {},
     Category: {},
+    createCowTracker: (category: string, options: { enabled?: boolean } = {}) => {
+      return (event: Record<string, unknown>) => {
+        if (options.enabled === false) return
+
+        mockCowAnalytics.sendEvent({ category, ...event })
+      }
+    },
     CowAnalytics: class MockCowAnalytics {
       sendEvent = jest.fn()
     },
@@ -58,9 +68,7 @@ jest.mock('@cowprotocol/analytics', () => {
       return JSON.stringify(ga4Event)
     },
     useAnalyticsReporter: jest.fn(),
-    useCowAnalytics: jest.fn().mockImplementation(() => ({
-      sendEvent: jest.fn(),
-    })),
+    useCowAnalytics: jest.fn().mockImplementation(() => mockCowAnalytics),
     waitForAnalytics: jest.fn().mockResolvedValue(undefined),
     WebVitalsAnalytics: class MockWebVitalsAnalytics {
       constructor(_cowAnalytics?: unknown) {}

apps/cowswap-frontend/src/common/analytics/types.ts

@@ -18,6 +18,7 @@ export enum CowSwapAnalyticsCategory {
   SURPLUS_MODAL = 'Surplus Modal',
   COWSWAP = 'CoWSwap',
   LIMIT_ORDER_SETTINGS = 'Limit Order Settings',
+  CAPTCHA = 'Captcha',
 
   // UI Categories
   WALLET = 'Wallet',

apps/cowswap-frontend/src/modules/affiliate/analytics/affiliateAnalytics.test.ts

@@ -14,7 +14,6 @@ import {
 } from './affiliateAnalytics.utils'
 
 import { useAffiliateStateViewAnalytics } from '../hooks/useAffiliateStateViewAnalytics'
-import { logAffiliate } from '../utils/logger'
 
 import type { TraderWalletStatus as TraderWalletStatusType } from '../hooks/useAffiliateTraderWallet'
 
@@ -38,23 +37,18 @@ jest.mock('@cowprotocol/analytics', () => {
   }
 })
 
-jest.mock('../utils/logger', () => ({
-  logAffiliate: jest.fn(),
-}))
-
 jest.mock('../hooks/useAffiliateTraderWallet', () => ({
   TraderWalletStatus,
 }))
 
 const useCowAnalyticsMock = useCowAnalytics as jest.MockedFunction<typeof useCowAnalytics>
-const logAffiliateMock = logAffiliate as jest.MockedFunction<typeof logAffiliate>
 
 describe('trackAffiliateEvent', () => {
   beforeEach(() => {
     jest.clearAllMocks()
   })
 
-  it('sends affiliate analytics payloads without undefined fields', () => {
+  it('sends affiliate analytics payloads', () => {
     const sendEvent = jest.fn()
     const analytics = { sendEvent } as unknown as CowAnalytics
 
@@ -73,28 +67,7 @@ describe('trackAffiliateEvent', () => {
       action: 'affiliate_trader_page_state_viewed',
       chainId: 1,
       walletStatus: TraderWalletStatus.LINKED,
-    })
-    expect(Object.keys(payload)).toEqual(['category', 'action', 'chainId', 'walletStatus'])
-    expect(Object.prototype.hasOwnProperty.call(payload, 'optionalField')).toBe(false)
-  })
-
-  it('swallows analytics transport failures', () => {
-    const sendEvent = jest.fn(() => {
-      throw new Error('analytics failed')
-    })
-    const analytics = { sendEvent } as unknown as CowAnalytics
-
-    expect(() =>
-      trackAffiliateEvent({
-        analytics,
-        action: 'affiliate_trader_page_state_viewed',
-        walletStatus: TraderWalletStatus.LINKED,
-      }),
-    ).not.toThrow()
-
-    expect(logAffiliateMock).toHaveBeenCalledWith('Failed to send analytics event', {
-      action: 'affiliate_trader_page_state_viewed',
-      error: expect.any(Error),
+      optionalField: undefined,
     })
   })
 })

apps/cowswap-frontend/src/modules/affiliate/analytics/affiliateAnalytics.utils.ts

@@ -12,7 +12,6 @@ import {
 
 import { TraderWalletStatus } from '../hooks/useAffiliateTraderWallet'
 import { AffiliatePartnerCodeCreateError } from '../lib/affiliatePartnerCodeCreateError'
-import { logAffiliate } from '../utils/logger'
 
 interface TrackAffiliateEventParams {
   analytics: CowAnalytics
@@ -30,18 +29,12 @@ interface AffiliatePartnerPageStateParams {
 }
 
 export function trackAffiliateEvent({ analytics, action, chainId, ...customParams }: TrackAffiliateEventParams): void {
-  try {
-    analytics.sendEvent(
-      compactRecord({
-        category: CowSwapAnalyticsCategory.AFFILIATE,
-        action,
-        chainId,
-        ...customParams,
-      }) as GtmEvent<CowSwapAnalyticsCategory.AFFILIATE>,
-    )
-  } catch (error) {
-    logAffiliate('Failed to send analytics event', { action, error })
-  }
+  analytics.sendEvent({
+    category: CowSwapAnalyticsCategory.AFFILIATE,
+    action,
+    chainId,
+    ...customParams,
+  } as GtmEvent<CowSwapAnalyticsCategory.AFFILIATE>)
 }
 
 export function getAffiliatePartnerPageState({
@@ -123,7 +116,3 @@ export function normalizeAffiliatePartnerCodeCreateFailureReason(
       return AffiliatePartnerCodeCreateFailureReason.UNEXPECTED_ERROR
   }
 }
-
-function compactRecord(value: Record<string, unknown>): Record<string, unknown> {
-  return Object.fromEntries(Object.entries(value).filter(([, entryValue]) => entryValue !== undefined))
-}

apps/cowswap-frontend/src/modules/affiliate/hooks/useAffiliatePartnerCodeCreate.test.tsx

@@ -159,31 +159,4 @@ describe('useAffiliatePartnerCodeCreate', () => {
       result: 'success',
     })
   })
-
-  it('continues code creation if the start event throws', async () => {
-    const walletClient = createWalletClient()
-
-    sendEvent.mockImplementationOnce(() => {
-      throw new Error('analytics failed')
-    })
-    createCodeMock.mockResolvedValue({ code: 'COW-123' } as Awaited<ReturnType<typeof bffAffiliateApi.createCode>>)
-
-    const { result } = renderHook(() =>
-      useAffiliatePartnerCodeCreate({
-        account: '0x1111111111111111111111111111111111111111',
-        walletClient,
-        code: 'COW-123',
-        setError,
-      }),
-    )
-
-    await act(async () => {
-      await result.current.onCreate()
-    })
-
-    expect(walletClient.signTypedData).toHaveBeenCalledTimes(1)
-    expect(createCodeMock).toHaveBeenCalledTimes(1)
-    expect(mutatePartnerInfo).toHaveBeenCalledTimes(1)
-    expect(setError.mock.calls).toEqual([[undefined]])
-  })
 })

apps/cowswap-frontend/src/modules/captcha/containers/CaptchaWidget.container.tsx

@@ -1,20 +1,23 @@
 import { useAtom, useAtomValue } from 'jotai'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 
+import { createCowTracker } from '@cowprotocol/analytics'
 import { useTheme } from '@cowprotocol/common-hooks'
 import { getJwtTtl } from '@cowprotocol/common-utils'
 
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
 import { setBearerToken } from 'cowSdk'
 import { captchaJwtAtom } from 'entities/captcha/state/captchaJwtAtom'
 
+import { CowSwapAnalyticsCategory } from 'common/analytics/types'
 import { featureFlagsAtom } from 'common/state/featureFlagsState'
 
 import { exchangeTurnstileToken } from '../api/captchaApi'
-import { TURNSTILE_SITE_KEY } from '../config/captcha.const'
+import { TURNSTILE_DEMO_INTERACTIVE_SITE_KEY, TURNSTILE_SITE_KEY } from '../config/captcha.const'
 import { useCaptchaDebugControls } from '../hooks/useCaptchaDebugControls'
 import { logCaptcha } from '../logger'
 
+/* eslint-disable max-lines-per-function */
 export function CaptchaWidget(): ReactNode {
   const [captchaJwt, setCaptchaJwt] = useAtom(captchaJwtAtom)
   const { isCaptchaEnabled } = useAtomValue(featureFlagsAtom)
@@ -23,6 +26,10 @@ export function CaptchaWidget(): ReactNode {
   const [siteKey, setSiteKey] = useState(TURNSTILE_SITE_KEY)
   const theme = useTheme()
 
+  const trackCaptcha = createCowTracker(CowSwapAnalyticsCategory.CAPTCHA, {
+    enabled: siteKey !== TURNSTILE_DEMO_INTERACTIVE_SITE_KEY,
+  })
+
   useEffect(() => {
     if (!isCaptchaEnabled) {
       logCaptcha.debug('Disabled by feature flag')
@@ -82,13 +89,16 @@ export function CaptchaWidget(): ReactNode {
       }}
       onWidgetLoad={(widgetId) => {
         logCaptcha.debug('Challenge starting', { widgetId })
+        trackCaptcha({ action: 'captcha_challenge_started' })
         captchaRef.current?.execute()
       }}
       onBeforeInteractive={() => {
         logCaptcha.debug('Challenge requires interaction')
+        trackCaptcha({ action: 'captcha_interaction_required' })
       }}
       onAfterInteractive={() => {
         logCaptcha.debug('Challenge interaction completed')
+        trackCaptcha({ action: 'captcha_interaction_completed' })
       }}
       onSuccess={async (token: string) => {
         const requestId = exchangeRequestIdRef.current + 1
@@ -107,30 +117,37 @@ export function CaptchaWidget(): ReactNode {
           }
 
           logCaptcha.info('JWT received', { requestId })
+          trackCaptcha({ action: 'captcha_challenge_solved' })
           setCaptchaJwt(jwt)
         } catch (error) {
           if (exchangeRequestIdRef.current !== requestId) {
             return
           }
 
           logCaptcha.error('JWT exchange failed', { requestId, error })
+          trackCaptcha({ action: 'captcha_challenge_failed', reason: 'jwtExchangeFailed' })
           setCaptchaJwt(null)
         }
       }}
       onExpire={() => {
         exchangeRequestIdRef.current += 1
+
         logCaptcha.warn('Challenge expired')
+        trackCaptcha({ action: 'captcha_challenge_failed', reason: 'turnstileExpired' })
         setCaptchaJwt(null)
         logCaptcha.debug('Challenge re-starting')
         captchaRef.current?.reset()
       }}
       onError={(errorCode) => {
         exchangeRequestIdRef.current += 1
+
         logCaptcha.error('Challenge errored', { errorCode, hostname: window.location.hostname })
+        trackCaptcha({ action: 'captcha_challenge_failed', reason: 'turnstileError' })
         setCaptchaJwt(null)
       }}
       onUnsupported={() => {
         logCaptcha.warn('Challenge unsupported by browser')
+        trackCaptcha({ action: 'captcha_challenge_failed', reason: 'browserUnsupported' })
       }}
     />
   )

apps/cowswap-frontend/vercel.ts

@@ -67,6 +67,8 @@ const csp = buildCsp([
   ['upgrade-insecure-requests', []],
 ])
 
+const crossOriginOpenerPolicy = process.env.VERCEL_ENV === 'production' ? 'same-origin-allow-popups' : 'unsafe-none'
+
 // ---------------------------------------------------------------------------
 // Vercel config
 // ---------------------------------------------------------------------------
@@ -87,9 +89,8 @@ export const config: VercelConfig = {
     routes.header('/(.*)', [
       // Controls which resources the browser is allowed to load; prevents XSS and data injection attacks.
       { key: 'Content-Security-Policy', value: csp },
-      // Isolates the browsing context so cross-origin pages cannot access window.opener,
-      // while still allowing this page to open popups (needed for wallet connections).
-      { key: 'Cross-Origin-Opener-Policy', value: 'same-origin-allow-popups' },
+      // Preview deploys use unsafe-none so Tag Assistant can keep its cross-origin debug connection.
+      { key: 'Cross-Origin-Opener-Policy', value: crossOriginOpenerPolicy },
       // Allows any origin to load this page as an iframe, required for the embeddable widget.
       { key: 'Cross-Origin-Resource-Policy', value: 'cross-origin' },
       // Prevents browsers from MIME-sniffing a response away from the declared Content-Type.

libs/analytics/src/CowAnalytics.ts

@@ -1,21 +1,42 @@
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
+export type AnalyticsEvent = string | EventOptions | (EventOptions & Record<string, unknown>)
+
 export interface CowAnalytics {
   setUserAccount(account: string | undefined, walletName?: string): void
   sendPageView(path?: string, params?: string[], title?: string): void
-  sendEvent(event: string | EventOptions, params?: unknown): void
+  sendEvent(event: AnalyticsEvent, params?: unknown): void
   sendTiming(timingCategory: string, timingVar: string, timingValue: number, timingLabel: string): void
   sendError(error: Error, errorInfo?: string): void
   outboundLink(params: OutboundLinkParams): void
   setContext(key: AnalyticsContext, value?: string): void
 }
 
 export type EventOptions = {
+  /**
+   * Event name/action, also used as the GTM `event` name.
+   */
   action: string
+  /**
+   * High-level event bucket used for reporting.
+   */
   category: string
+  /**
+   * Optional free-form text label, kept for existing GTM/GA event_label flows.
+   * Prefer named custom params for new metadata when the meaning is specific.
+   */
   label?: string
+  /**
+   * Optional GA-style numeric metric. Use custom params for text metadata like failure reasons.
+   */
   value?: number
+  /**
+   * Whether the event should not affect interaction/bounce metrics.
+   */
   nonInteraction?: boolean
+  /**
+   * Optional chain id attached to chain-specific events.
+   */
   chainId?: SupportedChainId
 }
 

libs/analytics/src/createCowTracker.ts

@@ -0,0 +1,20 @@
+import { getCowAnalytics } from './utils'
+
+import type { EventOptions } from './CowAnalytics'
+
+type CowTrackerEvent = Omit<EventOptions, 'category'> & Record<string, unknown>
+type CowTracker = (event: CowTrackerEvent) => void
+
+type CowTrackerOptions = {
+  enabled?: boolean
+}
+
+export function createCowTracker(category: string, options: CowTrackerOptions = {}): CowTracker {
+  const { enabled = true } = options
+
+  return (event) => {
+    if (!enabled) return
+
+    getCowAnalytics()?.sendEvent({ category, ...event })
+  }
+}