feat: add opt-in umami analytics (WIP)

This commit is contained in:
David Ralph
2021-06-21 17:42:14 +01:00
parent 4449957fe6
commit f7c39eeebb
23 changed files with 135 additions and 10 deletions

View File

@@ -13,6 +13,7 @@ export default class ErrorBoundary extends React.PureComponent {
static getDerivedStateFromError(error) {
console.log(error);
window.analytics.postEvent('modalUpdate', 'Error occurred');
return {
error: true
};

View File

@@ -27,6 +27,7 @@ export default class Modals extends React.PureComponent {
this.setState({
welcomeModal: true
});
window.analytics.postEvent('modalUpdate', 'Opened welcome modal');
}
// hide refresh reminder once the user has refreshed the page
@@ -38,21 +39,29 @@ export default class Modals extends React.PureComponent {
this.setState({
welcomeModal: false
});
window.analytics.postEvent('modalUpdate', 'Closed welcome modal');
}
toggleModal(type, action) {
this.setState({
[type]: action
});
window.analytics.postEvent('modalUpdate', `${(action === false) ? 'Closed' : 'Opened'} ${type.replace('Modal', '')} modal`);
}
render() {
return (
<>
<Navbar openModal={(modal) => this.setState({ [modal]: true })}/>
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
<Main modalClose={() => this.setState({ mainModal: false })}/>
<Navbar openModal={(modal) => this.toggleModal(modal, true)}/>
<Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
<Main modalClose={() => this.toggleModal('mainModal', false)}/>
</Modal>
<React.Suspense fallback={renderLoader()}>
<Modal closeTimeoutMS={300} onRequestClose={() => this.closeWelcome()} isOpen={this.state.welcomeModal} className='Modal welcomemodal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
<Welcome modalClose={() => this.closeWelcome()}/>
</Modal>
<Modal closeTimeoutMS={300} onRequestClose={() => this.setState({ feedbackModal: false })} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
<Feedback modalClose={() => this.setState({ feedbackModal: false })}/>
<Modal closeTimeoutMS={300} onRequestClose={() => this.toggleModal('feedbackModal', false)} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
<Feedback modalClose={() => this.toggleModal('feedbackModal', false)}/>
</Modal>
</React.Suspense>
</>

View File

@@ -1,4 +1,6 @@
export default function Lightbox(props) {
window.analytics.postEvent('modalUpdate', 'Lightbox used');
return (
<>
<span className='closeModal' onClick={props.modalClose}>&times;</span>

View File

@@ -42,6 +42,7 @@ export default class Added extends React.PureComponent {
},
button: this.buttons.uninstall
});
window.analytics.postEvent('marketplaceUpdate', `Item viewed`);
} else {
this.setState({
item: {}
@@ -58,9 +59,11 @@ export default class Added extends React.PureComponent {
button: '',
installed: JSON.parse(localStorage.getItem('installed'))
});
window.analytics.postEvent('marketplaceUpdate', 'Uninstall used');
}
sortAddons(value) {
sortAddons(value, sendEvent) {
let installed = JSON.parse(localStorage.getItem('installed'));
switch (value) {
case 'newest':
@@ -82,10 +85,14 @@ export default class Added extends React.PureComponent {
this.setState({
installed: installed
});
if (sendEvent) {
window.analytics.postEvent('marketplaceUpdate', 'Sort used');
}
}
componentDidMount() {
this.sortAddons(localStorage.getItem('sortAddons'));
this.sortAddons(localStorage.getItem('sortAddons'), false);
}
render() {

View File

@@ -67,6 +67,8 @@ export default class Marketplace extends React.PureComponent {
},
button: button
});
window.analytics.postEvent('marketplaceItemUpdate', `${this.state.item.display_name} viewed`);
} else {
this.setState({
item: {}
@@ -89,7 +91,7 @@ export default class Marketplace extends React.PureComponent {
done: true
});
this.sortMarketplace(localStorage.getItem('sortMarketplace'));
this.sortMarketplace(localStorage.getItem('sortMarketplace'), false);
}
manage(type) {
@@ -103,9 +105,12 @@ export default class Marketplace extends React.PureComponent {
this.setState({
button: (type === 'install') ? this.buttons.uninstall : this.buttons.install
});
window.analytics.postEvent('marketplaceItemUpdate', `${this.state.item.display_name} ${(type === 'install' ? 'installed': 'uninstalled')}`);
window.analytics.postEvent('marketplaceUpdate', `${(type === 'install' ? 'Install': 'Uninstall')} used`);
}
sortMarketplace(value) {
sortMarketplace(value, sendEvent) {
let items = this.state.oldItems;
switch (value) {
case 'a-z':
@@ -127,6 +132,10 @@ export default class Marketplace extends React.PureComponent {
items: items,
sortType: value
});
if (sendEvent) {
window.analytics.postEvent('marketplaceUpdate', 'Sort used');
}
}
componentDidMount() {
@@ -154,11 +163,15 @@ export default class Marketplace extends React.PureComponent {
};
const featured = () => {
const openFeatured = () => {
window.analytics.postEvent('marketplaceUpdate', 'Featured click used');
window.open(this.state.featured.buttonLink);
}
return (
<div className='featured' style={{ 'backgroundColor': this.state.featured.colour }}>
<p>{this.state.featured.title}</p>
<h1>{this.state.featured.name}</h1>
<button className='addToMue' onClick={() => window.open(this.state.featured.buttonLink)}>{this.state.featured.buttonText}</button>
<button className='addToMue' onClick={() => openFeatured()}>{this.state.featured.buttonText}</button>
</div>
);
}

View File

@@ -10,6 +10,7 @@ export default function Sideload() {
const install = (input) => {
MarketplaceFunctions.install(input.type, input);
toast(window.language.toasts.installed);
window.analytics.postEvent('marketplaceUpdate', 'Sideload used');
};
return (

View File

@@ -21,6 +21,8 @@ export default class Checkbox extends React.PureComponent {
checked: (this.state.checked === true) ? false : true
});
window.analytics.postEvent('settingUpdate', `${(this.state.checked === true) ? 'Enabled' : 'Disabled'} setting ${this.props.name}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';

View File

@@ -22,6 +22,8 @@ export default class Dropdown extends React.PureComponent {
return;
}
window.analytics.postEvent('settingUpdate', `Changed setting ${this.props.name} from ${this.state.value} to ${value}`);
this.setState({
value: value,
title: e.target[e.target.selectedIndex].text

View File

@@ -29,6 +29,8 @@ export default class Radio extends React.PureComponent {
value: value
});
window.analytics.postEvent('settingUpdate', `Changed setting ${this.props.name} from ${this.state.value} to ${value}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';

View File

@@ -19,6 +19,8 @@ export default class Slider extends React.PureComponent {
handleChange = (e, text) => {
let { value } = e.target;
window.analytics.postEvent('settingUpdate', `Changed setting ${this.props.name} from ${this.state.value} to ${value}`);
if (text) {
if (value === '') {
return this.setState({

View File

@@ -21,6 +21,8 @@ export default class Switch extends React.PureComponent {
checked: (this.state.checked === true) ? false : true
});
window.analytics.postEvent('settingUpdate', `${(this.state.checked === true) ? 'Enabled' : 'Disabled'} setting ${this.props.name}`);
if (this.props.element) {
if (!document.querySelector(this.props.element)) {
document.querySelector('.reminder-info').style.display = 'block';

View File

@@ -13,6 +13,7 @@ export default class Tabs extends React.PureComponent {
}
onClick = (tab) => {
window.analytics.postEvent('tabUpdate', `Changed tab from ${this.state.currentTab} to ${tab}`);
this.setState({
currentTab: tab
});