Add google analytics (#296)

package.json

@@ -49,6 +49,7 @@
     "react-device-detect": "^1.9.10",
     "react-dom": "^16.9.0",
     "react-feather": "^2.0.3",
+    "react-ga": "^3.3.0",
     "react-iframe": "^1.8.0",
     "react-parallax": "^2.2.4",
     "react-popper": "^2.2.3",

src/App.js

@@ -27,6 +27,7 @@ import { Updater as LocalStorageContextUpdater } from './contexts/LocalStorage'
 import { Updater as TokenDataContextUpdater } from './contexts/TokenData'
 import { Updater as PairDataContextUpdater } from './contexts/PairData'
 import { Updater as PoolDataContextUpdater } from './contexts/PoolData'
+import GoogleAnalyticsReporter from './components/GoogleAnalyticsReporter'
 
 const AppWrapper = styled.div`
   position: relative;
@@ -180,6 +181,7 @@ const LayoutWrapper = props => {
   if (networksInfo !== networkInfoFromURL) return null
   return (
     <AppLogicWrapper>
+      <GoogleAnalyticsReporter />
       <Updaters />
       <KyberSwapAnounce />
       <ContentWrapper open={props.savedOpen}>

src/components/GoogleAnalyticsReporter/index.jsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react'
+import ReactGA from 'react-ga'
+import { useHistory, useParams } from 'react-router-dom'
+
+export default function GoogleAnalyticsReporter() {
+  const { network: currentNetworkURL } = useParams()
+  const history = useHistory()
+  let currentUrl = currentNetworkURL ? history.location.pathname.split('/')[2] : history.location.pathname.split('/')[1]
+  const URLToTrack = ['analytics', currentNetworkURL, currentUrl].filter(Boolean).join('/')
+
+  useEffect(() => {
+    ReactGA.pageview(URLToTrack)
+  }, [URLToTrack])
+
+  return null
+}

src/index.js

@@ -10,6 +10,13 @@ import ApplicationContextProvider from './contexts/Application'
 import NetworkInfoContextProvider from './contexts/NetworkInfo'
 import UserContextProvider from './contexts/User'
 import App from './App'
+import ReactGA from 'react-ga'
+
+const initGoogleAnalytics = () => {
+  ReactGA.initialize('UA-207888714-1')
+}
+
+initGoogleAnalytics()
 
 function ContextProviders({ children }) {
   return (

yarn.lock

@@ -12237,6 +12237,11 @@ react-focus-lock@^2.5.1:
     use-callback-ref "^1.2.5"
     use-sidecar "^1.0.5"
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-iframe@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/react-iframe/-/react-iframe-1.8.0.tgz#8c78f2c59b894ca5605fa7e45e61e27e57e96091"