feat: add analytics

Author: Justineo

components/OneDemo.vue

@@ -55,7 +55,7 @@
     <veui-button
       v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
       ui="icon"
-      @click="codeExpanded = !codeExpanded"
+      @click="handleCodeToggle"
     >
       <veui-icon
         scale="1.2"
@@ -66,7 +66,7 @@
       v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
       class="toggle-editor"
       ui="text"
-      @click="editing = !editing"
+      @click="handleEditorOpen"
     >
       Live
     </veui-button>
@@ -125,6 +125,7 @@ import OneIframe from './OneIframe'
 import OneEditLink from './OneEditLink'
 import OneRepl from './OneRepl'
 import OneFocus from './OneFocus'
+import { track } from '@vercel/analytics'
 import 'veui-theme-dls-icons/copy'
 
 Vue.use(toast)
@@ -188,15 +189,26 @@ export default {
     play (vendor) {
       let locale = getLocale(this.$route.path)
       play(this.$refs.source.textContent, { locale, vendor })
+      track('play', { vendor, path: this.path })
     },
     async copy () {
       try {
         await navigator.clipboard.writeText(this.code)
+        track('copy', { from: 'demo', success: true })
         this.$toast.success(this.t('@onelive.copySuccess'))
       } catch (e) {
+        track('copy', { from: 'demo', success: false })
         this.$toast.error(this.t('@onelive.copyFailed'))
       }
     },
+    handleCodeToggle () {
+      this.codeExpanded = !this.codeExpanded
+      track('code-toggle', { expanded: this.codeExpanded, path: this.path })
+    },
+    handleEditorOpen () {
+      this.editing = true
+      track('live-edit', { path: this.path })
+    },
     handleEditorClose () {
       this.editing = false
     },
@@ -205,6 +217,7 @@ export default {
     },
     resetFocus () {
       this.$refs.focuser.focus()
+      track('reset-focus', { path: this.path })
     }
   }
 }

components/OneEditLink.vue

@@ -11,6 +11,7 @@
   :href="href"
   target="_blank"
   rel="noopener"
+  @click="handleClick"
 >
   <slot :label="t('editOnGitHub')">
     <span class="full">{{ t('editOnGitHub', { item: t(type) }) }}</span>
@@ -26,6 +27,7 @@
 <script>
 import { Icon } from 'veui'
 import i18n from 'veui/mixins/i18n'
+import { track } from '@vercel/analytics'
 import 'veui-theme-dls-icons/external-link'
 
 const BASE_URL = 'https://github.com/ecomfe/veui-docs/edit/master/one/docs/'
@@ -51,6 +53,11 @@ export default {
     href () {
       return `${BASE_URL}${this.path}`
     }
+  },
+  methods: {
+    handleClick () {
+      track('edit-source', { path: this.path })
+    }
   }
 }
 </script>

components/OneLive.vue

@@ -130,6 +130,7 @@ import { play } from '../common/play'
 import { transformLessCode } from '../common/transform'
 import { loadPref, savePref } from '../common/util'
 import OneIframe from './OneIframe'
+import { track } from '@vercel/analytics'
 
 Vue.use(toast)
 
@@ -292,8 +293,10 @@ export default {
     async copy () {
       try {
         await navigator.clipboard.writeText(this.code)
+        track('copy', { from: 'editor', success: true })
         this.$toast.success(this.t('copySuccess'))
       } catch (e) {
+        track('copy', { from: 'editor', success: false })
         this.$toast.error(this.t('copyFailed'))
       }
     },