Add Google Analytics

src/App.js

@@ -28,6 +28,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
 
@@ -74,6 +75,12 @@ const themes = [
 
 const db = firebase.firestore();
 
+window.dataLayer = window.dataLayer || [];
+function gtag() {window.dataLayer.push(arguments); }
+gtag('set', {'send_page_view': false });
+
+const analytics = firebase.analytics();
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -90,7 +97,15 @@ class App extends React.Component {
         user: userData,
       };
 
-      if (userData) await firebase.firestore()
+      if (userData) {
+
+        // login event
+        analytics.logEvent("login", {
+          method: userData.providerData.map(provider => provider.providerId).join(","),
+        });
+
+
+        await firebase.firestore()
         .collection("users")
         .doc(userData.uid)
         .get()
@@ -101,6 +116,7 @@ class App extends React.Component {
           newState.sound = true;
           newState.theme = "default";
         });
+      }
       
       this.setState(newState);
     });
@@ -206,40 +222,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,10 +267,16 @@ class App extends React.Component {
                 <>
                   <Switch>
                     <Route path="/" exact>
-                      <Home db={db} />
+                  <Home db={db} logEvent={analytics.logEvent} />
                     </Route>
                     <Route path="/login">
-                      <Login db={db} firebase={firebase} />
+                    <Login db={db} firebase={firebase} logEvent={analytics.logEvent} user={this.state.user} />
+                </Route>
+                <Route path="/tos" exact>
+                  <TermsOfService logEvent={analytics.logEvent} />
+                </Route>
+                <Route path="/privacy" exact>
+                  <PrivacyPolicy logEvent={analytics.logEvent} />
                     </Route>
                     <Route>
                       <Error404 />

src/CreateSet.js

@@ -47,6 +47,8 @@ export default withRouter(class CreateSet extends React.Component {
 	componentDidMount() {
 		document.title = "Create Set | Parandum";
 		this.setNameInput.focus();
+
+		this.props.logEvent("page_view");
 	}
 
 	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/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

@@ -41,18 +41,18 @@ export default class History extends Component {
 		document.title = "History | Parandum";
 		
 		const userSets = this.state.db
-			.collection("sets")
+		.collection("sets")
-			.where("owner", "==", this.state.user.uid)
+		.where("owner", "==", this.state.user.uid)
-			.orderBy("title", "asc")
+		.orderBy("title", "asc")
-			.get();
+		.get();
 		
 		this.state.db.collection("progress")
-			.where("uid", "==", this.state.user.uid)
+		.where("uid", "==", this.state.user.uid)
-			.orderBy("start_time", "desc")
+		.orderBy("start_time", "desc")
-			.get()
+		.get()
-			.then(async (querySnapshot) => {
+		.then(async (querySnapshot) => {
-				let complete = [];
+			let complete = [];
-				let incomplete = [];
+			let incomplete = [];
 				let totalCorrect = 0;
 				let totalIncorrect = 0;
 				let totalMarks = 0;
@@ -105,6 +105,8 @@ export default class History extends Component {
 			}).catch((error) => {
 				console.log(`Couldn't retrieve progress history: ${error}`);
 			});
+	
+			this.props.logEvent("page_view");
 	}
 
 	componentWillUnmount() {

src/Home.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useEffect } from "react";
 import "@material-ui/core";
 import { AccountCircleRounded as AccountCircleIcon } from "@material-ui/icons";
 import "./css/Home.css";
 import NavBar from './NavBar';
 import Footer from "./Footer";
 
-export default function Home() {
+export default function Home(props) {
 	const navbarItems = [
 		{
 			type: "link",
@@ -18,6 +18,10 @@ export default function Home() {
 	
 	document.title = "Parandum";
 
+	useEffect(() => {
+		props.logEvent("page_view");
+	});
+
 	return (
 		<div>
 			<NavBar items={navbarItems} />

src/LoggedInHome.js

@@ -162,6 +162,8 @@ export default withRouter(class LoggedInHome extends React.Component {
 		]).then(() => {
 			this.setState(newState);
 		});
+
+		this.props.logEvent("page_view");
 	}
 
 	componentWillUnmount() {
@@ -188,6 +190,10 @@ export default withRouter(class LoggedInHome extends React.Component {
 				const progressId = result.data;
 				this.stopLoading();
 				this.props.history.push("/progress/" + progressId);
+
+				this.props.logEvent("start_test", {
+					progress_id: progressId,
+				});
 			}).catch((error) => {
 				console.log(`Couldn't start test: ${error}`);
 				this.stopLoading();

src/Login.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from "react";
 import Home from './Home';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import "./css/Login.css";
@@ -25,6 +25,10 @@ export default function Login(props) {
 	
 	document.title = "Login | Parandum";
 
+	useEffect(() => {
+		props.logEvent("page_view");
+	});
+
 	return (
 		<>
 			<Home />

src/PrivacyPolicy.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { useEffect } from "react";
 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,10 @@ export default function PrivacyPolicy() {
 		}
 	];
 
+	useEffect(() => {
+		props.logEvent("page_view");
+	});
+
 	return (
 		<div>
 			<NavBar items={navbarItems} />

src/Progress.js

@@ -299,6 +299,16 @@ export default withRouter(class Progress extends React.Component {
 						canProceed: true,
 					};
 
+					if (data.correct) {
+						this.props.logEvent("correct_answer", {
+							progress_id: this.props.match.params.progressId,
+						});
+					} else {
+						this.props.logEvent("incorrect_answer", {
+							progress_id: this.props.match.params.progressId,
+						});
+					}
+	
 					if (data.correct && !data.moreAnswers && this.state.incorrectAnswers[data.currentVocabId]) {
 						// all answers to question given correctly
 						// answer was previously wrong
@@ -322,6 +332,10 @@ export default withRouter(class Progress extends React.Component {
 						// test done
 						newState.duration = data.duration;
 
+						this.props.logEvent("test_complete", {
+							progress_id: this.props.match.params.progressId,
+						});
+
 						promises.push(this.state.db.collection("progress")
 							.where("uid", "==", this.state.user.uid)
 							.where("setIds", "==", this.state.setIds)

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() {
@@ -119,6 +124,10 @@ export default withRouter(class SetPage extends React.Component {
 				const progressId = result.data;
 				this.stopLoading();
 				this.props.history.push("/progress/" + progressId);
+
+				this.props.logEvent("start_test", {
+					progress_id: progressId,
+				});
 			}).catch((error) => {
 				console.log(`Couldn't start test: ${error}`);
 				this.stopLoading();

src/Settings.js

@@ -37,6 +37,8 @@ export default withRouter(class Settings extends Component {
 
 	componentDidMount() {
 		document.title = "Settings | Parandum";
+
+		this.props.logEvent("page_view");
 	}
 
 	componentWillUnmount() {

src/TermsOfService.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useEffect } from "react";
 import { HomeRounded as HomeRoundedIcon } from "@material-ui/icons";
 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,10 @@ export default function TermsOfService() {
 		}
 	];
 
+	useEffect(() => {
+		props.logEvent("page_view");
+	});
+
 	return (
 		<div>
 			<NavBar items={navbarItems} />

src/UserGroups.js

@@ -76,6 +76,8 @@ export default withRouter(class UserGroups extends Component {
 
 			this.setState(newState);
 		});
+
+		this.props.logEvent("page_view");
 	}
 
 	componentWillUnmount() {
@@ -114,6 +116,10 @@ export default withRouter(class UserGroups extends Component {
 				.then((result) => {
 					this.props.history.push(`/groups/${result.data}`);
 					this.stopCreateGroupLoading();
+
+					this.props.logEvent("create_group", {
+						group_id: result.data,
+					});
 				}).catch((error) => {
 					console.log(`Couldn't create group: ${error}`);
 					this.stopCreateGroupLoading();

src/UserSets.js

@@ -51,6 +51,8 @@ export default withRouter(class UserSets extends Component {
 				userSets: querySnapshot.docs,
 			})
 		});
+
+		this.props.logEvent("page_view");
 	}
 
 	componentWillUnmount() {