fix: remove GA code (#7303)

* feat: move ga events to amplitude

* fix: remove GA code

package.json

@@ -262,7 +262,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.8",
-    "react-ga4": "^1.4.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",

public/index.html

@@ -36,6 +36,8 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <link rel="preconnect" href="%REACT_APP_AMPLITUDE_PROXY_URL%" />
+
     <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
     <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
 

src/components/Popups/ClaimPopup.tsx

 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { sendEvent } from 'components/analytics'
 import { useCallback, useEffect } from 'react'
 import { Heart, X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
@@ -65,10 +64,6 @@ export default function ClaimPopup() {
   const showClaimModal = useModalIsOpen(ApplicationModal.SELF_CLAIM)
   const toggleSelfClaimModal = useToggleSelfClaimModal()
   const handleToggleSelfClaimModal = useCallback(() => {
-    sendEvent({
-      category: 'MerkleDrop',
-      action: 'Toggle self claim modal',
-    })
     toggleSelfClaimModal()
   }, [toggleSelfClaimModal])
 
@@ -79,10 +74,6 @@ export default function ClaimPopup() {
   // listen for available claim and show popup if needed
   useEffect(() => {
     if (userHasAvailableclaim) {
-      sendEvent({
-        category: 'MerkleDrop',
-        action: 'Show claim popup',
-      })
       toggleShowClaimPopup()
     }
     // the toggleShowClaimPopup function changes every time the popup changes, so this will cause an infinite loop.

src/components/SearchModal/CurrencySearch.tsx

@@ -5,7 +5,6 @@ import { Currency, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
 import { Trace } from 'analytics'
 import { useCachedPortfolioBalancesQuery } from 'components/AccountDrawer/PrefetchBalancesWrapper'
-import { sendEvent } from 'components/analytics'
 import { supportedChainIdFromGQLChain } from 'graphql/data/util'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -76,16 +75,6 @@ export function CurrencySearch({
   const searchToken = useToken(debouncedQuery)
   const searchTokenIsAdded = useIsUserAddedToken(searchToken)
 
-  useEffect(() => {
-    if (isAddressSearch) {
-      sendEvent({
-        category: 'Currency Select',
-        action: 'Search by address',
-        label: isAddressSearch,
-      })
-    }
-  }, [isAddressSearch])
-
   const defaultTokens = useDefaultActiveTokens(chainId)
   const filteredTokens: Token[] = useMemo(() => {
     return Object.values(defaultTokens).filter(getTokenFilter(debouncedQuery))

src/components/analytics/GoogleAnalyticsProvider.tsx

-/* eslint-disable @typescript-eslint/no-unused-vars */
-// TODO(WEB-2166): Delete this file when we remove Google Analytics completely.
-
-import { GaOptions, InitOptions, UaEventOptions } from 'react-ga4/types/ga4'
-
-/**
- * Google Analytics Provider containing all methods used throughout app to log events to Google Analytics.
- */
-export default class GoogleAnalyticsProvider {
-  public sendEvent(event: string | UaEventOptions, params?: any) {
-    // ReactGA.event(event, params)
-  }
-
-  public initialize(
-    GA_MEASUREMENT_ID: InitOptions[] | string,
-    options?: {
-      legacyDimensionMetric?: boolean
-      nonce?: string
-      testMode?: boolean
-      gaOptions?: GaOptions | any
-      gtagOptions?: any
-    }
-  ) {
-    // ReactGA.initialize(GA_MEASUREMENT_ID, options)
-  }
-
-  public set(fieldsObject: any) {
-    // ReactGA.set(fieldsObject)
-  }
-
-  public outboundLink(
-    {
-      label,
-    }: {
-      label: string
-    },
-    hitCallback: () => unknown
-  ) {
-    // ReactGA.outboundLink({ label }, hitCallback)
-  }
-
-  public pageview(path?: string, _?: string[], title?: string) {
-    // ReactGA.pageview(path, _, title)
-  }
-
-  public ga(...args: any[]) {
-    // ReactGA.ga(...args)
-  }
-
-  public gaCommandSendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
-    // ReactGA._gaCommandSendTiming(timingCategory, timingVar, timingValue, timingLabel)
-  }
-}

src/components/analytics/index.ts

 import { InterfaceEventName } from '@uniswap/analytics-events'
-import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent } from 'analytics'
-import { useEffect } from 'react'
-import { UaEventOptions } from 'react-ga4/types/ga4'
-import { useLocation } from 'react-router-dom'
-import { isMobile } from 'utils/userAgent'
-import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
-
-import GoogleAnalyticsProvider from './GoogleAnalyticsProvider'
-
-const GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY = 'ga_client_id'
-const GOOGLE_ANALYTICS_ID: string | undefined = process.env.REACT_APP_GOOGLE_ANALYTICS_ID
-
-const storedClientId = window.localStorage.getItem(GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY)
-
-const googleAnalytics = new GoogleAnalyticsProvider()
-
-export function sendEvent(event: string | UaEventOptions, params?: any) {
-  return googleAnalytics.sendEvent(event, params)
-}
 
 export function outboundLink({ label }: { label: string }) {
   sendAnalyticsEvent(InterfaceEventName.EXTERNAL_LINK_CLICK, {
     label,
   })
 }
-
-export function sendTiming(timingCategory: any, timingVar: any, timingValue: any, timingLabel: any) {
-  return googleAnalytics.gaCommandSendTiming(timingCategory, timingVar, timingValue, timingLabel)
-}
-
-if (typeof GOOGLE_ANALYTICS_ID === 'string') {
-  googleAnalytics.initialize(GOOGLE_ANALYTICS_ID, {
-    gaOptions: {
-      storage: 'none',
-      storeGac: false,
-      clientId: storedClientId ?? undefined,
-    },
-  })
-  googleAnalytics.set({
-    anonymizeIp: true,
-    customBrowserType: !isMobile
-      ? 'desktop'
-      : 'web3' in window || 'ethereum' in window
-      ? 'mobileWeb3'
-      : 'mobileRegular',
-  })
-} else {
-  googleAnalytics.initialize('test', { gtagOptions: { debug_mode: true } })
-}
-
-const installed = Boolean(window.navigator.serviceWorker?.controller)
-const hit = Boolean((window as any).__isDocumentCached)
-const action = installed ? (hit ? 'Cache hit' : 'Cache miss') : 'Not installed'
-sendEvent({ category: 'Service Worker', action, nonInteraction: true })
-
-function reportWebVitals({ name, delta, id }: Metric) {
-  sendTiming('Web Vitals', name, Math.round(name === 'CLS' ? delta * 1000 : delta), id)
-}
-
-// tracks web vitals and pageviews
-export function useAnalyticsReporter() {
-  const { pathname, search } = useLocation()
-  useEffect(() => {
-    getFCP(reportWebVitals)
-    getFID(reportWebVitals)
-    getLCP(reportWebVitals)
-    getCLS(reportWebVitals)
-  }, [])
-
-  const { chainId } = useWeb3React()
-  useEffect(() => {
-    // cd1 - custom dimension 1 - chainId
-    googleAnalytics.set({ cd1: chainId ?? 0 })
-  }, [chainId])
-
-  useEffect(() => {
-    googleAnalytics.pageview(`${pathname}${search}`)
-  }, [pathname, search])
-
-  useEffect(() => {
-    // typed as 'any' in react-ga4 -.-
-    googleAnalytics.ga((tracker: any) => {
-      if (!tracker) return
-
-      const clientId = tracker.get('clientId')
-      window.localStorage.setItem(GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY, clientId)
-    })
-  }, [])
-}

src/hooks/useAccountRiskCheck.ts

-import { sendEvent } from 'components/analytics'
 import ms from 'ms'
 import { useEffect } from 'react'
 import { ApplicationModal, setOpenModal } from 'state/application/reducer'
@@ -25,11 +24,6 @@ export default function useAccountRiskCheck(account: string | null | undefined)
             .then((data) => {
               if (data.block) {
                 dispatch(setOpenModal(ApplicationModal.BLOCKED_ACCOUNT))
-                sendEvent({
-                  category: 'Address Screening',
-                  action: 'blocked',
-                  label: account,
-                })
               }
             })
             .catch(() => dispatch(setOpenModal(null)))

src/hooks/useLocationLinkProps.ts

-import { sendEvent } from 'components/analytics'
 import { SupportedLocale } from 'constants/locales'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { stringify } from 'qs'
@@ -6,15 +5,12 @@ import { useMemo } from 'react'
 import type { To } from 'react-router-dom'
 import { useLocation } from 'react-router-dom'
 
-import { useActiveLocale } from './useActiveLocale'
-
 export function useLocationLinkProps(locale: SupportedLocale | null): {
   to?: To
   onClick?: () => void
 } {
   const location = useLocation()
   const qs = useParsedQueryString()
-  const activeLocale = useActiveLocale()
 
   return useMemo(
     () =>
@@ -25,14 +21,7 @@ export function useLocationLinkProps(locale: SupportedLocale | null): {
               ...location,
               search: stringify({ ...qs, lng: locale }),
             },
-            onClick: () => {
-              sendEvent({
-                category: 'Localization',
-                action: 'Switch Locale',
-                label: `${activeLocale} -> ${locale}`,
-              })
-            },
           },
-    [location, qs, activeLocale, locale]
+    [location, qs, locale]
   )
 }

src/pages/App.tsx

@@ -22,7 +22,6 @@ import { getEnvName, isBrowserRouterEnabled } from 'utils/env'
 import { getCurrentPageFromLocation } from 'utils/urlRoutes'
 import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
-import { useAnalyticsReporter } from '../components/analytics'
 import ErrorBoundary from '../components/ErrorBoundary'
 import NavBar, { PageTabs } from '../components/NavBar'
 import Polling from '../components/Polling'
@@ -122,8 +121,6 @@ export default function App() {
   const [scrolledState, setScrolledState] = useState(false)
   const infoPoolPageEnabled = useInfoPoolPageEnabled()
 
-  useAnalyticsReporter()
-
   useEffect(() => {
     window.scrollTo(0, 0)
     setScrolledState(false)

src/state/routing/useRoutingAPITrade.ts

 import { skipToken } from '@reduxjs/toolkit/query/react'
 import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
-import { IMetric, MetricLoggerUnit, setGlobalMetric } from '@uniswap/smart-order-router'
-import { sendTiming } from 'components/analytics'
 import { AVERAGE_L1_BLOCK_TIME } from 'constants/chainInfo'
 import { ZERO_PERCENT } from 'constants/misc'
 import { useRoutingAPIArguments } from 'lib/hooks/routing/useRoutingAPIArguments'
@@ -136,20 +134,3 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
     tradeResult?.trade,
   ])
 }
-
-// only want to enable this when app hook called
-class GAMetric extends IMetric {
-  putDimensions() {
-    return
-  }
-
-  putMetric(key: string, value: number, unit?: MetricLoggerUnit) {
-    sendTiming('Routing API', `${key} | ${unit}`, value, 'client')
-  }
-
-  setProperty() {
-    return
-  }
-}
-
-setGlobalMetric(new GAMetric())

src/tracing/index.ts

-import 'components/analytics'
-
 import * as Sentry from '@sentry/react'
 import { BrowserTracing } from '@sentry/tracing'
 import { SharedEventName } from '@uniswap/analytics-events'

yarn.lock

@@ -17461,11 +17461,6 @@ react-focus-lock@^2.3.1:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-ga4@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-1.4.1.tgz#6ee2a2db115ed235b2f2092bc746b4eeeca9e206"
-  integrity sha512-ioBMEIxd4ePw4YtaloTUgqhQGqz5ebDdC4slEpLgy2sLx1LuZBC9iYCwDymTXzcntw6K1dHX183ulP32nNdG7w==
-
 react-infinite-scroll-component@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz#7e511e7aa0f728ac3e51f64a38a6079ac522407f"