Add Google Analytics

src/App.js

@@ -26,6 +26,7 @@ import "firebase/auth";
 import "firebase/functions";
 import "firebase/app-check";
 import "firebase/firestore";
+import "firebase/analytics";
 
 // TODO: app check debug token set in index.html - remove before deploy
 
@@ -71,6 +72,7 @@ const themes = [
 ];
 
 const db = firebase.firestore();
+const analytics = firebase.analytics();
 
 class App extends React.Component {
   constructor(props) {
@@ -88,7 +90,18 @@ class App extends React.Component {
         user: userData,
       };
 
-      if (userData) await firebase.firestore()
+      if (userData) {
+        if (firebase.auth().currentUser.metadata.creationTime ===
+          firebase.auth().currentUser.metadata.lastSignInTime) {
+            analytics.logEvent("sign_up", {
+              method: userData.providerId,
+            });
+        } else {
+          analytics.logEvent("login", {
+            method: userData.providerId,
+          });
+        }
+        await firebase.firestore()
           .collection("users")
           .doc(userData.uid)
           .get()
@@ -99,6 +112,7 @@ class App extends React.Component {
             newState.sound = true;
             newState.theme = "default";
           });
+      }
       
       this.setState(newState);
     });
@@ -203,40 +217,40 @@ class App extends React.Component {
               <>
                 <Switch>
                   <Route path="/" exact>
-                    <LoggedInHome db={db} firebase={firebase} functions={functions} user={this.state.user} />
+                    <LoggedInHome db={db} firebase={firebase} functions={functions} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/sets/:setId" exact>
-                    <SetPage db={db} functions={functions} user={this.state.user} />
+                    <SetPage db={db} functions={functions} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/groups" exact>
-                    <UserGroups db={db} functions={functions} user={this.state.user} />
+                    <UserGroups db={db} functions={functions} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/groups/:groupId" exact>
-                    <GroupPage db={db} functions={functions} user={this.state.user} />
+                    <GroupPage db={db} functions={functions} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/settings">
-                    <Settings db={db} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} />
+                    <Settings db={db} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/progress/:progressId" exact>
-                    <Progress db={db} functions={functions} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} />
+                    <Progress db={db} functions={functions} user={this.state.user} sound={this.state.sound} handleSoundChange={this.handleSoundChange} theme={this.state.theme} handleThemeChange={this.handleThemeChange} themes={themes} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/create-set" exact>
-                    <CreateSet db={db} user={this.state.user} />
+                    <CreateSet db={db} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/my-sets" exact>
-                    <UserSets db={db} functions={functions} user={this.state.user} />
+                    <UserSets db={db} functions={functions} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/sets/:setId/edit" exact>
-                    <EditSet db={db} user={this.state.user} />
+                    <EditSet db={db} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/history" exact>
-                    <History db={db} user={this.state.user} />
+                    <History db={db} user={this.state.user} logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/tos" exact>
-                    <TermsOfService />
+                    <TermsOfService logEvent={analytics.logEvent} />
                   </Route>
                   <Route path="/privacy" exact>
-                    <PrivacyPolicy />
+                    <PrivacyPolicy logEvent={analytics.logEvent} />
                   </Route>
                   <Redirect from="/login" to="/" />
                   <Route>
@@ -251,7 +265,7 @@ class App extends React.Component {
                       <Home db={db} />
                     </Route>
                     <Route path="/login">
-                      <Login db={db} firebase={firebase} />
+                      <Login db={db} firebase={firebase} logEvent={analytics.logEvent} />
                     </Route>
                     <Route>
                       <Error404 />

src/CreateSet.js

@@ -47,6 +47,11 @@ export default withRouter(class CreateSet extends React.Component {
 	componentDidMount() {
 		document.title = "Create Set | Parandum";
 		this.setNameInput.focus();
+
+		this.props.logEvent("select_content", {
+			content_type: "main_page",
+			item_id: "create_set",
+		});
 	}
 
 	componentWillUnmount() {

src/EditSet.js

@@ -109,6 +109,11 @@ export default withRouter(class EditSet extends Component {
 				setInaccessible: true,
 			});
 		});
+
+		this.props.logEvent("select_content", {
+			content_type: "edit_set",
+			item_id: this.props.match.params.setId,
+		});
 	}
 
 	componentWillUnmount = () => {

src/Error404.js

@@ -3,7 +3,7 @@ import NavBar from './NavBar';
 import Footer from "./Footer";
 import { HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
 
-export default function PageNotFound() {
+export default function Error404(props) {
 	const navbarItems = [
 		{
 			type: "link",
@@ -15,6 +15,11 @@ export default function PageNotFound() {
 
 	document.title = "Error 404 | Parandum";
 
+	props.logEvent("select_content", {
+		content_type: "main_page",
+		item_id: "error_404",
+	});
+
 	return (
 		<div>
 			<NavBar items={navbarItems}/>

src/GroupPage.js

@@ -119,6 +119,11 @@ export default withRouter(class GroupPage extends Component {
 						this.setState(newState);
 					});
 			});
+
+		this.props.logEvent("select_content", {
+			content_type: "group",
+			item_id: this.props.match.params.groupId,
+		});
 	}
 
 	componentWillUnmount() {

src/History.js

@@ -77,6 +77,11 @@ export default class History extends Component {
 			}).catch((error) => {
 				console.log(`Couldn't retrieve progress history: ${error}`);
 			});
+
+		this.props.logEvent("select_content", {
+			content_type: "main_page",
+			item_id: "history",
+		});
 	}
 
 	componentWillUnmount() {

src/LoggedInHome.js

@@ -160,6 +160,11 @@ export default withRouter(class LoggedInHome extends React.Component {
 		]).then(() => {
 			this.setState(newState);
 		});
+
+		this.props.logEvent("select_content", {
+			content_type: "main_page",
+			item_id: "logged_in_home",
+		});
 	}
 
 	componentWillUnmount() {

src/Login.js

@@ -26,6 +26,11 @@ export default function Login(props) {
 	document.body.style.overflow = "hidden";
 	document.title = "Login | Parandum";
 
+	props.logEvent("select_content", {
+		content_type: "main_page",
+		item_id: "login",
+	});
+
 	return (
 		<>
 			<Home />

src/PrivacyPolicy.js

@@ -3,7 +3,7 @@ import { HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
 import NavBar from "./NavBar";
 import Footer from "./Footer";
 
-export default function PrivacyPolicy() {
+export default function PrivacyPolicy(props) {
 	const navbarItems = [
 		{
 			type: "link",
@@ -13,6 +13,11 @@ export default function PrivacyPolicy() {
 		}
 	];
 
+	props.logEvent("select_content", {
+		content_type: "main_page",
+		item_id: "privacy",
+	});
+
 	return (
 		<div>
 			<NavBar items={navbarItems} />

src/Progress.js

@@ -182,6 +182,11 @@ export default withRouter(class Progress extends React.Component {
 		this.setState(newState, () => {
 			if (!setDone) this.answerInput.focus()
 		});
+
+		this.props.logEvent("select_content", {
+			content_type: "progress",
+			item_id: this.props.match.params.progressId,
+		});
 	}
 
 	componentWillUnmount() {

src/SetPage.js

@@ -95,6 +95,11 @@ export default withRouter(class SetPage extends React.Component {
 			});
 			console.log(`Can't access set: ${error}`);
 		});
+
+		this.props.logEvent("select_content", {
+			content_type: "set",
+			item_id: this.props.match.params.setId,
+		});
 	}
 
 	componentWillUnmount() {

src/Settings.js

@@ -37,6 +37,11 @@ export default withRouter(class Settings extends Component {
 
 	componentDidMount() {
 		document.title = "Settings | Parandum";
+
+		this.props.logEvent("select_content", {
+			content_type: "main_page",
+			item_id: "settings",
+		});
 	}
 
 	componentWillUnmount() {

src/TermsOfService.js

@@ -4,7 +4,7 @@ import NavBar from "./NavBar";
 import Footer from "./Footer";
 import { Link } from "react-router-dom";
 
-export default function TermsOfService() {
+export default function TermsOfService(props) {
 	const navbarItems = [
 		{
 			type: "link",
@@ -14,6 +14,11 @@ export default function TermsOfService() {
 		}
 	];
 
+	props.logEvent("select_content", {
+		content_type: "main_page",
+		item_id: "tos",
+	});
+
 	return (
 		<div>
 			<NavBar items={navbarItems} />

src/UserGroups.js

@@ -76,6 +76,11 @@ export default withRouter(class UserGroups extends Component {
 
 			this.setState(newState);
 		});
+
+		this.props.logEvent("select_content", {
+			content_type: "main_page",
+			item_id: "groups",
+		});
 	}
 
 	componentWillUnmount() {
@@ -112,6 +117,9 @@ export default withRouter(class UserGroups extends Component {
 
 			this.state.functions.createGroup(this.state.groupName)
 				.then((result) => {
+					this.props.logEvent("join_group", {
+						group_id: result.data,
+					});
 					this.props.history.push(`/groups/${result.data}`);
 					this.stopCreateGroupLoading();
 				}).catch((error) => {
@@ -136,6 +144,9 @@ export default withRouter(class UserGroups extends Component {
 						.set({
 							role: "member",
 						}).then(() => {
+							this.props.logEvent("join_group", {
+								group_id: joinCodeDoc.data().group,
+							});
 							this.props.history.push(`/groups/${joinCodeDoc.data().group}`);
 							this.stopJoinGroupLoading();
 						});

src/UserSets.js

@@ -51,6 +51,11 @@ export default withRouter(class UserSets extends Component {
 				userSets: querySnapshot.docs,
 			})
 		});
+
+		this.props.logEvent("select_content", {
+			content_type: "main_page",
+			item_id: "sets",
+		});
 	}
 
 	componentWillUnmount() {