mirror of https://github.com/mue/mue.git
feat: add opt-in umami analytics (WIP)
This commit is contained in:
parent
4449957fe6
commit
f7c39eeebb
|
@ -30,6 +30,8 @@ export default class App extends React.PureComponent {
|
|||
SettingsFunctions.loadSettings(true);
|
||||
}
|
||||
});
|
||||
|
||||
window.analytics.tabLoad();
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
export default function Lightbox(props) {
|
||||
window.analytics.postEvent('modalUpdate', 'Lightbox used');
|
||||
|
||||
return (
|
||||
<>
|
||||
<span className='closeModal' onClick={props.modalClose}>×</span>
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
});
|
||||
|
|
|
@ -19,6 +19,7 @@ export default class Favourite extends React.PureComponent {
|
|||
this.setState({
|
||||
favourited: <StarIcon2 onClick={this.favourite} className='topicons' />
|
||||
});
|
||||
window.analytics.postEvent('featureUpdate', 'Feature background favourite used');
|
||||
} else {
|
||||
const url = document.getElementById('backgroundImage').style.backgroundImage.replace('url("', '').replace('")', '');
|
||||
|
||||
|
@ -37,6 +38,7 @@ export default class Favourite extends React.PureComponent {
|
|||
this.setState({
|
||||
favourited: <StarIcon onClick={this.favourite} className='topicons' />
|
||||
});
|
||||
window.analytics.postEvent('featureUpdate', 'Feature background unfavourite used');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -44,12 +44,14 @@ export default class Maximise extends React.PureComponent {
|
|||
});
|
||||
|
||||
this.setAttribute(0, 100);
|
||||
window.analytics.postEvent('featureUpdate', 'Feature background maximise used');
|
||||
} else {
|
||||
this.setState({
|
||||
hidden: false
|
||||
});
|
||||
|
||||
this.setAttribute(localStorage.getItem('blur'), localStorage.getItem('brightness'), true);
|
||||
window.analytics.postEvent('featureUpdate', 'Feature background unmaximise used');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -18,6 +18,7 @@ const downloadImage = async (info) => {
|
|||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
window.analytics.postEvent('featureUpdate', 'Feature background download used');
|
||||
};
|
||||
|
||||
export default function PhotoInformation(props) {
|
||||
|
|
|
@ -25,6 +25,7 @@ export default class Notes extends React.PureComponent {
|
|||
};
|
||||
|
||||
pin() {
|
||||
window.analytics.postEvent('featureUpdate', 'Feature notes pin used');
|
||||
document.getElementById('noteContainer').classList.toggle('visibilityshow');
|
||||
|
||||
if (localStorage.getItem('notesPinned') === 'true') {
|
||||
|
@ -35,6 +36,7 @@ export default class Notes extends React.PureComponent {
|
|||
}
|
||||
|
||||
copy() {
|
||||
window.analytics.postEvent('featureUpdate', 'Feature notes copy used');
|
||||
// this.state.notes doesnt work for some reason
|
||||
navigator.clipboard.writeText(localStorage.getItem('notes'));
|
||||
toast(window.language.toasts.notes);
|
||||
|
|
|
@ -31,6 +31,8 @@ export default class QuickLinks extends React.PureComponent {
|
|||
this.setState({
|
||||
items: data
|
||||
});
|
||||
|
||||
window.analytics.postEvent('featureUpdate', 'Feature delete quicklink used');
|
||||
}
|
||||
|
||||
addLink = () => {
|
||||
|
@ -73,6 +75,8 @@ export default class QuickLinks extends React.PureComponent {
|
|||
url: ''
|
||||
});
|
||||
|
||||
window.analytics.postEvent('featureUpdate', 'Feature add quicklink used');
|
||||
|
||||
this.toggleAdd();
|
||||
}
|
||||
|
||||
|
|
|
@ -150,11 +150,13 @@ export default class Quote extends React.PureComponent {
|
|||
}
|
||||
|
||||
copyQuote = () => {
|
||||
window.analytics.postEvent('featureUpdate', 'Feature quote copy used');
|
||||
navigator.clipboard.writeText(`${this.state.quote} - ${this.state.author}`);
|
||||
toast(window.language.toasts.quote);
|
||||
}
|
||||
|
||||
tweetQuote = () => {
|
||||
window.analytics.postEvent('featureUpdate', 'Feature quote tweet used');
|
||||
window.open(`https://twitter.com/intent/tweet?text=${this.state.quote} - ${this.state.author} on @getmue`, '_blank').focus();
|
||||
}
|
||||
|
||||
|
@ -170,6 +172,8 @@ export default class Quote extends React.PureComponent {
|
|||
favourited: <StarIcon className='copyButton' onClick={this.favourite} />
|
||||
});
|
||||
}
|
||||
|
||||
window.analytics.postEvent('featureUpdate', 'Feature quote favourite used');
|
||||
}
|
||||
|
||||
init() {
|
||||
|
|
|
@ -44,6 +44,7 @@ export default class Search extends React.PureComponent {
|
|||
}
|
||||
|
||||
setTimeout(() => {
|
||||
window.analytics.postEvent('featureUpdate', 'Feature voice search used');
|
||||
window.location.href = this.state.url + `?${this.state.query}=` + searchText.value;
|
||||
}, 1000);
|
||||
};
|
||||
|
@ -58,6 +59,7 @@ export default class Search extends React.PureComponent {
|
|||
value = document.getElementById('searchtext').value || 'mue fast';
|
||||
}
|
||||
|
||||
window.analytics.postEvent('featureUpdate', 'Feature search used');
|
||||
window.location.href = this.state.url + `?${this.state.query}=` + value;
|
||||
}
|
||||
|
||||
|
|
11
src/index.js
11
src/index.js
|
@ -10,6 +10,9 @@ import 'react-toastify/dist/ReactToastify.min.css';
|
|||
|
||||
import '@fontsource/lexend-deca/400.css';
|
||||
|
||||
// this is opt-in btw
|
||||
import Analytics from './modules/helpers/analytics';
|
||||
|
||||
// language
|
||||
import merge from '@material-ui/utils/esm/deepmerge';
|
||||
|
||||
|
@ -36,6 +39,14 @@ if (window.languagecode !== 'en_GB' || window.languagecode !== 'en_US') {
|
|||
}
|
||||
|
||||
window.constants = Constants;
|
||||
if (localStorage.getItem('analytics') === 'true' && localStorage.getItem('offlineMode') !== 'true') {
|
||||
window.analytics = new Analytics(window.constants.UMAMI_ID);
|
||||
} else {
|
||||
window.analytics = {
|
||||
tabLoad: () => '',
|
||||
postEvent: () => ''
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<App/>,
|
||||
|
|
|
@ -9,6 +9,8 @@ export const GITHUB_URL = 'https://api.github.com';
|
|||
export const BLOG_POST = 'https://blog.muetab.com/posts/version-5-1';
|
||||
export const FEEDBACK_FORM = 'https://api.formcake.com/api/form/349b56cb-7e2b-4004-b32b-e8964d217dd1/submission';
|
||||
export const DDG_PROXY = 'https://external-content.duckduckgo.com/iu/?u=';
|
||||
export const UMAMI_DOMAIN = 'https://umami.muetab.com';
|
||||
export const UMAMI_ID = '1b97e723-199c-48d8-8992-17c4e22d4f3c';
|
||||
export const OFFLINE_IMAGES = 20;
|
||||
export const BETA_VERSION = false;
|
||||
export const VERSION = '5.1.0';
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
export default class Analytics {
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
this.domain = window.constants.UMAMI_DOMAIN;
|
||||
}
|
||||
|
||||
async postEvent(type, name) {
|
||||
await fetch(this.domain + '/api/collect', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'event',
|
||||
payload: {
|
||||
website: this.id,
|
||||
url: '/',
|
||||
event_type: type,
|
||||
event_value: name.toLowerCase().replaceAll(' ', '-'),
|
||||
hostname: 'localhost',
|
||||
language: localStorage.getItem('language').replace('_', '-'),
|
||||
screen: `${window.screen.width}x${window.screen.height}`
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
async tabLoad() {
|
||||
await fetch(this.domain + '/api/collect', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'pageview',
|
||||
payload: {
|
||||
website: this.id,
|
||||
url: '/',
|
||||
referrer: '',
|
||||
hostname: 'localhost',
|
||||
language: localStorage.getItem('language').replace('_', '-'),
|
||||
screen: `${window.screen.width}x${window.screen.height}`
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue