feat: update gtags (#805)

Author: nicoalee

compose/neurosynth-frontend/public/index.html

@@ -26,22 +26,22 @@
         />
         <!-- Google tag (gtag.js) -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-0L9Y0HT9NR"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-
-            gtag('config', 'G-0L9Y0HT9NR');
+        <script type="text/javascript">
+            if (document.location.hostname === "compose.neurosynth.org") {
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', 'G-0L9Y0HT9NR');
+            }
+        </script>
 
+        <!-- Appzi: Capture Insightful Feedback -->
+        <script async src="https://w.appzi.io/w.js?token=jFjBf">
             window.appziSettings = {
                 render: { type: 'client' }
             }
         </script>
 
-        <!-- Appzi: Capture Insightful Feedback -->
-
-        <script async src="https://w.appzi.io/w.js?token=jFjBf"></script>
-
         <!-- End Appzi -->
 
         <!--

compose/neurosynth-frontend/src/App.tsx

@@ -2,11 +2,12 @@ import Close from '@mui/icons-material/Close';
 import { IconButton } from '@mui/material';
 import { AxiosError } from 'axios';
 import { SnackbarKey, SnackbarProvider } from 'notistack';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { QueryCache, QueryClient, QueryClientProvider } from 'react-query';
 import Navbar from './components/Navbar/Navbar';
 import useGetToken from './hooks/useGetToken';
 import BaseNavigation from './pages/BaseNavigation/BaseNavigation';
+import { useLocation } from 'react-router-dom';
 
 const queryClient = new QueryClient({
     defaultOptions: {
@@ -26,10 +27,29 @@ const queryClient = new QueryClient({
     }),
 });
 
+declare global {
+    interface Window {
+        gtag?: (
+            type: 'event' | 'config' | 'get' | 'set' | 'consent',
+            action: 'login' | 'page_view',
+            options?: any
+        ) => void;
+    }
+}
+
 function App() {
     const notistackRef = useRef<SnackbarProvider>(null);
     useGetToken();
 
+    const location = useLocation();
+    useEffect(() => {
+        if (window.gtag) {
+            window.gtag('event', 'page_view', {
+                page_path: `${location.pathname}${location.search}`,
+            });
+        }
+    }, [location]);
+
     const handleCloseSnackbar = (key: SnackbarKey) => (_event: React.MouseEvent) => {
         if (notistackRef?.current?.closeSnackbar) notistackRef.current?.closeSnackbar(key);
     };

compose/neurosynth-frontend/src/components/Navbar/Navbar.tsx

@@ -21,6 +21,11 @@ const Navbar: React.FC = (_props) => {
             audience: AUTH0_AUDIENCE,
             scope: 'openid profile email offline_access',
         });
+
+        if (window.gtag) {
+            window.gtag('event', 'login');
+        }
+
         navigate('/');
     };
 

compose/neurosynth-frontend/src/pages/BaseNavigation/components/ProtectedMetaAnalysesRoute.tsx

@@ -17,9 +17,6 @@ const ProtectedMetaAnalysesRoute: React.FC<{
     const { pathname } = useLocation();
     const userCanEdit = useUserCanEdit(project?.user ?? undefined);
 
-    console.log('HELLOOooooooo');
-    console.log(project?.public);
-
     const isOk = userCanEdit || project?.public;
 
     if (getProjectIsLoading || getMetaAnalysisIsLoading || getAuthIsLoading) {

compose/neurosynth-frontend/src/pages/LandingPage/LandingPage.tsx

@@ -24,6 +24,9 @@ const LandingPage = () => {
             audience: AUTH0_AUDIENCE,
             scope: 'openid profile email offline_access',
         });
+        if (window.gtag) {
+            window.gtag('event', 'login');
+        }
         navigate('/');
     };