Add Google Analytics

This commit is contained in:
2021-09-05 21:00:02 +01:00
parent fccea836d3
commit bd355599c7
15 changed files with 117 additions and 27 deletions

View File

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

View File

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

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

View File

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

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

View File

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

View File

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

View File

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

View File

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

View File

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

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

View File

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

View File

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

View File

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

View File

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