feat(analytics): Create a tiny Vue plugin for tracking events

Added $track instance method to enable passing event to background page for pushing to analytics

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "cleanup": "rm -rf build",
-    "build": "node scripts/build-manifest.js && webpack --env=prod -p",
+    "build": "npm run cleanup && node scripts/build-manifest.js && webpack --env=prod -p",
     "cz": "git-cz",
     "commitmsg": "validate-commit-msg",
     "lint": "eslint -c .eslintrc ./src/",

src/js/background.js

@@ -31,4 +31,13 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
       title: request.documentTitle,
     })
   }
+
+  if(request.eventType === 'GA_SEND_EVENT') {
+    // see https://developers.google.com/analytics/devguides/collection/analyticsjs/events
+    window.ga('send', {
+      hitType: 'event',
+      eventCategory: request.componentName,
+      eventAction: request.componentAction,
+    })
+  }
 })

src/js/components/App.vue

@@ -31,11 +31,11 @@
            :pois="pois"
            @poi-added="addPoi"
            @poi-removed="removePoi" />
-      
+
       <div class="row-title">
         <h3>{{$t('noise.header')}}</h3>
       </div>
-      
+
       <div class="row">
         <div class="col">
           <i class="fa fa-sun-o" aria-hidden="true"></i> {{ noiseLevel.day }}
@@ -111,16 +111,16 @@ export default {
     },
     toggleWidget(event) {
       $('.reality-panel').toggleClass('reality-panel-closed');
-      ga('rr.send', 'event', 'App-Panel', 'toggle-clicked');
+      this.$track({ componentName: 'Applicaiton', componentAction: 'toggle' });
     },
     addPoi(newPoi, type) {
       RR.logDebug('Adding POI', newPoi);
-      ga('rr.send', 'event', 'Availibility-Component', 'addPoi', type /*[eventLabel]*/);
+      this.$track({ componentName: 'Applicaiton', componentAction: `poi:add:${type}` });
       this.pois.push({ address: { input: newPoi }, duration: '' });
     },
     removePoi(poi, index) {
       RR.logDebug('Removing poi', poi, 'with index', index, ' from pois:', this.pois);
-      ga('rr.send', 'event', 'Availibility-Component', 'removePoi');
+      this.$track({ componentName: 'Application', componentAction: 'poi:remove' });
       this.pois.splice(index, 1);
     }
   },

src/js/components/Availability.vue

@@ -79,7 +79,7 @@ export default {
     },
     cancelInputBox: function(event) {
       RR.logDebug('Cancelling input box');
-      ga('rr.send', 'event', 'Availibility-Component', 'cancel-input-box-clicked'); /* TODO: mbernhard - should be propagated as an event and ga called in event handler to decouple GA code and component */
+      this.$track({ componentName: 'Availibility', componentAction: 'cancel-input-box-clicked' });
       this.hideInputBox();
       this.newPoiAddress = '';
     },

src/js/contentscript.js

@@ -12,6 +12,17 @@ import '../css/panel.scss'
 
 import App from './components/App.vue'
 
+Vue.use({
+  install(_Vue) {
+    _Vue.prototype.$track = function (options) {
+      chrome.runtime.sendMessage({
+        eventType: 'GA_SEND_EVENT',
+        componentName: `Component:${options.componentName}`,
+        componentAction: options.componentAction,
+      })
+    }
+  },
+})
 Vue.use(VueI18n)
 RR.logInfo('contentscript loaded')