utility to setup ga tagging for gateway (#165)

* changes: utility to setup ga taggin for gateway * updated function name * updated to ga4 from UA * removed console
bobanetwork · May 18, 2022 · b233ad0 · b233ad0
1 parent f301db7
commit b233ad0
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 2 deletions.
diff --git a/packages/boba/gateway/.env.example b/packages/boba/gateway/.env.example
@@ -7,4 +7,5 @@ REACT_APP_ENV=dev
 REACT_APP_CHAIN=mainnet
 REACT_APP_STATUS=normal
 REACT_APP_SPEED_CHECK=
-REACT_APP_AIRDROP=
+REACT_APP_AIRDROP=
+REACT_APP_GA4_MEASUREMENT_ID=
diff --git a/packages/boba/gateway/package.json b/packages/boba/gateway/package.json
@@ -46,6 +46,7 @@
     "react-copy-to-clipboard": "^5.0.4",
     "react-datepicker": "^4.6.0",
     "react-dom": "^17.0.2",
+    "react-ga4": "^1.4.1",
     "react-multi-carousel": "^2.6.5",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",

diff --git a/packages/boba/gateway/src/containers/home/Home.js b/packages/boba/gateway/src/containers/home/Home.js
@@ -109,6 +109,7 @@ import Alert from 'components/alert/Alert'
 
 import { POLL_INTERVAL } from 'util/constant'
 import LayerSwitcher from 'components/mainMenu/layerSwitcher/LayerSwitcher'
+import { trackPageView } from 'util/googleAnalytics'
 
 require('dotenv').config()
 
@@ -231,6 +232,11 @@ function Home() {
     }
   }, [ dispatch, accountEnabled, maintenance ])
 
+  useEffect(() => {
+    trackPageView(pageDisplay)
+  }, [pageDisplay])
+
+
   console.log("Home - account enabled:", accountEnabled, "layer:", layer, "Base enabled:", baseEnabled)
 
   return (

diff --git a/packages/boba/gateway/src/layout/index.js b/packages/boba/gateway/src/layout/index.js
@@ -27,6 +27,7 @@ import Notification from 'containers/notification/Notification'
 
 import { BrowserRouter, Routes, Route } from "react-router-dom"
 import { selectModalState } from 'selectors/uiSelector'
+import { initGa } from 'util/googleAnalytics'
 
 function App () {
 
@@ -253,7 +254,11 @@ function App () {
   useEffect(() => {
     const themeFromLocalStorage = localStorage.getItem('theme')
     dispatch(setTheme(themeFromLocalStorage))
-  }, [dispatch])
+
+    initGa();
+
+  }, [ dispatch ])
+
 
   return (
     <ThemeProvider theme={MUItheme}>

diff --git a/packages/boba/gateway/src/util/googleAnalytics.js b/packages/boba/gateway/src/util/googleAnalytics.js
@@ -0,0 +1,13 @@
+import ReactGA from "react-ga4"
+
+export const initGa = () => {
+  ReactGA.initialize(process.env.REACT_APP_GA4_MEASUREMENT_ID);
+}
+
+export const trackPageView = (pageName) => {
+  ReactGA.send({
+    hitType: "pageview",
+    page: pageName,
+    title: pageName
+  });
+}
diff --git a/yarn.lock b/yarn.lock
@@ -19542,6 +19542,11 @@ react-fast-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+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-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"