diff --git a/src/components/BottomBar.tsx b/src/components/BottomBar.tsx index 349a65a..efbbd5d 100644 --- a/src/components/BottomBar.tsx +++ b/src/components/BottomBar.tsx @@ -1,7 +1,20 @@ import { Typography, Link } from "@mui/material"; import "./BottomBar.css"; +import FirebaseAnalytics from "../services/FirebaseAnalytics"; +import { logEvent } from "firebase/analytics"; +import { useLocation } from "react-router-dom"; +import { useCallback } from "react"; function BottomBar() { + const location = useLocation(); + + useCallback(() => { + logEvent(FirebaseAnalytics, "page_view", { + page_path: `${location.pathname}`, + page_title: document.title, + }); + }, [location]); + return ( diff --git a/src/components/auth/Action.tsx b/src/components/auth/Action.tsx index ecf7fa3..a008880 100644 --- a/src/components/auth/Action.tsx +++ b/src/components/auth/Action.tsx @@ -14,6 +14,8 @@ import { Alert, Snackbar } from "@mui/material"; import { FirebaseError } from "firebase/app"; import "./Action.css"; import { useNavigate, useSearchParams } from "react-router-dom"; +import FirebaseAnalytics from "../../services/FirebaseAnalytics"; +import { logEvent } from "firebase/analytics"; const modes = ["resetEmail", "resetPassword", "verifyEmail"] as const; @@ -62,6 +64,7 @@ export default function Action() { }) .finally(() => { setActionIsRunning(false); + logEvent(FirebaseAnalytics, "reset_password"); }); }; @@ -102,6 +105,7 @@ export default function Action() { }) .finally(() => { setActionIsRunning(false); + logEvent(FirebaseAnalytics, "reset_password_confirm"); }); }; @@ -147,6 +151,7 @@ export default function Action() { }) .finally(() => { setActionIsRunning(false); + logEvent(FirebaseAnalytics, "verify_email"); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [mode, oobCode]); diff --git a/src/components/auth/SignIn.tsx b/src/components/auth/SignIn.tsx index e8bb6e8..e0e2aaa 100644 --- a/src/components/auth/SignIn.tsx +++ b/src/components/auth/SignIn.tsx @@ -17,6 +17,8 @@ import SignInWithButton, { enabledProviders, } from "./SignInWithButton"; import { useNavigate } from "react-router-dom"; +import FirebaseAnalytics from "../../services/FirebaseAnalytics"; +import { logEvent } from "firebase/analytics"; export default function SignIn() { const [errorMessage, setErrorMessage] = useState(""); @@ -77,6 +79,7 @@ export default function SignIn() { }) .finally(() => { setSignInIsRunning(false); + logEvent(FirebaseAnalytics, "login", { auth_provider: "email" }); }); }; diff --git a/src/components/auth/SignInWithButton.tsx b/src/components/auth/SignInWithButton.tsx index 1e1a17d..62d02ec 100644 --- a/src/components/auth/SignInWithButton.tsx +++ b/src/components/auth/SignInWithButton.tsx @@ -11,6 +11,8 @@ import FirebaseAuth from "../../services/FirebaseAuth"; import "./SignInWithButton.css"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; +import FirebaseAnalytics from "../../services/FirebaseAnalytics"; +import { logEvent } from "firebase/analytics"; export enum SignInProviders { apple = "apple", @@ -18,16 +20,17 @@ export enum SignInProviders { github = "github", } -export const enabledProviders: SignInProviders[] = [ -]; +export const enabledProviders: SignInProviders[] = []; function SignInWithButton( props: { provider?: SignInProviders; errorHandler?: (err: any) => void; + disableButton?: boolean; } = { provider: SignInProviders.apple, errorHandler: (err: any) => { }, + disableButton: false, } ) { const [signInIsRunning, setSignInIsRunning] = useState(false); @@ -57,6 +60,8 @@ function SignInWithButton( if (!user.user.emailVerified) { await sendEmailVerification(user.user, { url: `${window.location.origin}`, + }).then(() => { + logEvent(FirebaseAnalytics, "send_verification_email"); }); } loggedIn = true; @@ -67,6 +72,9 @@ function SignInWithButton( .finally(() => { setSignInIsRunning(false); if (loggedIn) navigate("/"); + logEvent(FirebaseAnalytics, "login", { + auth_provider: provider.providerId, + }); }); }; @@ -90,7 +98,7 @@ function SignInWithButton( sx={{ mt: 3, mb: 2 }} style={{ fontFamily: "FontAwersome" }} onClick={signInFun} - disabled={signInIsRunning} + disabled={signInIsRunning || props.disableButton} > {getSymbol()} diff --git a/src/components/auth/SignUp.tsx b/src/components/auth/SignUp.tsx index fac665d..39d7de4 100644 --- a/src/components/auth/SignUp.tsx +++ b/src/components/auth/SignUp.tsx @@ -17,6 +17,8 @@ import SignInWithButton, { enabledProviders, } from "./SignInWithButton"; import { useNavigate } from "react-router-dom"; +import FirebaseAnalytics from "../../services/FirebaseAnalytics"; +import { logEvent } from "firebase/analytics"; export default function SignUp() { const [errorMessage, setErrorMessage] = useState(""); @@ -61,6 +63,8 @@ export default function SignUp() { .then((user) => sendEmailVerification(user.user, { url: `${window.location.origin}`, + }).then(() => { + logEvent(FirebaseAnalytics, "send_verification_email"); }) ) .then(() => { @@ -76,6 +80,7 @@ export default function SignUp() { }) .finally(() => { setSignUpIsRunning(false); + logEvent(FirebaseAnalytics, "sign_up"); }); }; @@ -165,6 +170,7 @@ export default function SignUp() { }); } }} + disableButton={signUpIsRunning || !acceptPolicies} > ))} diff --git a/src/services/FirebaseAnalytics.tsx b/src/services/FirebaseAnalytics.tsx new file mode 100644 index 0000000..d2aee78 --- /dev/null +++ b/src/services/FirebaseAnalytics.tsx @@ -0,0 +1,6 @@ +import { getAnalytics } from "firebase/analytics"; +import FirebaseApp from "./FirebaseApp"; + +const FirebaseAnalytics = getAnalytics(FirebaseApp); + +export default FirebaseAnalytics;