added opt in/out and some events`

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -6,6 +6,7 @@ const csjs = require('csjs-inject')
 const EventEmitter = require('events')
 const LocalPlugin = require('./local-plugin')
 const addToolTip = require('../ui/tooltip')
+const _paq = window._paq = window._paq || []
 
 const css = csjs`
   .pluginSearch {
@@ -101,6 +102,16 @@ class PluginManagerComponent extends ViewPlugin {
     return this.appManager.actives.includes(name)
   }
 
+  activate (name) {
+    this.appManager.activatePlugin(profile.name)
+    _paq.push(['trackEvent', 'manager', 'activate', name])
+  }
+
+  deactivate (name) {
+    this.appManager.deactivatePlugin(profile.name)
+    _paq.push(['trackEvent', 'manager', 'deactivate', name])
+  }
+
   renderItem (profile) {
     const displayName = (profile.displayName) ? profile.displayName : profile.name
 
@@ -118,7 +129,7 @@ class PluginManagerComponent extends ViewPlugin {
     const activationButton = this.isActive(profile.name)
       ? yo`
       <button
-        onclick="${_ => this.appManager.deactivatePlugin(profile.name)}"
+        onclick="${_ => this.deactivate(profile.name)}"
         class="btn btn-secondary btn-sm" data-id="pluginManagerComponentDeactivateButton${profile.name}"
       >
         Deactivate
@@ -126,7 +137,7 @@ class PluginManagerComponent extends ViewPlugin {
       `
       : yo`
       <button
-        onclick="${_ => this.appManager.activatePlugin(profile.name)}"
+        onclick="${_ => this.activate(profile.name)}"
         class="btn btn-success btn-sm" data-id="pluginManagerComponentActivateButton${profile.name}"
       >
         Activate

apps/remix-ide/src/app/tabs/settings-tab.js

@@ -40,7 +40,6 @@ module.exports = class SettingsTab extends ViewPlugin {
       useMatomoAnalytics: null,
       useMatomoAnalyticsLabel: null,
       useMatomoAnalyticsMode: null,
-      matomo: null,
       warnPersonalMode: null,
       generateContractMetadata: null,
       generateContractMetadataLabel: null,
@@ -143,13 +142,6 @@ module.exports = class SettingsTab extends ViewPlugin {
     this._view.themes = this._deps.themeModule.getThemes()
     this._view.themesCheckBoxes = this.createThemeCheckies()
 
-    this._view.matomo = yo`
-      <div class="custom-control custom-checkbox mb-1">
-        ${this._view.useMatomoAnalytics}>
-        ${this._view.useMatomoAnalyticsLabel}
-      </div>
-    `
-
     this._view.config.general = yo`
       <div class="${css.info} border-top">
         <div class="card-body pt-3 pb-2">
@@ -170,7 +162,10 @@ module.exports = class SettingsTab extends ViewPlugin {
             ${this._view.personal}
             ${this._view.personalLabel}
           </div>
-
+          <div class="custom-control custom-checkbox mb-1">
+            ${this._view.useMatomoAnalytics}>
+            ${this._view.useMatomoAnalyticsLabel}
+          </div>
         </div>
       </div>
       `
@@ -223,11 +218,14 @@ module.exports = class SettingsTab extends ViewPlugin {
       self.config.set('settings/personal-mode', !isChecked)
       elementStateChanged(self._view.personalLabel, isChecked)
     }
-    function onchangeMatomoAnalytics () {
-      const isChecked = self.config.get('settings/matomo-analytics')
-
-      self.config.set('settings/matomo-analytics', !isChecked)
-      elementStateChanged(self._view.useMatomoAnalyticsLabel, isChecked)
+    function onchangeMatomoAnalytics (event) {
+      elementStateChanged(self._view.useMatomoAnalyticsLabel, event.target.checked)
+      const _paq = window._paq = window._paq || []
+      if (this.checked) {
+        _paq.push(['forgetUserOptOut'])
+      } else {
+        _paq.push(['optUserOut'])
+      }
     }
 
     function elementStateChanged (el, isChanged) {

apps/remix-ide/src/app/ui/landing-page/landing-page.js

@@ -5,10 +5,11 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const globalRegistry = require('../../../global/registry')
 const CompilerImport = require('../../compiler/compiler-imports')
-var modalDialogCustom = require('../modal-dialog-custom')
-var tooltip = require('../tooltip')
-var GistHandler = require('../../../lib/gist-handler')
-var QueryParams = require('../../../lib/query-params.js')
+const modalDialogCustom = require('../modal-dialog-custom')
+const tooltip = require('../tooltip')
+const GistHandler = require('../../../lib/gist-handler')
+const QueryParams = require('../../../lib/query-params.js')
+const _paq = window._paq = window._paq || []
 
 const css = csjs`
   .text {
@@ -219,10 +220,12 @@ export class LandingPage extends ViewPlugin {
       this.mediumPanel.classList.remove('d-block')
       this.mediumPanel.classList.add('d-none')
       this.twitterPanel.classList.toggle('d-block')
+      _paq.push(['trackEvent', 'pluginManager', 'media', 'twitter'])
     } else {
       this.twitterPanel.classList.remove('d-block')
       this.twitterPanel.classList.add('d-none')
       this.mediumPanel.classList.toggle('d-block')
+      _paq.push(['trackEvent', 'pluginManager', 'media', 'medium'])
     }
   }
 
@@ -258,22 +261,27 @@ export class LandingPage extends ViewPlugin {
     const startSolidity = async () => {
       await this.appManager.activatePlugin(['solidity', 'udapp', 'solidityStaticAnalysis', 'solidityUnitTesting'])
       this.verticalIcons.select('solidity')
+      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solidity'])
     }
     const startDebugger = async () => {
       await this.appManager.activatePlugin('debugger')
       this.verticalIcons.select('debugger')
+      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'debugger'])
     }
     const startSolhint = async () => {
       await this.appManager.activatePlugin(['solidity', 'solhint'])
       this.verticalIcons.select('solhint')
+      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'solhint'])
     }
     const startLearnEth = async () => {
       await this.appManager.activatePlugin(['solidity', 'LearnEth', 'solidityUnitTesting'])
       this.verticalIcons.select('LearnEth')
+      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'learnEth'])
     }
     const startSourceVerify = async () => {
       await this.appManager.activatePlugin(['solidity', 'source-verification'])
       this.verticalIcons.select('source-verification')
+      _paq.push(['trackEvent', 'pluginManager', 'userActivate', 'source-verification'])
     }
     const startPluginManager = async () => {
       await this.appManager.activatePlugin('pluginManager')

apps/remix-ide/src/remixAppManager.js

@@ -66,7 +66,7 @@ export class RemixAppManager extends PluginManager {
   onPluginActivated (plugin) {
     this.pluginLoader.set(plugin, this.actives)
     this.event.emit('activate', plugin)
-    _paq.push(['trackEvent', 'pluginManager', 'activate', plugin])
+    _paq.push(['trackEvent', 'pluginManager', 'activate', plugin.name])
   }
 
   getAll () {
@@ -82,7 +82,7 @@ export class RemixAppManager extends PluginManager {
   onPluginDeactivated (plugin) {
     this.pluginLoader.set(plugin, this.actives)
     this.event.emit('deactivate', plugin)
-    _paq.push(['trackEvent', 'pluginManager', 'deactivate', plugin])
+    _paq.push(['trackEvent', 'pluginManager', 'deactivate', plugin.name])
   }
 
   isRequired (name) {