Add GA instrumentation to v2 (Uniswap#769)

src/components/ExchangePage/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useContext } from 'react'
+import ReactGA from 'react-ga'
 import { ThemeContext } from 'styled-components'
 import { parseEther, parseUnits } from '@ethersproject/units'
 import { JSBI, Percent, TokenAmount, TradeType, WETH, Fraction } from '@uniswap/sdk'
@@ -75,7 +76,7 @@ const DEFAULT_DEADLINE_FROM_NOW = 60 * 20
 const ALLOWED_SLIPPAGE_MEDIUM = 100
 const ALLOWED_SLIPPAGE_HIGH = 500
 
-interface ExchangePageProps extends RouteComponentProps<{}> {
+interface ExchangePageProps extends RouteComponentProps {
   sendingInput: boolean
   params: QueryParams
 }
@@ -384,6 +385,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
         .sendTransaction({ to: recipient.toString(), value: BigNumber.from(parsedAmounts[Field.INPUT].raw.toString()) })
         .then(response => {
           setTxHash(response.hash)
+          ReactGA.event({ category: 'ExchangePage', action: 'Send', label: tokens[Field.INPUT]?.symbol })
           addTransaction(response, {
             summary:
               'Send ' +
@@ -520,6 +522,11 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
           gasLimit: calculateGasMargin(estimatedGasLimit)
         }).then(response => {
           setTxHash(response.hash)
+          ReactGA.event({
+            category: 'ExchangePage',
+            label: sending && recipient !== account ? 'Swap w/ Send' : 'Swap',
+            action: [tokens[Field.INPUT]?.symbol, tokens[Field.OUTPUT]?.symbol].join(';')
+          })
           addTransaction(response, {
             summary:
               'Swap ' +

src/components/TxnPopup/index.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useState } from 'react'
-
 import { AlertCircle, CheckCircle } from 'react-feather'
 
 import styled from 'styled-components'

src/index.tsx

@@ -33,8 +33,6 @@ if (process.env.NODE_ENV === 'production') {
   ReactGA.initialize('test', { testMode: true, debug: true })
 }
 
-ReactGA.pageview(window.location.pathname + window.location.search)
-
 function Updaters() {
   return (
     <>

src/pages/App.tsx

@@ -1,6 +1,7 @@
-import React, { Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import styled from 'styled-components'
-import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
+import ReactGA from 'react-ga'
+import { BrowserRouter, Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom'
 
 import Header from '../components/Header'
 import Footer from '../components/Footer'
@@ -91,13 +92,22 @@ const StyledRed = styled.div`
   }
 `
 
+// fires a GA pageview every time the route changes
+function GoogleAnalyticsReporter({ location: { pathname, search } }: RouteComponentProps) {
+  useEffect(() => {
+    ReactGA.pageview(`${pathname}${search}`)
+  }, [pathname, search])
+  return null
+}
+
 export default function App() {
   const params = getAllQueryParams()
 
   return (
     <>
       <Suspense fallback={null}>
         <BrowserRouter>
+          <Route component={GoogleAnalyticsReporter} />
           <AppWrapper>
             <HeaderWrapper>
               <Header />

src/pages/Pool/AddLiquidity.tsx

@@ -1,4 +1,5 @@
 import React, { useReducer, useState, useCallback, useEffect, useContext } from 'react'
+import ReactGA from 'react-ga'
 import styled, { ThemeContext } from 'styled-components'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { parseUnits, parseEther } from '@ethersproject/units'
@@ -497,6 +498,11 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
           ...(value ? { value } : {}),
           gasLimit: calculateGasMargin(estimatedGasLimit)
         }).then(response => {
+          ReactGA.event({
+            category: 'Liquidity',
+            action: 'Add',
+            label: [tokens[Field.INPUT]?.symbol, tokens[Field.OUTPUT]?.symbol].join(';')
+          })
           setTxHash(response.hash)
           addTransaction(response, {
             summary:

src/pages/Pool/RemoveLiquidity.tsx

@@ -1,4 +1,5 @@
 import React, { useReducer, useState, useCallback, useEffect, useContext } from 'react'
+import ReactGA from 'react-ga'
 import styled, { ThemeContext } from 'styled-components'
 import { parseUnits } from '@ethersproject/units'
 import { Contract } from '@ethersproject/contracts'
@@ -490,6 +491,11 @@ export default function RemoveLiquidity({ token0, token1 }: { token0: string; to
         method(...args, {
           gasLimit: calculateGasMargin(estimatedGasLimit)
         }).then(response => {
+          ReactGA.event({
+            category: 'Liquidity',
+            action: 'Remove',
+            label: [tokens[Field.TOKEN0]?.symbol, tokens[Field.TOKEN1]?.symbol].join(';')
+          })
           setPendingConfirmation(false)
           setTxHash(response.hash)
           addTransaction(response, {

src/theme/components.tsx

@@ -1,3 +1,5 @@
+import React, { HTMLProps, useCallback } from 'react'
+import ReactGA from 'react-ga'
 import styled, { keyframes } from 'styled-components'
 import { darken } from 'polished'
 import { X } from 'react-feather'
@@ -36,10 +38,7 @@ export const CloseIcon = styled(X)<{ onClick: () => void }>`
   cursor: pointer;
 `
 
-export const Link = styled.a.attrs({
-  target: '_blank',
-  rel: 'noopener noreferrer'
-})`
+const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
   color: ${({ theme }) => theme.primary1};
@@ -59,6 +58,31 @@ export const Link = styled.a.attrs({
   }
 `
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function Link({ onClick, as, ref, target, href, rel, ...rest }: HTMLProps<HTMLAnchorElement>) {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      onClick && onClick(event) // first call back into the original onClick
+      if (!href) return
+      event.preventDefault()
+      // send a ReactGA event and then trigger a location change
+      ReactGA.outboundLink({ label: href }, () => {
+        window.location.href = href
+      })
+    },
+    [href, onClick]
+  )
+  return (
+    <StyledLink
+      target={target ?? '_blank'}
+      rel={rel ?? 'noopener noreferrer'}
+      href={href}
+      onClick={handleClick}
+      {...rest}
+    />
+  )
+}
+
 const rotate = keyframes`
   from {
     transform: rotate(0deg);