Log page_view event

react-ui/package.json

@@ -9,6 +9,7 @@
     "clsx": "^1.1.1",
     "cross-env": "^7.0.3",
     "date-fns": "^2.16.1",
+    "firebase": "^9.6.10",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",

react-ui/src/App.jsx

@@ -6,6 +6,7 @@ import { SWRConfig } from 'swr';
 
 import { getData } from './api';
 import { DrawerStateContext } from './common';
+import { Analytics } from './components';
 import {
   Contest, Contests, Entry, HallOfFame, Home,
 } from './pages';
@@ -39,6 +40,7 @@ const App = () => {
           <DrawerStateContext.Provider value={drawerStateContextValue}>
             <div className="app">
               <Router>
+                <Analytics />
                 <Route exact path="/">
                   <Redirect to="/home" />
                 </Route>

react-ui/src/common/firebase.js

@@ -0,0 +1,17 @@
+import { getAnalytics } from 'firebase/analytics';
+import { initializeApp } from 'firebase/app';
+
+const firebaseConfig = {
+  apiKey: 'AIzaSyAV96xMFqykyH9HULiAG4qkx9bB53Gdogw',
+  authDomain: 'vexillology-contests.firebaseapp.com',
+  projectId: 'vexillology-contests',
+  storageBucket: 'vexillology-contests.appspot.com',
+  messagingSenderId: '917790372061',
+  appId: '1:917790372061:web:27bdbeffebe44caf4d2b34',
+  measurementId: 'G-DD6MTL11SP',
+};
+
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+
+export default analytics;

react-ui/src/common/index.js

@@ -1,3 +1,4 @@
 export { default as DrawerStateContext } from './DrawerStateContext';
+export { default as analytics } from './firebase';
 export { default as useClientWidth } from './useClientWidth';
 export { default as useSwrData } from './useSwrData';

react-ui/src/components/Analytics.jsx

@@ -0,0 +1,17 @@
+import { logEvent } from 'firebase/analytics';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { analytics } from '../common';
+
+const Analytics = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    logEvent(analytics, 'page_view', { page_path: location.pathname });
+  }, [location]);
+
+  return null;
+};
+
+export default Analytics;

react-ui/src/components/index.js

@@ -1,3 +1,4 @@
+export { default as Analytics } from './Analytics';
 export { default as AppBarDivided } from './AppBarDivided';
 export { default as AppBarIconButton } from './AppBarIconButton';
 export { default as ArrowBackButton } from './ArrowBackButton';