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,42 +1,38 @@
-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 {
       showForCampaign(campaignId, campaign, complete) {
-                const period = campaign.nextTotalMeasurementPeriod
+        const period = campaign.nextTotalMeasurementPeriod;
         if (!period) {
-                    return ''
+          return "";
         }
-                let message = 'Help us improve!\n\n'
+        let message =
-                    + `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.`
+          "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))
+        complete(window.confirm(message));
-                return ''
+        return "";
       }
     }
 
-        const cleanInsightsService = new Vue({
+    class CleanInsightsServiceClass {
-            config: config,
+      constructor() {
-            data() {
+        this.config = config;
-                return {
+        this.ci = null;
-                    ci: null,
+        this.campaignId = null;
-                    campaignId: null,
+        this.requestUi = null;
-                    requestUi: null,
+        if (config) {
-                }
-            },
-            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;
@@ -46,13 +42,14 @@ export default {
         }
         this.ci.requestConsentForCampaign(this.campaignId, this.requestUi, (granted) => {
           if (!granted) {
-                            return
+            return;
           }
           this.ci.measureEvent(category, action, this.campaignId);
-                    })
-                }
-            }
         });
+      }
+    }
+
+    const cleanInsightsService = new CleanInsightsServiceClass();
     return cleanInsightsService;
-    }
+  },
-}
+};

src/services/matomo.service.js

@@ -1,17 +1,10 @@
-
 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
-                }
-            },
-            created() {
-                if (this.$options.config) {
-                    const config = this.$options.config;
           let server = config.server;
           let siteId = config.siteId;
           if (server && siteId) {
@@ -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;
             document.body.appendChild(s);
             this.initialized = true;
           }
         }
-            },
+      }
-            methods: {
+
       event(category, action) {
         if (this.initialized) {
-                        window._paq.push(['trackEvent', category, action]);
+          window._paq.push(["trackEvent", category, action]);
         }
       }
     }
-        });
+
+    const matomoService = new MatomoServiceClass();
     return matomoService;
-    }
+  },
-}
+};