593 google analytics not displaying page specific hits (#806)

* feat: update gtags * feat: updated tags with mapped routes
neurostuff · Aug 12, 2024 · 0308aa1 · 0308aa1
1 parent a19dd3f
commit 0308aa1
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 4 deletions.
diff --git a/compose/neurosynth-frontend/package-lock.json b/compose/neurosynth-frontend/package-lock.json
diff --git a/compose/neurosynth-frontend/package.json b/compose/neurosynth-frontend/package.json
@@ -92,6 +92,7 @@
         "@testing-library/dom": "^8.3.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
+        "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^12.8.3",
         "@types/node": "^18.6.1",
         "cypress": "^13.2.0",

diff --git a/compose/neurosynth-frontend/public/index.html b/compose/neurosynth-frontend/public/index.html
@@ -24,6 +24,7 @@
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
             crossorigin="anonymous"
         />
+
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-0L9Y0HT9NR"></script>
         <script type="text/javascript">

diff --git a/compose/neurosynth-frontend/src/App.tsx b/compose/neurosynth-frontend/src/App.tsx
@@ -1,6 +1,7 @@
 import Close from '@mui/icons-material/Close';
 import { IconButton } from '@mui/material';
 import { AxiosError } from 'axios';
+import useGoogleAnalytics from 'hooks/useGoogleAnalytics';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
 import { useEffect, useRef } from 'react';
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query';
@@ -40,6 +41,7 @@ declare global {
 function App() {
     const notistackRef = useRef<SnackbarProvider>(null);
     useGetToken();
+    useGoogleAnalytics();
 
     const location = useLocation();
     useEffect(() => {

diff --git a/compose/neurosynth-frontend/src/hooks/useGoogleAnalytics.spec.tsx b/compose/neurosynth-frontend/src/hooks/useGoogleAnalytics.spec.tsx
@@ -0,0 +1,30 @@
+import { routeMapping } from './useGoogleAnalytics';
+
+describe('useGoogleAnalytics', () => {
+    test.each`
+        path                                                             | expected
+        ${'/projects/g7VRaCLw3iZJ/curation'}                             | ${'curation page'}
+        ${'/projects/g7VRaCLw3iZJ/curation/import'}                      | ${'curation import page'}
+        ${'/projects/g7VRaCLw3iZJ/curation/import?pageOfResults=2'}      | ${'curation import page'}
+        ${'/projects/g7VRaCLw3iZJ/extraction'}                           | ${'extraction page'}
+        ${'/projects/g7VRaCLw3iZJ/extraction/annotations'}               | ${'annotations page'}
+        ${'/projects'}                                                   | ${'projects page'}
+        ${'/projects/g7VRaCLw3iZJ/project'}                              | ${'project page'}
+        ${'/projects/6zW6TJtzpFjr/meta-analyses'}                        | ${'project meta-analyses page'}
+        ${'/projects/98ZZj2vbpySw/meta-analyses/8K6KhGEfTy6H'}           | ${'project meta-analysis page'}
+        ${'/projects/new/sleuth'}                                        | ${'sleuth import page'}
+        ${'/base-studies'}                                               | ${'base-studies page'}
+        ${'/meta-analyses'}                                              | ${'meta-analyses page'}
+        ${'/meta-analyses/BdCib6uM3QDX'}                                 | ${'meta-analysis page'}
+        ${'/base-studies/FSfE96JVaPuU/5neCyoMwEvrM'}                     | ${'base-study page'}
+        ${'/base-studies/FSfE96JVaPuU'}                                  | ${'base-study page'}
+        ${'/projects/g7VRaCLw3iZJ/extraction/studies/v7RBrDFEbAC7/edit'} | ${'edit project study page'}
+        ${'/projects/g7VRaCLw3iZJ/extraction/studies/v7RBrDFEbAC7'}      | ${'project study page'}
+        ${'/user-profile'}                                               | ${'user profile page'}
+        ${'/forbidden'}                                                  | ${'forbidden page'}
+        ${'/termsandconditions'}                                         | ${'terms and conditions page'}
+        ${'/not-found'}                                                  | ${'not found page'}
+    `('transforms $path to $expected', ({ path, expected }) => {
+        expect(routeMapping(path)).toEqual(expected);
+    });
+});
diff --git a/compose/neurosynth-frontend/src/hooks/useGoogleAnalytics.tsx b/compose/neurosynth-frontend/src/hooks/useGoogleAnalytics.tsx
@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const routeMapping = (path: string) => {
+    if (/^\/projects\/.*\/curation\/import.*$/g.test(path)) {
+        return 'curation import page';
+    } else if (/^\/projects\/.*\/curation$/g.test(path)) {
+        return 'curation page';
+    } else if (/^\/projects\/.*\/project$/g.test(path)) {
+        return 'project page';
+    } else if (/^\/projects$/g.test(path)) {
+        return 'projects page';
+    } else if (/^\/projects\/.*\/meta-analyses\/.*/g.test(path)) {
+        return 'project meta-analysis page';
+    } else if (/^\/projects\/.*\/meta-analyses$/g.test(path)) {
+        return 'project meta-analyses page';
+    } else if (/^\/projects\/new\/sleuth$/g.test(path)) {
+        return 'sleuth import page';
+    } else if (/^\/base-studies$/g.test(path)) {
+        return 'base-studies page';
+    } else if (/^\/base-studies\/.*$/g.test(path)) {
+        return 'base-study page';
+    } else if (/^\/meta-analyses\/.*$/g.test(path)) {
+        return 'meta-analysis page';
+    } else if (/^\/meta-analyses$/g.test(path)) {
+        return 'meta-analyses page';
+    } else if (/^\/projects\/.*\/extraction\/studies\/.*\/edit$/g.test(path)) {
+        return 'edit project study page';
+    } else if (/^\/projects\/.*\/extraction\/studies\/.*$/g.test(path)) {
+        return 'project study page';
+    } else if (/^\/projects\/.*\/extraction\/annotations$/g.test(path)) {
+        return 'annotations page';
+    } else if (/^\/projects\/.*\/extraction$/g.test(path)) {
+        return 'extraction page';
+    } else if (/^\/user-profile$/g.test(path)) {
+        return 'user profile page';
+    } else if (/^\/forbidden$/g.test(path)) {
+        return 'forbidden page';
+    } else if (/^\/termsandconditions$/g.test(path)) {
+        return 'terms and conditions page';
+    } else {
+        return 'not found page';
+    }
+};
+
+const useGoogleAnalytics = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+        if (window.gtag) {
+            window.gtag('event', 'page_view', {
+                page_path: routeMapping(location.pathname + location.search),
+            });
+        }
+    }, [location]);
+};
+
+export default useGoogleAnalytics;
diff --git a/compose/neurosynth-frontend/src/pages/Project/ProjectPage.tsx b/compose/neurosynth-frontend/src/pages/Project/ProjectPage.tsx
@@ -56,10 +56,10 @@ const ProjectPage: React.FC = (props) => {
         !getProjectIsLoading && getProjectIsError
     );
 
-    const tab = useMemo(
-        () => (location.pathname.includes('meta-analyses') ? 1 : 0),
-        [location.pathname]
-    );
+    const tab = useMemo(() => {
+        if (!metaAnalysesTabEnabled) return 0;
+        return location.pathname.includes('meta-analyses') ? 1 : 0;
+    }, [location.pathname, metaAnalysesTabEnabled]);
 
     return (
         <StateHandlerComponent isLoading={getProjectIsLoading} isError={getProjectIsError}>