we

frontend/src/App.js

@@ -7,6 +7,7 @@ import Loader from './components/shared/Loader';
 import ScrollToTop from './components/root/ScrollToTop';
 
 import ReactGA from 'react-ga';
+import usePageTracking from './hooks/usePageTracking';
 
 const Home = lazy(() => import('./pages/Home'));
 const Portfolio = lazy(() => import('./pages/Portfolio'));
@@ -25,11 +26,6 @@ const CaseStudyStrata = lazy(() => import('./pages/CaseStudyStrata'));
 const PrivacyPolicy = lazy(() => import('./pages/PrivacyPolicy'));
 const WorkWithUs = lazy(() => import('./pages/WorkWithUs'));
 
-const trackingId = process.env.GOOGLE_TRACKING_ID;
-
-//Initalize analytics
-ReactGA.initialize(trackingId);
-
 // Navigation Links
 const links = [
   {
@@ -73,6 +69,9 @@ function App() {
   //scroll to Contact segment
   const forwardedRef = useRef(null);
 
+  //initialize analytics page tracking
+  usePageTracking();
+
   //scroll to Contact fn
   function scrollToView(event) {
     event.preventDefault();

frontend/src/hooks/usePageTracking.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import ReactGA from 'react-ga';
+import { useLocation } from 'react-router';
+
+const initialiseAnalytics = () => {
+    const TRACKING_ID = process.env.GOOGLE_TRACKING_ID;
+    ReactGA.initialize(TRACKING_ID);
+  }
+export const usePageTracking = () => {
+    const location = useLocation();
+    const [initialized, setInitialized] = useState(false);
+  
+    useEffect(() => {
+      initialiseAnalytics();
+      setInitialized(true);
+    }, []);
+  
+    useEffect(() => {
+      if (initialized) {
+        ReactGA.pageview(location.pathname + location.search);
+      }
+    }, [initialized, location]);
+  }
+
+  export default usePageTracking;