From 31d2875d0463a59bd19109b285ed9cc92d8e9ad1 Mon Sep 17 00:00:00 2001
From: Nam Nguyen <hnamnguyencse@gmail.com>
Date: Thu, 17 Mar 2022 14:52:15 +0700
Subject: [PATCH] Add google analytics (#296)

---
 package.json                                     |  1 +
 src/App.js                                       |  2 ++
 src/components/GoogleAnalyticsReporter/index.jsx | 16 ++++++++++++++++
 src/index.js                                     |  7 +++++++
 yarn.lock                                        |  5 +++++
 5 files changed, 31 insertions(+)
 create mode 100644 src/components/GoogleAnalyticsReporter/index.jsx

diff --git a/package.json b/package.json
index ed7473cc7..69e46b22f 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.js b/src/App.js
index 380e78252..3973823ed 100644
--- a/src/App.js
+++ b/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}>
diff --git a/src/components/GoogleAnalyticsReporter/index.jsx b/src/components/GoogleAnalyticsReporter/index.jsx
new file mode 100644
index 000000000..27861788c
--- /dev/null
+++ b/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
+}
diff --git a/src/index.js b/src/index.js
index edbbfdce8..907b65b21 100644
--- a/src/index.js
+++ b/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 (
diff --git a/yarn.lock b/yarn.lock
index da677af67..6d4fb7b3d 100644
--- a/yarn.lock
+++ b/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"