From bcb8511b7e297bae41c633c5b0e017ef88827a44 Mon Sep 17 00:00:00 2001 From: Matthew Grove Date: Sun, 12 Sep 2021 11:24:13 +0100 Subject: [PATCH] Add Google Analytics --- src/App.js | 52 ++++++++++++++++++++++++++++++------------- src/CreateSet.js | 2 ++ src/EditSet.js | 5 +++++ src/GroupPage.js | 5 +++++ src/History.js | 30 +++++++++++++------------ src/Home.js | 8 +++++-- src/LoggedInHome.js | 6 +++++ src/Login.js | 6 ++++- src/PrivacyPolicy.js | 8 +++++-- src/Progress.js | 14 ++++++++++++ src/SetPage.js | 9 ++++++++ src/Settings.js | 2 ++ src/TermsOfService.js | 8 +++++-- src/UserGroups.js | 6 +++++ src/UserSets.js | 2 ++ 15 files changed, 127 insertions(+), 36 deletions(-) diff --git a/src/App.js b/src/App.js index bec5f9b..c5ddfb4 100644 --- a/src/App.js +++ b/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 { <> - + - + - + - + - + - + - + - + - + - + - + - + @@ -251,10 +267,16 @@ class App extends React.Component { <> - + - + + + + + + + diff --git a/src/CreateSet.js b/src/CreateSet.js index 7f5f4c5..c11b3f8 100644 --- a/src/CreateSet.js +++ b/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() { diff --git a/src/EditSet.js b/src/EditSet.js index d279ae4..115e309 100644 --- a/src/EditSet.js +++ b/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 = () => { diff --git a/src/GroupPage.js b/src/GroupPage.js index 0b13543..44a2213 100644 --- a/src/GroupPage.js +++ b/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() { diff --git a/src/History.js b/src/History.js index c2677b7..3b7c4ae 100644 --- a/src/History.js +++ b/src/History.js @@ -39,27 +39,27 @@ export default class History extends Component { componentDidMount() { document.title = "History | Parandum"; - + const userSets = this.state.db - .collection("sets") - .where("owner", "==", this.state.user.uid) - .orderBy("title", "asc") - .get(); + .collection("sets") + .where("owner", "==", this.state.user.uid) + .orderBy("title", "asc") + .get(); this.state.db.collection("progress") - .where("uid", "==", this.state.user.uid) - .orderBy("start_time", "desc") - .get() - .then(async (querySnapshot) => { - let complete = []; - let incomplete = []; + .where("uid", "==", this.state.user.uid) + .orderBy("start_time", "desc") + .get() + .then(async (querySnapshot) => { + let complete = []; + let incomplete = []; let totalCorrect = 0; let totalIncorrect = 0; let totalMarks = 0; let totalTime = 0; let totalPercentage = 0; let userMarkHistory = []; - + querySnapshot.docs.map((doc) => { const data = doc.data(); const pushData = { @@ -72,7 +72,7 @@ export default class History extends Component { correct: data.correct.length, progress: data.progress, }; - + totalCorrect += data.correct.length; totalIncorrect += data.incorrect.length; totalMarks += data.progress; @@ -89,7 +89,7 @@ export default class History extends Component { return incomplete.push(pushData); } }); - + this.setState({ progressHistoryComplete: complete, progressHistoryIncomplete: incomplete, @@ -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() { diff --git a/src/Home.js b/src/Home.js index 72f4142..86a66c2 100644 --- a/src/Home.js +++ b/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 (
diff --git a/src/LoggedInHome.js b/src/LoggedInHome.js index d5cb636..33f358f 100644 --- a/src/LoggedInHome.js +++ b/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(); diff --git a/src/Login.js b/src/Login.js index 91e60bb..9745fd3 100644 --- a/src/Login.js +++ b/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 ( <> diff --git a/src/PrivacyPolicy.js b/src/PrivacyPolicy.js index a7f547c..77d798c 100644 --- a/src/PrivacyPolicy.js +++ b/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 (
diff --git a/src/Progress.js b/src/Progress.js index 5bdb06d..48550c3 100644 --- a/src/Progress.js +++ b/src/Progress.js @@ -298,6 +298,16 @@ export default withRouter(class Progress extends React.Component { loading: false, 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 @@ -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) diff --git a/src/SetPage.js b/src/SetPage.js index 18ffc60..9a47860 100644 --- a/src/SetPage.js +++ b/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(); diff --git a/src/Settings.js b/src/Settings.js index a515607..ba25e3e 100644 --- a/src/Settings.js +++ b/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() { diff --git a/src/TermsOfService.js b/src/TermsOfService.js index 9e432b3..b82b855 100644 --- a/src/TermsOfService.js +++ b/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 (
diff --git a/src/UserGroups.js b/src/UserGroups.js index 232f31f..58568f4 100644 --- a/src/UserGroups.js +++ b/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(); diff --git a/src/UserSets.js b/src/UserSets.js index a9ebf4e..71b8743 100644 --- a/src/UserSets.js +++ b/src/UserSets.js @@ -51,6 +51,8 @@ export default withRouter(class UserSets extends Component { userSets: querySnapshot.docs, }) }); + + this.props.logEvent("page_view"); } componentWillUnmount() {