From 694d2872da9b51439cfca9b718e2aa7b21f2a606 Mon Sep 17 00:00:00 2001 From: Alexandr Kazachenko Date: Thu, 26 Oct 2023 14:56:57 +0600 Subject: [PATCH 1/3] refactor: put injected widget appKey to appData --- apps/cowswap-frontend/src/modules/appData/hooks.ts | 6 +++--- .../injectedWidget/hooks/useInjectedWidgetMetaData.ts | 7 +++++++ apps/cowswap-frontend/src/modules/injectedWidget/index.ts | 5 +++-- 3 files changed, 13 insertions(+), 5 deletions(-) create mode 100644 apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetMetaData.ts diff --git a/apps/cowswap-frontend/src/modules/appData/hooks.ts b/apps/cowswap-frontend/src/modules/appData/hooks.ts index 389cca11d7..560a13dbc9 100644 --- a/apps/cowswap-frontend/src/modules/appData/hooks.ts +++ b/apps/cowswap-frontend/src/modules/appData/hooks.ts @@ -5,11 +5,11 @@ 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 { @@ -17,7 +17,7 @@ export function useAppData(): AppDataInfo | null { } export function useAppCode(): string | null { - const injectedWidgetMetaData = useAtomValue(injectedWidgetMetaDataAtom) + const injectedWidgetMetaData = useInjectedWidgetMetaData() const isSafeApp = useIsSafeApp() return useMemo(() => { diff --git a/apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetMetaData.ts b/apps/cowswap-frontend/src/modules/injectedWidget/hooks/useInjectedWidgetMetaData.ts new file mode 100644 index 0000000000..216eb2d8c3 --- /dev/null +++ b/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) +} diff --git a/apps/cowswap-frontend/src/modules/injectedWidget/index.ts b/apps/cowswap-frontend/src/modules/injectedWidget/index.ts index 8015faac77..6e12a501e1 100644 --- a/apps/cowswap-frontend/src/modules/injectedWidget/index.ts +++ b/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' From f50883511abaa3720797e5c5304be407ff2dc137 Mon Sep 17 00:00:00 2001 From: Alexandr Kazachenko Date: Thu, 26 Oct 2023 15:02:44 +0600 Subject: [PATCH 2/3] feat: google analytics dimension for injected widget app id --- .../src/common/hooks/useAnalyticsReporter.ts | 12 ++++++++++++ libs/analytics/src/provider/index.ts | 2 ++ libs/analytics/src/types.ts | 1 + 3 files changed, 15 insertions(+) diff --git a/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts b/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts index c41f6db6e8..cb8235a42f 100644 --- a/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts +++ b/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts @@ -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() @@ -93,6 +96,15 @@ export function useAnalyticsReporter() { googleAnalytics.setDimension(Dimensions.market, marketDimension) }, [marketDimension]) + useEffect(() => { + // Custom dimension 6 - injected widget app id + const injectedWidgetAppId = injectedWidgetMetaData + ? `${injectedWidgetMetaData.appKey}:${injectedWidgetMetaData.url}` + : '' + + googleAnalytics.setDimension(Dimensions.injectedWidgetAppId, injectedWidgetAppId) + }, [injectedWidgetMetaData]) + useEffect(() => { googleAnalytics.pageview(`${pathname}${search}`) }, [pathname, search]) diff --git a/libs/analytics/src/provider/index.ts b/libs/analytics/src/provider/index.ts index 219a57d9df..bacc2c5c87 100644 --- a/libs/analytics/src/provider/index.ts +++ b/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: '', } } diff --git a/libs/analytics/src/types.ts b/libs/analytics/src/types.ts index 2f0780d5d1..4e5a388809 100644 --- a/libs/analytics/src/types.ts +++ b/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' From 05402d35220752356e52bbc361de183f298d308f Mon Sep 17 00:00:00 2001 From: Alexandr Kazachenko Date: Thu, 26 Oct 2023 18:32:34 +0600 Subject: [PATCH 3/3] refactor: move injectedWidgetAppId to a memo --- .../src/common/hooks/useAnalyticsReporter.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts b/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts index cb8235a42f..6a657b002c 100644 --- a/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts +++ b/apps/cowswap-frontend/src/common/hooks/useAnalyticsReporter.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react' +import { useEffect, useMemo } from 'react' import { Dimensions, @@ -76,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') @@ -98,12 +103,8 @@ export function useAnalyticsReporter() { useEffect(() => { // Custom dimension 6 - injected widget app id - const injectedWidgetAppId = injectedWidgetMetaData - ? `${injectedWidgetMetaData.appKey}:${injectedWidgetMetaData.url}` - : '' - googleAnalytics.setDimension(Dimensions.injectedWidgetAppId, injectedWidgetAppId) - }, [injectedWidgetMetaData]) + }, [injectedWidgetAppId]) useEffect(() => { googleAnalytics.pageview(`${pathname}${search}`)