integrated with GA

hereAlexT · Dec 10, 2023 · c304eb9 · c304eb9
1 parent 3e399a1
commit c304eb9
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 20 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,6 +34,7 @@
     "ionicons": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-markdown": "^9.0.1",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -8,6 +8,23 @@ import {
 import { useState, useEffect } from 'react'
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route, useLocation, useHistory } from 'react-router-dom';
+import ReactGA from "react-ga4";
+import { GA_MEASUREMENT_ID } from './config';
+
+/* Import Components */
+import MainTabs from './pages/MainTabs';
+import Signup from './pages/Signup';
+import Login from './pages/Login';
+import TimeLine from './pages/Timeline';
+import ComponentLab from './pages/ComponentLab'
+import Settings from './pages/Settings';
+import Menu from './components/Menu';
+import Logout from './components/Logout';
+import UpdatePassword from './pages/UpdatePassword';
+import { AuthProvider } from './contexts/AuthContext';
+import { useAuth } from './contexts/AuthContext';
+import { NotesProvider } from './contexts/NotesContext';
+import { MetaProvider, useMeta } from './contexts/MetaContext';
 
 
 /* Core CSS required for Ionic components to work properly */
@@ -31,22 +48,8 @@ import './theme/variables.css';
 import './theme/global.css'
 import './App.css'
 
-/* Import Components */
-import MainTabs from './pages/MainTabs';
-import Signup from './pages/Signup';
-import Login from './pages/Login';
-import TimeLine from './pages/Timeline';
-import ComponentLab from './pages/ComponentLab'
-import Settings from './pages/Settings';
-import Menu from './components/Menu';
-import Logout from './components/Logout';
-import UpdatePassword from './pages/UpdatePassword';
-import { AuthProvider } from './contexts/AuthContext';
-import { useAuth } from './contexts/AuthContext';
-import { NotesProvider } from './contexts/NotesContext';
-import { MetaProvider, useMeta } from './contexts/MetaContext';
-
 
+/** Ionic Init */
 setupIonicReact();
 
 
@@ -65,6 +68,9 @@ const App: React.FC = () => {
     </MetaProvider>)
 };
 
+/** Google Analytics Init */
+ReactGA.initialize(GA_MEASUREMENT_ID);
+
 const AppContent: React.FC = () => {
   const { isSplitPaneOn, setIsSplitPaneOn } = useMeta();
   const location = useLocation();
@@ -74,9 +80,15 @@ const AppContent: React.FC = () => {
     setKey(Date.now());
   }, [location.pathname]);
 
-
   const isLoginOrSignup = location.pathname === '/login' || location.pathname === '/signup';
 
+
+  useEffect(() => {
+    ReactGA.send({ hitType: 'pageview', page: location.pathname + location.search });
+    // console.log("GA: ", location.pathname + location.search)
+  }, [location]);
+
+
   return (
     <IonSplitPane key={key} className={`${isLoginOrSignup ? 'max-w-md' : 'max-w-3xl'} mx-auto`} onIonSplitPaneVisible={(event) => setIsSplitPaneOn(event.detail.visible)} contentId="main">
       {location.pathname !== '/login' && location.pathname !== '/signup' && <Menu />}

diff --git a/frontend/src/config.ts b/frontend/src/config.ts
@@ -1,5 +1,14 @@
+import ReactGA from "react-ga4";
+
 // config.js
 export const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
 export const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
 export const HCAPTCHA_SITE_KEY = import.meta.env.VITE_HCAPTCHA_SITE_KEY;
-export const DOMAIN_NAME = import.meta.env.VITE_DOMAIN_NAME;
+export const DOMAIN_NAME = import.meta.env.VITE_DOMAIN_NAME;
+export const GA_MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID;
+
+
+
+
+
+
diff --git a/frontend/src/pages/ComponentLab.tsx b/frontend/src/pages/ComponentLab.tsx
@@ -23,11 +23,12 @@ import {
 import { useRef, useState, useEffect } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import NoteCardV2 from '../components/NoteCardV2';
-import { NoteId, Note, NOTE_STATUS} from '../shared/types';
+import { NoteId, Note, NOTE_STATUS } from '../shared/types';
 import { v4 as uuidv4 } from 'uuid';
 import CardEditorV2 from '../components/CardEditorV2';
 import CardEditorMobileModal from '../components/CardEditorMobileModal';
 import Markdown from 'react-markdown'
+import ReactGA from "react-ga4";
 
 import { arrowUpOutline as arrowUpOutlineIcon } from 'ionicons/icons';
 
@@ -132,6 +133,10 @@ const ComponentLab: React.FC = () => {
                             {/** use a button Get session and print in console*/}
                             <IonButton
                                 onClick={() => {
+                                    ReactGA.event({
+                                        'category': 'DeveloperTool',
+                                        'action': 'GetSession',
+                                    })
                                     let sessionCopy = { ...session };
                                     if (sessionCopy.access_token) {
                                         sessionCopy.access_token = '****';