Add Google Analytics
This commit is contained in:
62
src/App.js
62
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,17 +90,29 @@ class App extends React.Component {
|
||||
user: userData,
|
||||
};
|
||||
|
||||
if (userData) await firebase.firestore()
|
||||
.collection("users")
|
||||
.doc(userData.uid)
|
||||
.get()
|
||||
.then((userDoc) => {
|
||||
newState.sound = userDoc.data().sound;
|
||||
newState.theme = userDoc.data().theme;
|
||||
}).catch((error) => {
|
||||
newState.sound = true;
|
||||
newState.theme = "default";
|
||||
});
|
||||
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()
|
||||
.then((userDoc) => {
|
||||
newState.sound = userDoc.data().sound;
|
||||
newState.theme = userDoc.data().theme;
|
||||
}).catch((error) => {
|
||||
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 />
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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 = () => {
|
||||
|
||||
@@ -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}/>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user