google analyics now works with react router dom

jmaldon1 · Feb 2, 2021 · 4b172f9 · 4b172f9
1 parent f34a5b5
commit 4b172f9
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 20 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Josh Maldonado's personal site"
-    />
+    <meta name="description" content="Josh Maldonado's personal site" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -26,6 +23,21 @@
     -->
     <title>Josh Maldonado</title>
 
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-814B22G7SF"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-814B22G7SF');
+    </script>
+
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // MIT License
@@ -37,16 +49,22 @@
       // When the single page app is loaded further down in this file,
       // the correct url will be waiting in the browser's history for
       // the single page app to route accordingly.
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) { 
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-              l.pathname.slice(0, -1) + decoded + l.hash
+      (function (l) {
+        if (l.search[1] === '/') {
+          var decoded = l.search
+            .slice(1)
+            .split('&')
+            .map(function (s) {
+              return s.replace(/~and~/g, '&');
+            })
+            .join('?');
+          window.history.replaceState(
+            null,
+            null,
+            l.pathname.slice(0, -1) + decoded + l.hash,
           );
         }
-      }(window.location))
+      })(window.location);
     </script>
   </head>
   <body>

diff --git a/src/app/containers/HomePage/index.tsx b/src/app/containers/HomePage/index.tsx
@@ -30,10 +30,6 @@ import { PersonalHeader } from './components/PersonalHeader';
 import ReactGA from 'react-ga';
 import _ from 'lodash';
 
-// Google Analytics
-ReactGA.initialize('G-814B22G7SF');
-ReactGA.pageview(window.location.pathname + window.location.search);
-
 interface Props {}
 
 export const HomePage = memo((props: Props) => {
@@ -46,6 +42,16 @@ export const HomePage = memo((props: Props) => {
   const showHint = useSelector(selectShowHint);
   const randomNumber = useSelector(selectRandomNumber);
 
+  const useEffectOnMountGoogleAnayltics = (effect: React.EffectCallback) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+  };
+  useEffectOnMountGoogleAnayltics(() => {
+    // Google Analytics
+    ReactGA.initialize('G-814B22G7SF');
+    ReactGA.pageview(window.location.pathname + window.location.search);
+  });
+
   const useEffectOnMount = (effect: React.EffectCallback) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(effect, [itemDetails]);

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -16,8 +16,23 @@ import { HomePage } from './containers/HomePage/Loadable';
 import { NotFoundPage } from './components/NotFoundPage/Loadable';
 import { useTranslation } from 'react-i18next';
 
+import { useTracking } from './useTracking';
+
+const Routes = () => {
+  // Google Analytics
+  useTracking();
+
+  return (
+    <Switch>
+      <Route exact path="/" component={HomePage} />
+      <Route component={NotFoundPage} />
+    </Switch>
+  );
+};
+
 export function App() {
   const { i18n } = useTranslation();
+
   return (
     <BrowserRouter basename="/josh.maldonado.githib.io">
       <Helmet
@@ -28,10 +43,7 @@ export function App() {
         <meta name="description" content="Josh Maldonado's personal website" />
       </Helmet>
 
-      <Switch>
-        <Route exact path="/" component={HomePage} />
-        <Route component={NotFoundPage} />
-      </Switch>
+      <Routes />
       <GlobalStyle />
     </BrowserRouter>
   );

diff --git a/src/app/useTracking.ts b/src/app/useTracking.ts
@@ -0,0 +1,38 @@
+/**
+ * Google Analytics tracking hook.
+ */
+
+import { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+
+declare global {
+  interface Window {
+    gtag?: (
+      key: string,
+      trackingId: string,
+      config: { page_path: string },
+    ) => void;
+  }
+}
+
+export const useTracking = (
+  trackingId: string | undefined = 'G-814B22G7SF',
+) => {
+  const { listen } = useHistory();
+
+  useEffect(() => {
+    const unlisten = listen(location => {
+      if (!window.gtag) return;
+      if (!trackingId) {
+        console.log(
+          'Tracking not enabled, as `trackingId` was not given and there is no `GA_MEASUREMENT_ID`.',
+        );
+        return;
+      }
+
+      window.gtag('config', trackingId, { page_path: location.pathname });
+    });
+
+    return unlisten;
+  }, [trackingId, listen]);
+};