Switch to plausible

src/manifest.json

@@ -53,5 +53,5 @@
   },
 
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval' https://scripts.simpleanalyticscdn.com; object-src 'self'"
+  "content_security_policy": "script-src 'self' 'unsafe-eval' https://scripts.simpleanalyticscdn.com https://a.vantezzen.io; object-src 'self'"
 }

src/pages/popup/Popup.tsx

@@ -72,6 +72,13 @@ class Popup extends Component {
           sa.setAttribute('data-collect-dnt', 'true');
           sa.setAttribute('data-hostname', 'skipsilence.analytics.vantezzen.io');
           document.body.appendChild(sa);
+
+          const plausible = document.createElement('script');
+          plausible.setAttribute('data-domain', 'skipsilence.a.vantezzen.io');
+          plausible.async = true;
+          plausible.defer = true;
+          plausible.src = "https://a.vantezzen.io/js/plausible.js";
+          document.body.appendChild(plausible);
         }
       }
     });
@@ -87,6 +94,7 @@ class Popup extends Component {
           });
         }
         window.sa_event(`open_${url.host}`);
+        window.plausible('open', { props: { site: url.host } });
       }
     });
   }
@@ -194,22 +202,22 @@ class Popup extends Component {
               config={this.config}
             />
             <p className="small">
-              "Skip Silence" uses <a href="https://simpleanalytics.com/">Simple Analytics</a> to collect some anonymized analytics.<br />
-              Simple Analytics allows collecting some really basic data about usage of the extension without reducing your privacy.
-              If you do not want that, you can completely opt-out of this.<br />
+              "Skip Silence" uses <a href="https://simpleanalytics.com/">Simple Analytics</a> and Plausible to collect a few anonymized analytics without reducing your privacy.<br />
+              This data allows us to better understand how users use our extension and how we can improve it.<br />
+              We understand that some people do not like sending anonymized analytics, so you can completely opt-out of this!<br />
               You will need to close and re-open this popup after changing this setting in order for it to take effect.
             </p>
           </>
         )}
 
         <div className="plugin-info">
           Developed by <a href="https://github.com/vantezzen" target="_blank">vantezzen</a>.<br />
-          <a href="https://www.buymeacoffee.com/vantezzen" target="_blank" onClick={() => window.sa_event('coffee')}>
+          <a href="https://www.buymeacoffee.com/vantezzen" target="_blank" onClick={() => {window.sa_event('coffee');window.plausible('coffee')}}>
             <img src="assets/img/bmc.png" alt="Buy Me A Coffee" width="150" />
           </a>
           <br />
 
-          <a href="#" onClick={() => {window.sa_event('reshow_training');this.setState({ shouldShowIntro: true })}}>
+          <a href="#" onClick={() => {window.sa_event('reshow_training');window.plausible('reshow_training');this.setState({ shouldShowIntro: true })}}>
             Show the training screen again
           </a>
         </div>

src/pages/popup/index.jsx

@@ -9,5 +9,6 @@ import 'fontsource-poppins/600.css';
 
 // Simple Analytics Event Wrapper
 window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};
+window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
 
 render(<Popup />, window.document.querySelector('#app-container'));

src/pages/shared/components/speedSetting.tsx

@@ -30,6 +30,7 @@ const SpeedSetting = ({ label, name, config } : SpeedSettingProps) => {
 
               if (config.env === "popup") {
                 window.sa_event(`speed_${name}_custom_${evt.target.value}`);
+                window.plausible('speed_custom', { props: { name, speed: evt.target.value } });
               }
             }}
             step={0.1}
@@ -41,6 +42,7 @@ const SpeedSetting = ({ label, name, config } : SpeedSettingProps) => {
 
             if (config.env === "popup") {
               window.sa_event(`speed_${name}_dropdown`);
+              window.plausible('speed_use_dropdown');
             }
 
             // Find nearest speed setting to the current one
@@ -67,6 +69,7 @@ const SpeedSetting = ({ label, name, config } : SpeedSettingProps) => {
             }
             if (config.env === "popup") {
               window.sa_event(`speed_${name}_dropdown_${evt.target.value}`);
+              window.plausible('speed_dropdown', { props: { name, speed: evt.target.value } });
             }
           }}
           value={value}

src/pages/shared/components/switch.tsx

@@ -17,6 +17,7 @@ const Switch = ({ label, name, config } : SwitchProps) => {
 
         if (config.env === "popup") {
           window.sa_event(`setting_${name}_${evt.target.checked ? 'enable' : 'disable'}`);
+          window.plausible('setting_change', { props: { type: `${name}:${evt.target.checked ? 'enable' : 'disable'}` } });
         }
       }} />
       <label htmlFor={name}>{label}</label>

src/typings.d.ts

@@ -1,3 +1,4 @@
 declare interface Window {
   sa_event: (name : string, callback?: () => void) => void
+  plausible: (name : string, options?: { callback?: () => void, props?: { [key: string]: any } }) => void
 };