feat: add opt-in umami analytics (WIP)

src/App.jsx

@@ -30,6 +30,8 @@ export default class App extends React.PureComponent {
         SettingsFunctions.loadSettings(true);
       }
     });
+
+    window.analytics.tabLoad();
   }
 
   render() {

src/components/modals/ErrorBoundary.jsx

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

src/components/modals/Modals.jsx

@@ -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 })}/>
+        <Navbar openModal={(modal) => this.toggleModal(modal, true)}/>
-        <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.setState({ mainModal: false })} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
+        <Modal closeTimeoutMS={300} id='modal' onRequestClose={() => this.toggleModal('mainModal', false)} isOpen={this.state.mainModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
-          <Main modalClose={() => this.setState({ mainModal: 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}>
+          <Modal closeTimeoutMS={300} onRequestClose={() => this.toggleModal('feedbackModal', false)} isOpen={this.state.feedbackModal} className='Modal mainModal' overlayClassName='Overlay' ariaHideApp={false}>
-            <Feedback modalClose={() => this.setState({ feedbackModal: false })}/>
+            <Feedback modalClose={() => this.toggleModal('feedbackModal', false)}/>
           </Modal>
         </React.Suspense>
       </>

src/components/modals/main/marketplace/Lightbox.jsx

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

src/components/modals/main/marketplace/sections/Added.jsx

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

src/components/modals/main/marketplace/sections/Marketplace.jsx

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

src/components/modals/main/marketplace/sections/Sideload.jsx

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

src/components/modals/main/settings/Checkbox.jsx

@@ -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';

src/components/modals/main/settings/Dropdown.jsx

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

src/components/modals/main/settings/Radio.jsx

@@ -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';

src/components/modals/main/settings/Slider.jsx

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

src/components/modals/main/settings/Switch.jsx

@@ -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';

src/components/modals/main/tabs/backend/Tabs.jsx

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

src/components/widgets/background/Favourite.jsx

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

src/components/widgets/background/Maximise.jsx

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

src/components/widgets/background/PhotoInformation.jsx

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

src/components/widgets/navbar/Notes.jsx

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

src/components/widgets/quicklinks/QuickLinks.jsx

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

src/components/widgets/quote/Quote.jsx

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

src/components/widgets/search/Search.jsx

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

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

src/modules/constants.js

@@ -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'; 

src/modules/helpers/analytics.js

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