add google analytic support

package.json

@@ -19,6 +19,7 @@
     "qrcode.vue": "^1.6.2",
     "store": "^2.0.12",
     "vue": "^2.6.10",
+    "vue-analytics": "^5.17.2",
     "vue-clipboard2": "^0.3.0",
     "vue-element-loading": "^1.1.1",
     "vue-i18n": "^8.14.1",

src/components/Transfer.vue

@@ -118,6 +118,11 @@ export default {
         const mnemonic = this.mnemonic.split(';')[0]
         const toAddress = this.address
         await this.libra.transfer(mnemonic, toAddress, this.amount)
+        // Fire event to Google Analytic
+        this.$ga.event({
+          eventCategory: 'Transaction',
+          eventAction: 'Transfer'
+        })
         // For peer to peer transfer
         if (this.labelHead === '') {
           this.$router.push({ name: 'Wallet' })

src/components/Wallet.vue

@@ -155,7 +155,7 @@ export default {
       } catch (error) {
         console.log(error)
       }
-    // Creating a new wallet
+      // Creating a new wallet
     } else {
       const data = await this.createNewWallet()
       await this.updatePersistance(data.address, data.balance, data.mnemonic)
@@ -210,6 +210,13 @@ export default {
           mnemonic: createdResult.mnemonic + ';1',
           balance: this.AMOUNT_TO_MINT.toString(10)
         }
+
+        // Fire event to google analytic
+        this.$ga.event({
+          eventCategory: 'Wallet',
+          eventAction: 'Create'
+        })
+
         return wallet
       } catch (error) {
         console.log(error)
@@ -238,12 +245,24 @@ export default {
       window.location.href = 'https://github.com/iyawat/M5Stack_libra_hw_wallet'
     },
     openSend () {
+      this.$ga.event({
+        eventCategory: 'Wallet',
+        eventAction: 'Transfer'
+      })
       this.$router.push({ name: 'ScanQR' })
     },
     openReceive () {
+      this.$ga.event({
+        eventCategory: 'Wallet',
+        eventAction: 'Receive'
+      })
       this.$router.push({ name: 'Receive', query: { address: this.userAddress } })
     },
     openTransaction () {
+      this.$ga.event({
+        eventCategory: 'Wallet',
+        eventAction: 'History'
+      })
       this.$router.push({ name: 'Transactions', query: { address: this.userAddress } })
     },
     async doUpdateBalance () {

src/main.js

@@ -5,6 +5,7 @@ import Buefy from 'buefy'
 import VueLoading from 'vue-loading-template'
 import VueClipboard from 'vue-clipboard2'
 import SocialSharing from 'vue-social-sharing'
+import VueAnalytics from 'vue-analytics'
 
 // Styles
 import 'buefy/dist/buefy.css'
@@ -21,6 +22,10 @@ Vue.use(SocialSharing)
 Vue.use(VueLoading)
 Vue.use(VueClipboard)
 VueClipboard.config.autoSetContainer = true // add this line
+Vue.use(VueAnalytics, {
+  id: 'UA-148960913-1',
+  router
+})
 
 Vue.config.productionTip = false