From 1514076b8946228efd31279060418be350ffc46c Mon Sep 17 00:00:00 2001 From: Mike Nguyen Date: Tue, 11 Apr 2023 01:13:18 -0500 Subject: [PATCH 1/5] feat: Added analytics logging on non-admin pages access --- pages/dashboard/index.tsx | 2 ++ pages/dashboard/questions.tsx | 6 ++++++ pages/hackerpacks/index.tsx | 7 ++++++- pages/index.tsx | 5 +++++ pages/profile.tsx | 7 ++++++- pages/register.tsx | 2 ++ pages/schedule/index.tsx | 4 ++++ 7 files changed, 31 insertions(+), 2 deletions(-) diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index 6d22d599..9f16a3aa 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -7,6 +7,7 @@ import AnnouncementCard from '../../components/dashboardComponents/AnnouncementC import Sidebar from '../../components/dashboardComponents/Sidebar'; import firebase from 'firebase'; import 'firebase/messaging'; +import 'firebase/analytics'; import { GetServerSideProps } from 'next'; import { RequestHelper } from '../../lib/request-helper'; import { useFCMContext } from '../../lib/service-worker/FCMContext'; @@ -42,6 +43,7 @@ export default function Dashboard(props: { const [challenges, setChallenges] = useState([]); useEffect(() => { + firebase.analytics().logEvent('access_dashboard'); setAnnouncements(props.announcements); // ordering challenges as speficied in firebase setChallenges(props.challenges.sort((a, b) => (a.rank > b.rank ? 1 : -1))); diff --git a/pages/dashboard/questions.tsx b/pages/dashboard/questions.tsx index f4669159..2574969b 100644 --- a/pages/dashboard/questions.tsx +++ b/pages/dashboard/questions.tsx @@ -7,6 +7,8 @@ import { RequestHelper } from '../../lib/request-helper'; import { useAuthContext } from '../../lib/user/AuthContext'; import { QAReqBody } from '../api/questions'; import DashboardHeader from '../../components/dashboardComponents/DashboardHeader'; +import firebase from 'firebase/app'; +import 'firebase/analytics'; /** * The Question and Answers page. * @@ -23,6 +25,10 @@ export default function QuestionsPage() { const [answeredQuestionDisclosureStatus, setAnsweredDisclosureStatus] = useState([]); const { user, isSignedIn, hasProfile } = useAuthContext(); + useEffect(() => { + firebase.analytics().logEvent('access_ask_question_page'); + }, []); + /** * * Fetch all answered questions that are asked by current user diff --git a/pages/hackerpacks/index.tsx b/pages/hackerpacks/index.tsx index 900b3a95..ffef1114 100644 --- a/pages/hackerpacks/index.tsx +++ b/pages/hackerpacks/index.tsx @@ -1,8 +1,10 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { GetStaticProps } from 'next'; import { NotionAPI } from 'notion-client'; import hackerpackSettings from '../../components/hackerpackComponents/hackerpack-settings.json'; import HackerpackDisplay from '../../components/hackerpackComponents/HackerpackDisplay'; +import firebase from 'firebase/app'; +import 'firebase/analytics'; /** * The hackerpack page. @@ -11,6 +13,9 @@ import HackerpackDisplay from '../../components/hackerpackComponents/HackerpackD */ export default function HackerPack(props: { content: any }) { // Find the root block because Notion IDs have hyphens + useEffect(() => { + firebase.analytics().logEvent('access_hackerpack'); + }, []); const rootId = hackerpackSettings.mainContent === 'notion' ? Object.keys(props.content.block).find( diff --git a/pages/index.tsx b/pages/index.tsx index 03cc3331..4d8603e0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,6 @@ import Head from 'next/head'; +import firebase from 'firebase/app'; +import 'firebase/analytics'; import { GetServerSideProps } from 'next'; import { useEffect, useState } from 'react'; import { RequestHelper } from '../lib/request-helper'; @@ -11,6 +13,7 @@ import HomeChallenges from '../components/homeComponents/HomeChallenges'; import HomeTeam from '../components/homeComponents/HomeTeam'; import HomeSponsors from '../components/homeComponents/HomeSponsors'; import HomeFooter from '../components/homeComponents/HomeFooter'; +import { useAuthContext } from '../lib/user/AuthContext'; /** * The home page. @@ -26,8 +29,10 @@ export default function Home(props: { sponsorCard: Sponsor[]; }) { const [loading, setLoading] = useState(true); + const { user } = useAuthContext(); useEffect(() => { + firebase.analytics().logEvent('access_home_page'); // Wait for all components to render before showing page setLoading(false); }, []); diff --git a/pages/profile.tsx b/pages/profile.tsx index db97b982..16deb261 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -1,6 +1,8 @@ import { useRouter } from 'next/router'; import Image from 'next/image'; -import React, { useRef, useState } from 'react'; +import firebase from 'firebase/app'; +import 'firebase/analytics'; +import React, { useEffect, useRef, useState } from 'react'; import { useAuthContext } from '../lib/user/AuthContext'; import LoadIcon from '../components/LoadIcon'; import { getFileExtension } from '../lib/util'; @@ -57,6 +59,9 @@ export default function ProfilePage() { } }); }; + useEffect(() => { + firebase.analytics().logEvent('access_profile_page'); + }, []); if (!isSignedIn) { return
Sign in to see your profile!
; diff --git a/pages/register.tsx b/pages/register.tsx index a4a03a02..b56b7f10 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -6,6 +6,7 @@ import { useUser } from '../lib/profile/user-data'; import { RequestHelper } from '../lib/request-helper'; import { useAuthContext } from '../lib/user/AuthContext'; import firebase from 'firebase/app'; +import 'firebase/analytics'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import schools from '../public/schools.json'; import majors from '../public/majors.json'; @@ -43,6 +44,7 @@ export default function Register() { useEffect(() => { //setting user specific initial values + firebase.analytics().logEvent('access_register_page'); formInitialValues['id'] = user?.id || ''; formInitialValues['preferredEmail'] = user?.preferredEmail || ''; formInitialValues['firstName'] = user?.firstName || ''; diff --git a/pages/schedule/index.tsx b/pages/schedule/index.tsx index f82795fb..c24574e2 100644 --- a/pages/schedule/index.tsx +++ b/pages/schedule/index.tsx @@ -30,6 +30,7 @@ import ClockIcon from '@material-ui/icons/AccessTime'; import Backpack from '@material-ui/icons/LocalMall'; import Description from '@material-ui/icons/BorderColor'; import firebase from 'firebase'; +import 'firebase/analytics'; const styles = ({ palette }: Theme) => createStyles({ @@ -127,6 +128,9 @@ const AppointmentContent = withStyles(styles, { name: 'AppointmentContent' })( ); export default function Calendar(props: { scheduleCard: ScheduleEvent[] }) { + useEffect(() => { + firebase.analytics().logEvent('access_schedule_page'); + }, []); // Hooks const [eventData, setEventData] = useState({ title: '', From bf277af3a9089b722b8fe3bfe89ec4f68a4f4800 Mon Sep 17 00:00:00 2001 From: Mike Nguyen Date: Sun, 16 Apr 2023 20:46:58 -0500 Subject: [PATCH 2/5] fix: Fixed issue with useEffect and redundant analytics custom events --- lib/firebase-client.ts | 18 +++++++++++++----- pages/_app.tsx | 22 +++++++++++++++++++--- pages/dashboard/index.tsx | 1 - pages/dashboard/questions.tsx | 4 ---- pages/hackerpacks/index.tsx | 3 --- pages/index.tsx | 1 - pages/register.tsx | 1 - pages/schedule/index.tsx | 3 --- 8 files changed, 32 insertions(+), 21 deletions(-) diff --git a/lib/firebase-client.ts b/lib/firebase-client.ts index 3416c2ad..2bb8a1f9 100644 --- a/lib/firebase-client.ts +++ b/lib/firebase-client.ts @@ -1,4 +1,5 @@ import firebase from 'firebase/app'; +import 'firebase/analytics'; export const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, @@ -15,10 +16,17 @@ export const firebaseConfig = { * * See the contributor docs for more info. */ -export function initFirebase() { - if (firebase.apps.length > 0) { - return; - } - +if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); } + +const analytics = firebase.analytics; + +export { firebase, analytics }; +// export function initFirebase() { +// if (firebase.apps.length > 0) { +// return; +// } + +// firebase.initializeApp(firebaseConfig); +// } diff --git a/pages/_app.tsx b/pages/_app.tsx index 8cab280c..3fb5558a 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,7 @@ import Head from 'next/head'; import { AppProps } from 'next/dist/shared/lib/router/router'; import 'firebase/auth'; import AppHeader from '../components/AppHeader'; -import { initFirebase } from '../lib/firebase-client'; +import { analytics } from '../lib/firebase-client'; import { AuthProvider } from '../lib/user/AuthContext'; import '../styles/globals.css'; import '../styles/tailwind.css'; @@ -18,8 +18,8 @@ import 'react-notion-x/src/styles.css'; import 'prismjs/themes/prism-tomorrow.css'; // used for rendering equations import 'katex/dist/katex.min.css'; - -initFirebase(); +import { useEffect } from 'react'; +import { useRouter } from 'next/router'; /** * A Wrapper for the HackPortal web app. @@ -28,6 +28,22 @@ initFirebase(); * will load into memory and never re-initialize unless the page refreshes. */ function PortalApp({ Component, pageProps }: AppProps) { + const router = useRouter(); + + useEffect(() => { + if (process.env.NODE_ENV === 'production') { + const logEvent = (url: string) => { + analytics().setCurrentScreen(url); + analytics().logEvent('screen_view'); + }; + router.events.on('routeChangeComplete', logEvent); + logEvent(window.location.pathname); + return () => { + router.events.off('routeChangeComplete', logEvent); + }; + } + }); + return ( diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index 9f16a3aa..d0cbe85a 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -43,7 +43,6 @@ export default function Dashboard(props: { const [challenges, setChallenges] = useState([]); useEffect(() => { - firebase.analytics().logEvent('access_dashboard'); setAnnouncements(props.announcements); // ordering challenges as speficied in firebase setChallenges(props.challenges.sort((a, b) => (a.rank > b.rank ? 1 : -1))); diff --git a/pages/dashboard/questions.tsx b/pages/dashboard/questions.tsx index 2574969b..797f8bf8 100644 --- a/pages/dashboard/questions.tsx +++ b/pages/dashboard/questions.tsx @@ -25,10 +25,6 @@ export default function QuestionsPage() { const [answeredQuestionDisclosureStatus, setAnsweredDisclosureStatus] = useState([]); const { user, isSignedIn, hasProfile } = useAuthContext(); - useEffect(() => { - firebase.analytics().logEvent('access_ask_question_page'); - }, []); - /** * * Fetch all answered questions that are asked by current user diff --git a/pages/hackerpacks/index.tsx b/pages/hackerpacks/index.tsx index ffef1114..933a9b8a 100644 --- a/pages/hackerpacks/index.tsx +++ b/pages/hackerpacks/index.tsx @@ -13,9 +13,6 @@ import 'firebase/analytics'; */ export default function HackerPack(props: { content: any }) { // Find the root block because Notion IDs have hyphens - useEffect(() => { - firebase.analytics().logEvent('access_hackerpack'); - }, []); const rootId = hackerpackSettings.mainContent === 'notion' ? Object.keys(props.content.block).find( diff --git a/pages/index.tsx b/pages/index.tsx index 4d8603e0..fee2af8e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -32,7 +32,6 @@ export default function Home(props: { const { user } = useAuthContext(); useEffect(() => { - firebase.analytics().logEvent('access_home_page'); // Wait for all components to render before showing page setLoading(false); }, []); diff --git a/pages/register.tsx b/pages/register.tsx index b56b7f10..80a34daf 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -44,7 +44,6 @@ export default function Register() { useEffect(() => { //setting user specific initial values - firebase.analytics().logEvent('access_register_page'); formInitialValues['id'] = user?.id || ''; formInitialValues['preferredEmail'] = user?.preferredEmail || ''; formInitialValues['firstName'] = user?.firstName || ''; diff --git a/pages/schedule/index.tsx b/pages/schedule/index.tsx index c24574e2..bebe4902 100644 --- a/pages/schedule/index.tsx +++ b/pages/schedule/index.tsx @@ -128,9 +128,6 @@ const AppointmentContent = withStyles(styles, { name: 'AppointmentContent' })( ); export default function Calendar(props: { scheduleCard: ScheduleEvent[] }) { - useEffect(() => { - firebase.analytics().logEvent('access_schedule_page'); - }, []); // Hooks const [eventData, setEventData] = useState({ title: '', From 983fa4b764507a5f63108384b97f2850eba92595 Mon Sep 17 00:00:00 2001 From: Mike Nguyen Date: Tue, 18 Apr 2023 10:27:06 -0500 Subject: [PATCH 3/5] refactor: Removed redundant analytics-related code --- pages/dashboard/index.tsx | 1 - pages/dashboard/questions.tsx | 2 -- pages/hackerpacks/index.tsx | 2 -- pages/index.tsx | 2 -- pages/profile.tsx | 5 ----- pages/register.tsx | 2 -- pages/schedule/index.tsx | 2 -- 7 files changed, 16 deletions(-) diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx index d0cbe85a..6d22d599 100644 --- a/pages/dashboard/index.tsx +++ b/pages/dashboard/index.tsx @@ -7,7 +7,6 @@ import AnnouncementCard from '../../components/dashboardComponents/AnnouncementC import Sidebar from '../../components/dashboardComponents/Sidebar'; import firebase from 'firebase'; import 'firebase/messaging'; -import 'firebase/analytics'; import { GetServerSideProps } from 'next'; import { RequestHelper } from '../../lib/request-helper'; import { useFCMContext } from '../../lib/service-worker/FCMContext'; diff --git a/pages/dashboard/questions.tsx b/pages/dashboard/questions.tsx index 797f8bf8..f4669159 100644 --- a/pages/dashboard/questions.tsx +++ b/pages/dashboard/questions.tsx @@ -7,8 +7,6 @@ import { RequestHelper } from '../../lib/request-helper'; import { useAuthContext } from '../../lib/user/AuthContext'; import { QAReqBody } from '../api/questions'; import DashboardHeader from '../../components/dashboardComponents/DashboardHeader'; -import firebase from 'firebase/app'; -import 'firebase/analytics'; /** * The Question and Answers page. * diff --git a/pages/hackerpacks/index.tsx b/pages/hackerpacks/index.tsx index 933a9b8a..7a64a1a1 100644 --- a/pages/hackerpacks/index.tsx +++ b/pages/hackerpacks/index.tsx @@ -3,8 +3,6 @@ import { GetStaticProps } from 'next'; import { NotionAPI } from 'notion-client'; import hackerpackSettings from '../../components/hackerpackComponents/hackerpack-settings.json'; import HackerpackDisplay from '../../components/hackerpackComponents/HackerpackDisplay'; -import firebase from 'firebase/app'; -import 'firebase/analytics'; /** * The hackerpack page. diff --git a/pages/index.tsx b/pages/index.tsx index fee2af8e..1661c9c5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,4 @@ import Head from 'next/head'; -import firebase from 'firebase/app'; -import 'firebase/analytics'; import { GetServerSideProps } from 'next'; import { useEffect, useState } from 'react'; import { RequestHelper } from '../lib/request-helper'; diff --git a/pages/profile.tsx b/pages/profile.tsx index 16deb261..ef0f5791 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -1,7 +1,5 @@ import { useRouter } from 'next/router'; import Image from 'next/image'; -import firebase from 'firebase/app'; -import 'firebase/analytics'; import React, { useEffect, useRef, useState } from 'react'; import { useAuthContext } from '../lib/user/AuthContext'; import LoadIcon from '../components/LoadIcon'; @@ -59,9 +57,6 @@ export default function ProfilePage() { } }); }; - useEffect(() => { - firebase.analytics().logEvent('access_profile_page'); - }, []); if (!isSignedIn) { return
Sign in to see your profile!
; diff --git a/pages/register.tsx b/pages/register.tsx index 80a34daf..8592a427 100644 --- a/pages/register.tsx +++ b/pages/register.tsx @@ -5,8 +5,6 @@ import LoadIcon from '../components/LoadIcon'; import { useUser } from '../lib/profile/user-data'; import { RequestHelper } from '../lib/request-helper'; import { useAuthContext } from '../lib/user/AuthContext'; -import firebase from 'firebase/app'; -import 'firebase/analytics'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import schools from '../public/schools.json'; import majors from '../public/majors.json'; diff --git a/pages/schedule/index.tsx b/pages/schedule/index.tsx index bebe4902..effba365 100644 --- a/pages/schedule/index.tsx +++ b/pages/schedule/index.tsx @@ -29,8 +29,6 @@ import PinDrop from '@material-ui/icons/PinDrop'; import ClockIcon from '@material-ui/icons/AccessTime'; import Backpack from '@material-ui/icons/LocalMall'; import Description from '@material-ui/icons/BorderColor'; -import firebase from 'firebase'; -import 'firebase/analytics'; const styles = ({ palette }: Theme) => createStyles({ From 62777a1a12fb46678ae1cd91b825f2899efe1124 Mon Sep 17 00:00:00 2001 From: Mike Nguyen Date: Tue, 18 Apr 2023 17:48:07 -0500 Subject: [PATCH 4/5] refactor: Removed redundant import --- pages/hackerpacks/index.tsx | 2 +- pages/index.tsx | 2 -- pages/profile.tsx | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/pages/hackerpacks/index.tsx b/pages/hackerpacks/index.tsx index 7a64a1a1..900b3a95 100644 --- a/pages/hackerpacks/index.tsx +++ b/pages/hackerpacks/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { GetStaticProps } from 'next'; import { NotionAPI } from 'notion-client'; import hackerpackSettings from '../../components/hackerpackComponents/hackerpack-settings.json'; diff --git a/pages/index.tsx b/pages/index.tsx index 1661c9c5..03cc3331 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -11,7 +11,6 @@ import HomeChallenges from '../components/homeComponents/HomeChallenges'; import HomeTeam from '../components/homeComponents/HomeTeam'; import HomeSponsors from '../components/homeComponents/HomeSponsors'; import HomeFooter from '../components/homeComponents/HomeFooter'; -import { useAuthContext } from '../lib/user/AuthContext'; /** * The home page. @@ -27,7 +26,6 @@ export default function Home(props: { sponsorCard: Sponsor[]; }) { const [loading, setLoading] = useState(true); - const { user } = useAuthContext(); useEffect(() => { // Wait for all components to render before showing page diff --git a/pages/profile.tsx b/pages/profile.tsx index ef0f5791..db97b982 100644 --- a/pages/profile.tsx +++ b/pages/profile.tsx @@ -1,6 +1,6 @@ import { useRouter } from 'next/router'; import Image from 'next/image'; -import React, { useEffect, useRef, useState } from 'react'; +import React, { useRef, useState } from 'react'; import { useAuthContext } from '../lib/user/AuthContext'; import LoadIcon from '../components/LoadIcon'; import { getFileExtension } from '../lib/util'; From 81d9be3f6ccbde133edf07ca5cd7fa701364d0a4 Mon Sep 17 00:00:00 2001 From: Amrit Rathie Date: Tue, 11 Jul 2023 18:55:15 -0500 Subject: [PATCH 5/5] Remove commented-out code from firebase-client.ts --- lib/firebase-client.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/lib/firebase-client.ts b/lib/firebase-client.ts index 2bb8a1f9..a338fc4e 100644 --- a/lib/firebase-client.ts +++ b/lib/firebase-client.ts @@ -23,10 +23,3 @@ if (!firebase.apps.length) { const analytics = firebase.analytics; export { firebase, analytics }; -// export function initFirebase() { -// if (firebase.apps.length > 0) { -// return; -// } - -// firebase.initializeApp(firebaseConfig); -// }