feat(widget): google analytics dimension for injected widget app id

apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import {
   Dimensions,
@@ -21,6 +21,8 @@ import ReactGA from 'react-ga4'
 import { useLocation } from 'react-router-dom'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
+import { useInjectedWidgetMetaData } from 'modules/injectedWidget'
+
 import { useGetMarketDimension } from './useGetMarketDimension'
 
 export function sendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
@@ -58,6 +60,7 @@ export function useAnalyticsReporter() {
   const { connector } = useWeb3React()
   const { chainId, account } = useWalletInfo()
   const { walletName: _walletName } = useWalletDetails()
+  const injectedWidgetMetaData = useInjectedWidgetMetaData()
   const prevAccount = usePrevious(account)
 
   const marketDimension = useGetMarketDimension()
@@ -73,6 +76,11 @@ export function useAnalyticsReporter() {
 
   const walletName = _walletName || getConnectionName(connection.type, isMetaMask)
 
+  const injectedWidgetAppId = useMemo(
+    () => (injectedWidgetMetaData ? `${injectedWidgetMetaData.appKey}:${injectedWidgetMetaData.url}` : ''),
+    [injectedWidgetMetaData]
+  )
+
   useEffect(() => {
     // Custom dimension 2 - walletname
     googleAnalytics.setDimension(Dimensions.walletName, account ? walletName : 'Not connected')
@@ -93,6 +101,11 @@ export function useAnalyticsReporter() {
     googleAnalytics.setDimension(Dimensions.market, marketDimension)
   }, [marketDimension])
 
+  useEffect(() => {
+    // Custom dimension 6 - injected widget app id
+    googleAnalytics.setDimension(Dimensions.injectedWidgetAppId, injectedWidgetAppId)
+  }, [injectedWidgetAppId])
+
   useEffect(() => {
     googleAnalytics.pageview(`${pathname}${search}`)
   }, [pathname, search])

apps/cowswap-frontend/src/modules/appData/hooks.ts

@@ -5,19 +5,19 @@ import { DEFAULT_APP_CODE, SAFE_APP_CODE } from '@cowprotocol/common-const'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { useIsSafeApp } from '@cowprotocol/wallet'
 
+import { useInjectedWidgetMetaData } from 'modules/injectedWidget'
+
 import { addAppDataToUploadQueueAtom, appDataHooksAtom, appDataInfoAtom } from './state/atoms'
 import { AppDataInfo } from './types'
 
-import { injectedWidgetMetaDataAtom } from '../injectedWidget/state/injectedWidgetMetaDataAtom'
-
 const APP_CODE = process.env.REACT_APP_APP_CODE
 
 export function useAppData(): AppDataInfo | null {
   return useAtomValue(appDataInfoAtom)
 }
 
 export function useAppCode(): string | null {
-  const injectedWidgetMetaData = useAtomValue(injectedWidgetMetaDataAtom)
+  const injectedWidgetMetaData = useInjectedWidgetMetaData()
   const isSafeApp = useIsSafeApp()
 
   return useMemo(() => {

apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetMetaData.ts

@@ -0,0 +1,7 @@
+import { useAtomValue } from 'jotai'
+
+import { InjectedWidgetMetaData, injectedWidgetMetaDataAtom } from '../state/injectedWidgetMetaDataAtom'
+
+export function useInjectedWidgetMetaData(): InjectedWidgetMetaData | null {
+  return useAtomValue(injectedWidgetMetaDataAtom)
+}

apps/cowswap-frontend/src/modules/injectedWidget/index.ts

@@ -1,2 +1,3 @@
-export * from './updaters/InjectedWidgetUpdater'
-export * from './hooks/useInjectedWidgetParams'
+export { InjectedWidgetUpdater } from './updaters/InjectedWidgetUpdater'
+export { useInjectedWidgetParams } from './hooks/useInjectedWidgetParams'
+export { useInjectedWidgetMetaData } from './hooks/useInjectedWidgetMetaData'

libs/analytics/src/provider/index.ts

@@ -13,6 +13,7 @@ const DIMENSION_MAP = {
   [Dimensions.customBrowserType]: 'dimension3',
   [Dimensions.userAddress]: 'dimension4',
   [Dimensions.market]: 'dimension5',
+  [Dimensions.injectedWidgetAppId]: 'dimension6',
 }
 
 type DimensionKey = keyof typeof DIMENSION_MAP
@@ -30,6 +31,7 @@ export class GAProvider {
       customBrowserType: '',
       userAddress: '',
       market: '',
+      injectedWidgetAppId: '',
     }
   }
 

libs/analytics/src/types.ts

@@ -33,6 +33,7 @@ export enum Dimensions {
   customBrowserType = 'customBrowserType',
   userAddress = 'userAddress',
   market = 'market',
+  injectedWidgetAppId = 'injectedWidgetAppId',
 }
 
 export type AnalyticsOrderType = OrderClass | 'TWAP'