react-ga

frontend/package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga": "^3.3.1",
+    "react-ga4": "^2.1.0",
     "react-icons": "^4.11.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.16.0",

frontend/src/App.js

@@ -12,17 +12,15 @@ import SearchComponent from './Components/SearchComponent'
 import Plays from './Containers/Plays'
 import SearchResults from './Containers/SearchResults'
 import DonationSuccess from './Containers/DonationSuccess'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import ScrollToTop from './Components/ScrollToTop'
-import { AnimatePresence } from 'framer-motion'
 const TRACKING_ID = 'G-KB6YRJSC6G'
 function App () {
   const [showSearch, setShowSearch] = useState(false)
 
   useEffect(() => {
-    ReactGA.initialize(TRACKING_ID, { debug: false })
-    ReactGA.pageview(window.location.pathname + window.location.search)
-    console.log('ReactGA initialized and pageview sent')
+    ReactGA.initialize(TRACKING_ID)
+    ReactGA.send({ hitType: 'pageview', page: window.location.pathname })
   }, [])
   return (
     <div className='w-full bg-white relative'>

frontend/yarn.lock

@@ -8128,6 +8128,11 @@ react-ga@^3.3.1:
   resolved "https://registry.npmjs.org/react-ga/-/react-ga-3.3.1.tgz"
   integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
 
+react-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
+
 react-icons@^4.11.0:
   version "4.11.0"
   resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz"