Initial Google Analytics setup

Signed-off-by: Olga Bulat <obulat@gmail.com>

Author: obulat

package-lock.json

@@ -29,6 +29,7 @@
         "clipboard": "^2.0.4",
         "core-js": "^3.6.1",
         "vue": "^2.6.10",
+        "vue-analytics": "^5.22.1",
         "vue-i18n": "^8.15.3"
     },
     "devDependencies": {

package.json

@@ -46,6 +46,10 @@ export default {
         Header,
         Footer,
         Locale
+    },
+    created: function() {
+        // send home to google analytics
+        this.$ga.page('/')
     }
 }</script>
 <style lang="scss">

src/App.vue

@@ -51,6 +51,11 @@ export default {
             },
             set(currentLicense) {
                 const fullLicenseName = this.fullLicenseName(currentLicense)
+                this.$ga.event({
+                    eventCategory: 'licenseDropdown',
+                    eventAction: 'clicked',
+                    eventLabel: 'License selected from the dropdown'
+                })
                 this.$emit('input', { ...this.$props.value, fullName: fullLicenseName, shortName: currentLicense })
             }
         }

src/components/SelectedLicenseDropdown.vue

@@ -139,11 +139,17 @@ export default {
         updateLicense(itemId) {
             const attrs = { ...this.licenseAttributes }
             attrs[itemId] = !attrs[itemId]
-            this.$emit('input', {
+            const licenseData = {
                 shortName: this.shortLicenseName(attrs),
                 fullName: this.fullLicenseName(attrs),
                 attributionDetails: this.$props.value.attributionDetails
+            }
+            this.$ga.event({
+                eventCategory: 'stepper',
+                eventAction: 'clicked',
+                eventLabel: licenseData.shortName
             })
+            this.$emit('input', licenseData)
         },
         shortLicenseName(attr) {
             if (!attr.BY) { return 'CC0 1.0' }

src/components/Stepper.vue

@@ -1,7 +1,8 @@
 import Vue from 'vue'
-import App from './App.vue'
 import Buefy from 'buefy'
 import i18n from './i18n'
+import VueAnalytics from 'vue-analytics'
+import App from './App.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 // internal icons
 import {
@@ -21,6 +22,14 @@ Vue.use(Buefy, {
     defaultIconComponent: 'vue-fontawesome',
     defaultIconPack: 'fas'
 })
+
+Vue.use(VueAnalytics, {
+    id: 'UA-XXX-X',
+    autoTracking: {
+        screenview: true
+    }
+})
+
 Vue.use(LicenseUtilities)
 
 new Vue({