me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Google Analytics

Browse Source
This commit is contained in:
Matthew Grove
2021-09-12 11:24:13 +01:00
parent 7eb9070014
commit bcb8511b7e
15 changed files with 127 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/App.js
View File

@@ -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 />

2
src/CreateSet.js
View File

@@ -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() {

5
src/EditSet.js
View File

@@ -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 = () => {

5
src/GroupPage.js
View File

@@ -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() {

2
src/History.js
View File

@@ -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() {

8
src/Home.js
View File

@@ -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} />

6
src/LoggedInHome.js
View File

@@ -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();

6
src/Login.js
View File

@@ -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 />

8
src/PrivacyPolicy.js
View File

@@ -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} />

14
src/Progress.js
View File

@@ -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)

9
src/SetPage.js
View File

@@ -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();

2
src/Settings.js
View File

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

8
src/TermsOfService.js
View File

@@ -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} />

6
src/UserGroups.js
View File

@@ -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();

2
src/UserSets.js
View File

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