Fix Matomo and CI analytics plugins

src/services/analytics.service.js

@@ -20,13 +20,13 @@ export default {
               switch (type) {
                 case "ci":
                   {
-                    let engine = cleaninsights.install(Vue, engineConfig.config);
+                    let engine = cleaninsights.install(app, engineConfig.config);
                     this.engines.push(engine);
                   }
                   break;
                 case "matomo":
                   {
-                    let engine = matomo.install(Vue, engineConfig.config);
+                    let engine = matomo.install(app, engineConfig.config);
                     this.engines.push(engine);
                   }
                   break;

src/services/cleaninsights.service.js

@@ -1,58 +1,55 @@
-import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk';
+import { CleanInsights, ConsentRequestUi } from "clean-insights-sdk";
 
 export default {
-    install(Vue, config) {
+  install(app, config) {
-
+    class RequestUi extends ConsentRequestUi {
-        class RequestUi extends ConsentRequestUi {
+      showForCampaign(campaignId, campaign, complete) {
-            showForCampaign(campaignId, campaign, complete) {
+        const period = campaign.nextTotalMeasurementPeriod;
-                const period = campaign.nextTotalMeasurementPeriod
+        if (!period) {
-                if (!period) {
+          return "";
-                    return ''
-                }
-                let message = 'Help us improve!\n\n'
-                    + `We would like to collect anonymous usage data between ${period.start.format('LLL')} and ${period.end.format('LLL')} to improve the quality of the product.\n\nYour help would be highly appreciated.`
-
-                complete(window.confirm(message))
-                return ''
-            }
         }
+        let message =
+          "Help us improve!\n\n" +
+          `We would like to collect anonymous usage data between ${period.start.format("LLL")} and ${period.end.format(
+            "LLL"
+          )} to improve the quality of the product.\n\nYour help would be highly appreciated.`;
 
-        const cleanInsightsService = new Vue({
+        complete(window.confirm(message));
-            config: config,
+        return "";
-            data() {
+      }
-                return {
-                    ci: null,
-                    campaignId: null,
-                    requestUi: null,
-                }
-            },
-            created() {
-                if (this.$options.config) {
-                    const config = this.$options.config;
-                    this.ci = new CleanInsights(config);
-
-                    // Get name of first campaign in the config.
-                    this.campaignId = Object.keys(config.campaigns || { invalid: {} })[0];                
-
-                }
-            },
-            methods: {
-                event(category, action) {
-                    if (!this.ci) {
-                        return;
-                    }
-                    if (!this.requestUi) {
-                        this.requestUi = new RequestUi();
-                    }
-                    this.ci.requestConsentForCampaign(this.campaignId, this.requestUi, (granted) => {
-                        if (!granted) {
-                            return
-                        }
-                        this.ci.measureEvent(category, action, this.campaignId);
-                    })
-                }
-            }
-        });
-        return cleanInsightsService;
     }
-}
+
+    class CleanInsightsServiceClass {
+      constructor() {
+        this.config = config;
+        this.ci = null;
+        this.campaignId = null;
+        this.requestUi = null;
+        if (config) {
+          this.ci = new CleanInsights(config);
+
+          // Get name of first campaign in the config.
+          this.campaignId = Object.keys(config.campaigns || { invalid: {} })[0];
+        }
+      }
+
+      event(category, action) {
+        if (!this.ci) {
+          return;
+        }
+        if (!this.requestUi) {
+          this.requestUi = new RequestUi();
+        }
+        this.ci.requestConsentForCampaign(this.campaignId, this.requestUi, (granted) => {
+          if (!granted) {
+            return;
+          }
+          this.ci.measureEvent(category, action, this.campaignId);
+        });
+      }
+    }
+
+    const cleanInsightsService = new CleanInsightsServiceClass();
+    return cleanInsightsService;
+  },
+};

src/services/matomo.service.js

@@ -1,24 +1,17 @@
-
 export default {
-    install(Vue, config) {
+  install(app, config) {
-
+    class MatomoServiceClass {
-        const matomoService = new Vue({
+      constructor() {
-            config: config,
+        this.config = config;
-            data() {
+        this.initialized = false;
-                return {
+        if (config) {
-                    initialized: false
+          let server = config.server;
-                }
+          let siteId = config.siteId;
-            },
+          if (server && siteId) {
-            created() {
+            if (!server.endsWith("/")) {
-                if (this.$options.config) {
+              server = server + "/";
-                    const config = this.$options.config;
+            }
-                    let server = config.server;
+            let script = `
-                    let siteId = config.siteId;
-                    if (server && siteId) {
-                        if (!server.endsWith("/")) {
-                            server = server + "/";
-                        }
-                        let script = `
                           var _paq = window._paq = window._paq || [];
                           /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
 			  _paq.push(['trackPageView', ' ', window.location.hostname]);
@@ -31,21 +24,22 @@ export default {
                             g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
                           })();
                         `;
-                        var s = document.createElement('script');
+            var s = document.createElement("script");
-                        s.innerHTML = script;
+            s.innerHTML = script;
-                        document.body.appendChild(s);   
+            document.body.appendChild(s);
-                        this.initialized = true;
+            this.initialized = true;
-                    }
+          }
-                }
+        }
-            },
+      }
-            methods: {
+
-                event(category, action) {
+      event(category, action) {
-                    if (this.initialized) {
+        if (this.initialized) {
-                        window._paq.push(['trackEvent', category, action]);
+          window._paq.push(["trackEvent", category, action]);
-                    }
+        }
-                }
+      }
-            }
-        });
-        return matomoService;
     }
-}
+
+    const matomoService = new MatomoServiceClass();
+    return matomoService;
+  },
+};