Add Google Analytics property (#16)

CAPTxTreeckle · Feb 13, 2024 · 23a9dd4 · 23a9dd4
1 parent 83dc2ef
commit 23a9dd4
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 0 deletions.
diff --git a/frontend/.env.beta b/frontend/.env.beta
@@ -2,4 +2,5 @@ REACT_APP_API_URL=https://beta.treeckle.com/api
 REACT_APP_GOOGLE_CLIENT_ID=858509158388-d943lj9isgh7oaumkoj65kqvq1ehgt14.apps.googleusercontent.com
 REACT_APP_FACEBOOK_APP_ID=498179211295170
 REACT_APP_MICROSOFT_CLIENT_ID=f34b1cfb-df14-41b5-88b4-4fe97176e7f1
+REACT_APP_GA_TRACKING_ID="G-KQ4GRX3CT1"
 PUBLIC_URL=https://beta.treeckle.com/
diff --git a/frontend/.env.development b/frontend/.env.development
@@ -2,4 +2,5 @@ REACT_APP_API_URL=http://localhost:8000/api
 REACT_APP_GOOGLE_CLIENT_ID=858509158388-d943lj9isgh7oaumkoj65kqvq1ehgt14.apps.googleusercontent.com
 REACT_APP_FACEBOOK_APP_ID=498179211295170
 REACT_APP_MICROSOFT_CLIENT_ID=f34b1cfb-df14-41b5-88b4-4fe97176e7f1
+REACT_APP_GA_TRACKING_ID="G-KQ4GRX3CT1"
 PUBLIC_URL="https://localhost:3000"
diff --git a/frontend/.env.production b/frontend/.env.production
@@ -2,4 +2,5 @@ REACT_APP_API_URL=https://treeckle.com/api
 REACT_APP_GOOGLE_CLIENT_ID=858509158388-d943lj9isgh7oaumkoj65kqvq1ehgt14.apps.googleusercontent.com
 REACT_APP_FACEBOOK_APP_ID=498179211295170
 REACT_APP_MICROSOFT_CLIENT_ID=f34b1cfb-df14-41b5-88b4-4fe97176e7f1
+REACT_APP_GA_TRACKING_ID="G-G4MX399WJL"
 PUBLIC_URL=https://treeckle.com
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,6 +30,7 @@
     "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.1",
     "react-easy-crop": "^4.3.0",
+    "react-ga": "^3.3.1",
     "react-google-login": "^5.2.2",
     "react-hook-form": "^7.31.3",
     "react-intersection-observer": "^9.2.2",

diff --git a/frontend/src/components/ga-provider.tsx b/frontend/src/components/ga-provider.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+import { useLocation, RouteComponentProps } from "react-router-dom";
+import ReactGA from "react-ga";
+
+ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID ?? "");
+
+export default function GaProvider() {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (!location) return;
+    ReactGA.set({ page: location.pathname });
+    ReactGA.pageview(location.pathname);
+  }, [location]);
+
+  useEffect(() => {
+    ReactGA.set({ page: window.location.pathname });
+    ReactGA.pageview(window.location.pathname);
+  }, []);
+
+  return <div />;
+}
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
@@ -39,6 +39,7 @@ import {
   TERMS_OF_USE_PATH,
 } from "./paths";
 import RoleRestrictedRoute from "./role-restricted-route";
+import GaProvider from "../components/ga-provider";
 
 // Code splitting
 const DashboardPage = lazy(() => import("../pages/dashboard-page"));
@@ -244,6 +245,7 @@ function Routes() {
           </Suspense>
         </AppLayoutContainer>
       </LastLocationProvider>
+      <GaProvider />
     </Router>
   );
 }

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -8392,6 +8392,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-ga@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
+  integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
+
 react-google-login@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/react-google-login/-/react-google-login-5.2.2.tgz#a20b46440c6c1610175ef75baf427118ff0e9859"