Change to GA4 and fix build timeouts (#18)

* Add Google Analytics * Fix Google Analytics pathname tracking * Add GA to Dockerfile * Increase build job runtime and use GA4 instead of UA - Cleanup unused components
CAPTxTreeckle · Feb 13, 2024 · b639364 · b639364
1 parent 8d3cf5c
commit b639364
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/.github/workflows/frontend-beta.yml b/.github/workflows/frontend-beta.yml
@@ -18,6 +18,7 @@ jobs:
           username: ${{ secrets.SSH_USERNAME }}
           key: ${{ secrets.SSH_KEY }}
           passphrase: ${{ secrets.SSH_PASSPHRASE }}
+          command_timeout: 60m
           script: |
             ls
             cd /home/treeckle/Treeckle-3.0

diff --git a/frontend/package.json b/frontend/package.json
@@ -30,7 +30,7 @@
     "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.1",
     "react-easy-crop": "^4.3.0",
-    "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-google-login": "^5.2.2",
     "react-hook-form": "^7.31.3",
     "react-intersection-observer": "^9.2.2",
@@ -97,6 +97,7 @@
     "start:https": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",
     "prebuild": "yarn format && yarn lint --fix",
     "build": "react-scripts build",
+    "help": "react-scripts list",
     "postbuild": "gzipper compress --verbose --brotli --remove-larger --exclude mp4,pdf ./build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

diff --git a/frontend/src/components/ga-provider.tsx b/frontend/src/components/ga-provider.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { useLocation, RouteComponentProps } from "react-router-dom";
-import ReactGA from "react-ga";
+import { useLocation } from "react-router-dom";
+import ReactGA from "react-ga4";
 
 ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID ?? "");
 
@@ -10,12 +10,12 @@ export default function GaProvider() {
   useEffect(() => {
     if (!location) return;
     ReactGA.set({ page: location.pathname });
-    ReactGA.pageview(location.pathname);
+    ReactGA.send({ hitType: "pageview", page: location.pathname });
   }, [location]);
 
   useEffect(() => {
     ReactGA.set({ page: window.location.pathname });
-    ReactGA.pageview(window.location.pathname);
+    ReactGA.send({ hitType: "pageview", page: window.location.pathname });
   }, []);
 
   return <div />;

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -8392,10 +8392,10 @@ 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-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
 
 react-google-login@^5.2.2:
   version "5.2.2"