From 1c3ce8fdb79ce6ef6c7f84abc40bd11ebdded024 Mon Sep 17 00:00:00 2001 From: eddie <66155195+just-toby@users.noreply.github.com> Date: Tue, 12 Sep 2023 13:23:49 -0700 Subject: [PATCH] fix: remove GA code (#7303) * feat: move ga events to amplitude * fix: remove GA code --- package.json | 1 - public/index.html | 2 + src/components/Popups/ClaimPopup.tsx | 9 -- src/components/SearchModal/CurrencySearch.tsx | 11 --- .../analytics/GoogleAnalyticsProvider.tsx | 53 ------------ src/components/analytics/index.ts | 83 ------------------- src/hooks/useAccountRiskCheck.ts | 6 -- src/hooks/useLocationLinkProps.ts | 13 +-- src/pages/App.tsx | 3 - src/state/routing/useRoutingAPITrade.ts | 19 ----- src/tracing/index.ts | 2 - yarn.lock | 5 -- 12 files changed, 3 insertions(+), 204 deletions(-) delete mode 100644 src/components/analytics/GoogleAnalyticsProvider.tsx diff --git a/package.json b/package.json index bfc5da15f8..4a02807719 100644 --- a/package.json +++ b/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", diff --git a/public/index.html b/public/index.html index 328c4f3456..ddfc7628c9 100644 --- a/public/index.html +++ b/public/index.html @@ -36,6 +36,8 @@ --> + + diff --git a/src/components/Popups/ClaimPopup.tsx b/src/components/Popups/ClaimPopup.tsx index bf682e1899..f48fd6886c 100644 --- a/src/components/Popups/ClaimPopup.tsx +++ b/src/components/Popups/ClaimPopup.tsx @@ -1,7 +1,6 @@ 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. diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx index ecd378fc6f..010d60661d 100644 --- a/src/components/SearchModal/CurrencySearch.tsx +++ b/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)) diff --git a/src/components/analytics/GoogleAnalyticsProvider.tsx b/src/components/analytics/GoogleAnalyticsProvider.tsx deleted file mode 100644 index 82ffb90627..0000000000 --- a/src/components/analytics/GoogleAnalyticsProvider.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/* 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) - } -} diff --git a/src/components/analytics/index.ts b/src/components/analytics/index.ts index ec93396d34..9555829769 100644 --- a/src/components/analytics/index.ts +++ b/src/components/analytics/index.ts @@ -1,91 +1,8 @@ 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) - }) - }, []) -} diff --git a/src/hooks/useAccountRiskCheck.ts b/src/hooks/useAccountRiskCheck.ts index a3f015516d..6692b8b7e3 100644 --- a/src/hooks/useAccountRiskCheck.ts +++ b/src/hooks/useAccountRiskCheck.ts @@ -1,4 +1,3 @@ -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))) diff --git a/src/hooks/useLocationLinkProps.ts b/src/hooks/useLocationLinkProps.ts index ad76d35864..c1bcd213e9 100644 --- a/src/hooks/useLocationLinkProps.ts +++ b/src/hooks/useLocationLinkProps.ts @@ -1,4 +1,3 @@ -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] ) } diff --git a/src/pages/App.tsx b/src/pages/App.tsx index b461bcbbdd..8e817eeddf 100644 --- a/src/pages/App.tsx +++ b/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) diff --git a/src/state/routing/useRoutingAPITrade.ts b/src/state/routing/useRoutingAPITrade.ts index 3bdac4d3f9..a11764f069 100644 --- a/src/state/routing/useRoutingAPITrade.ts +++ b/src/state/routing/useRoutingAPITrade.ts @@ -1,7 +1,5 @@ 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( 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()) diff --git a/src/tracing/index.ts b/src/tracing/index.ts index 3361eeaed7..a771111663 100644 --- a/src/tracing/index.ts +++ b/src/tracing/index.ts @@ -1,5 +1,3 @@ -import 'components/analytics' - import * as Sentry from '@sentry/react' import { BrowserTracing } from '@sentry/tracing' import { SharedEventName } from '@uniswap/analytics-events' diff --git a/yarn.lock b/yarn.lock index 34734b54ff..a2d8a8a09f 100644 --- a/yarn.lock +++ b/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"