fix(safe-apps): Safe apps analysis improvements

src/components/safe-apps/AppFrame/index.tsx

@@ -62,7 +62,7 @@ const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement
     transactions,
   } = useTransactionQueueBarState()
   const queueBarVisible = transactions.results.length > 0 && !queueBarDismissed
-  const [remoteApp] = useSafeAppFromBackend(appUrl, safe.chainId)
+  const [remoteApp, , isBackendAppsLoading] = useSafeAppFromBackend(appUrl, safe.chainId)
   const { safeApp: safeAppFromManifest } = useSafeAppFromManifest(appUrl, safe.chainId)
   const { thirdPartyCookiesDisabled, setThirdPartyCookiesDisabled } = useThirdPartyCookies()
   const { iframeRef, appIsLoading, isLoadingSlow, setAppIsLoading } = useAppIsLoading()
@@ -130,15 +130,15 @@ const AppFrame = ({ appUrl, allowedFeaturesList }: AppFrameProps): ReactElement
   }, [appUrl, iframeRef, setAppIsLoading, router])
 
   useEffect(() => {
-    if (!appIsLoading) {
+    if (!appIsLoading && !isBackendAppsLoading) {
       trackSafeAppEvent(
         {
           ...SAFE_APPS_EVENTS.OPEN_APP,
         },
         appName,
       )
     }
-  }, [appIsLoading, appName])
+  }, [appIsLoading, isBackendAppsLoading, appName])
 
   useEffect(() => {
     const unsubscribe = txSubscribe(TxEvent.SAFE_APPS_REQUEST, async ({ txId, safeAppRequestId }) => {

src/hooks/safe-apps/useSafeAppFromBackend.ts

@@ -8,6 +8,8 @@ import { trimTrailingSlash } from '@/utils/url'
 
 const useSafeAppFromBackend = (url: string, chainId: string): AsyncResult<SafeAppData> => {
   const [backendApp, error, loading] = useAsync(async () => {
+    if (!chainId) return
+
     // We do not have a single standard for storing URLs, it may be stored with or without a trailing slash.
     // But for the request it has to be an exact match.
     const retryUrl = url.endsWith('/') ? trimTrailingSlash(url) : `${url}/`

src/services/analytics/__tests__/gtm.test.ts

@@ -0,0 +1,18 @@
+import { normalizeAppName } from '../gtm'
+
+const FAKE_SAFE_APP_NAME = 'Safe App'
+const FAKE_DOMAIN = 'http://domain.crypto'
+
+describe('gtm', () => {
+  describe('normalizeAppName', () => {
+    it('should return the app name if is not an URL', () => {
+      expect(normalizeAppName(FAKE_SAFE_APP_NAME)).toBe(FAKE_SAFE_APP_NAME)
+    })
+
+    it('should strip the querystring or hash when is an URL', () => {
+      expect(normalizeAppName(FAKE_DOMAIN)).toBe(FAKE_DOMAIN)
+      expect(normalizeAppName(`${FAKE_DOMAIN}?q1=query1&q2=query2`)).toBe(FAKE_DOMAIN)
+      expect(normalizeAppName(`${FAKE_DOMAIN}#hash`)).toBe(FAKE_DOMAIN)
+    })
+  })
+})

src/services/analytics/gtm.ts

@@ -141,13 +141,22 @@ export const gtmTrackPageview = (pagePath: string): void => {
   gtmSend(gtmEvent)
 }
 
+export const normalizeAppName = (appName?: string): string => {
+  // App name is a URL
+  if (appName?.startsWith('http')) {
+    // Strip search query and hash
+    return appName.split('?')[0].split('#')[0]
+  }
+  return appName || ''
+}
+
 export const gtmTrackSafeApp = (eventData: AnalyticsEvent, appName?: string, sdkEventData?: SafeAppSDKEvent): void => {
   const safeAppGtmEvent: SafeAppGtmEvent = {
     event: EventType.SAFE_APP,
     chainId: _chainId,
     eventCategory: eventData.category,
     eventAction: eventData.action,
-    safeAppName: appName || '',
+    safeAppName: normalizeAppName(appName),
     safeAppEthMethod: '',
     safeAppMethod: '',
     safeAppSDKVersion: '',