Add Clean Insights analytics

Work on issue #94.

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "aes-js": "^3.1.2",
     "axios": "^0.21.0",
+    "clean-insights-sdk": "^2.4.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.3",
     "fix-webm-duration": "^1.0.0",

src/assets/config.json

@@ -1,4 +1,24 @@
 {
     "defaultServer": "https://neo.keanu.im",
-    "useShortCodeStickers": false
+    "useShortCodeStickers": false,
+    "analytics": {
+        "enabled": true,
+        "config": {
+            "server": "https://metrics.cleaninsight.org",
+            "siteid": 14,
+            "timeout": 5,
+            "persistEveryNTimes": 1,
+            "debug": true,
+            "campaigns": {
+                "beta": {
+                    "start": "2021-01-01T00:00:00-00:00",
+                    "end": "2021-12-31T23:59:59-00:00",
+                    "aggregationPeriodLength": 1,
+                    "numberOfPeriods": 90,
+                    "onlyRecordOnce": false,
+                    "eventAggregationRule": "avg"
+                }
+            }
+        }
+    }
 }

src/components/Chat.vue

@@ -1370,6 +1370,9 @@ export default {
       }
       this.sendAttachment(text);
       this.showRecorder = false;
+
+      // Log event to Clean Insights
+      this.$ci.event("Audio", "Voice message sent");
     },
 
     closeCreateRoomWelcomeHeader() {

src/main.js

@@ -5,6 +5,7 @@ import router from './router'
 import store from './store'
 import matrix from './services/matrix.service'
 import navigation from './services/navigation.service'
+import cleaninsights from './services/cleaninsights.service'
 import 'roboto-fontface/css/roboto/roboto-fontface.css'
 import 'material-design-icons-iconfont/dist/material-design-icons.css'
 import VEmojiPicker from 'v-emoji-picker';
@@ -23,6 +24,7 @@ Vue.config.productionTip = false
 Vue.use(VueResize);
 Vue.use(VEmojiPicker);
 Vue.use(matrix, { store: store });
+Vue.use(cleaninsights);
 Vue.use(VueClipboard);
 
 // Add bubble functionality to custom events.
@@ -152,5 +154,6 @@ new Vue({
   router,
   store,
   matrix,
+  cleaninsights,
   render: h => h(App)
 }).$mount('#app');

src/services/cleaninsights.service.js

@@ -0,0 +1,57 @@
+import { CleanInsights, ConsentRequestUi } from 'clean-insights-sdk';
+import config from "../assets/config";
+
+export default {
+    install(Vue) {
+
+        class RequestUi extends ConsentRequestUi {
+            showForCampaign(campaignId, campaign, complete) {
+                const period = campaign.nextTotalMeasurementPeriod        
+                if (!period) {
+                    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 ''
+            }
+        }
+
+        const cleanInsightsService = new Vue({
+            data() {
+                return {
+                    ci: null,
+                    campaignId: null,
+                    requestUi: null,
+                }
+            },
+            created() {
+                const analytics = config.analytics || {};
+                if (analytics.enabled && analytics.config) {
+                    this.ci = new CleanInsights(analytics.config);
+
+                    // Get name of first campaign in the config.
+                    this.campaignId = Object.keys(analytics.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);
+                    })
+                }
+            }
+        });
+        Vue.prototype.$ci = cleanInsightsService;
+    }
+}