feat: add analytics (#12)

package.json

@@ -33,6 +33,7 @@
     "@iconscout/unicons": "^4.0.1",
     "@masscode/json-server": "^0.18.0",
     "@sipec/vue3-tags-input": "^3.0.4",
+    "@types/universal-analytics": "^0.4.5",
     "@vueuse/core": "^8.1.2",
     "ace-builds": "^1.4.14",
     "electron-store": "^8.0.1",
@@ -41,6 +42,7 @@
     "mitt": "^3.0.0",
     "nanoid": "^3.3.1",
     "pinia": "^2.0.12",
+    "universal-analytics": "^0.5.3",
     "vue": "^3.2.26",
     "vue-router": "^4.0.12",
     "vue3-perfect-scrollbar": "^1.6.0"

src/main/preload.ts

@@ -2,6 +2,11 @@ import { contextBridge, ipcRenderer } from 'electron'
 import { isDbExist, migrate, move } from './services/db'
 import { store } from './store'
 import type { ElectronBridge } from '@shared/types/main'
+import { version } from '../../package.json'
+import type { TrackEvents } from '@shared/types/main/analytics'
+import { analytics } from './services/analytics'
+
+const isDev = process.env.NODE_ENV === 'development'
 
 contextBridge.exposeInMainWorld('electron', {
   ipc: {
@@ -25,5 +30,14 @@ contextBridge.exposeInMainWorld('electron', {
     migrate: path => migrate(path),
     move: (from, to) => move(from, to),
     isExist: path => isDbExist(path)
+  },
+  track: (event: TrackEvents, payload?: string) => {
+    if (isDev) return
+
+    const path = payload
+      ? `${version}/${event}/${payload}`
+      : `${version}/${event}`
+
+    analytics.pageview(path).send()
   }
 } as ElectronBridge)

src/main/services/analytics/index.ts

@@ -0,0 +1,4 @@
+import ua from 'universal-analytics'
+const analytics = ua('UA-56182454-13')
+
+export { analytics }

src/renderer/components/editor/TheEditor.vue

@@ -36,6 +36,7 @@ import type { Language } from '@shared/types/renderer/editor'
 import { languages } from './languages'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
+import { track } from '@/electron'
 
 interface Props {
   lang: Language
@@ -143,6 +144,7 @@ const setValue = () => {
 
 const setLang = () => {
   editor.session.setMode(`ace/mode/${localLang.value}`)
+  track('snippets/set-language', localLang.value)
 }
 
 const setTheme = () => {

src/renderer/components/preferences/Storage.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { ipc, store, db } from '@/electron'
+import { ipc, store, db, track } from '@/electron'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import type { MessageBoxRequest } from '@shared/types/main'
@@ -53,6 +53,7 @@ const onClickMove = async () => {
     await db.move(storagePath.value, path)
     console.log('aas')
     setStorageAndRestartApi(path)
+    track('app/move-storage')
   } catch (err) {
     const e = err as Error
     ipc.invoke('main:notification', {
@@ -69,6 +70,7 @@ const onClickOpen = async () => {
   if (isExist) {
     setStorageAndRestartApi(path, true)
     snippetStore.getSnippets()
+    track('app/open-storage')
   } else {
     const message = 'Folder not contain "db.json".'
     ipc.invoke('main:notification', {
@@ -99,6 +101,7 @@ const onClickMigrate = async () => {
       body: 'DB successfully migrated.'
     })
     snippetStore.getSnippets()
+    track('app/migrate')
   } catch (err) {
     const e = err as Error
     ipc.invoke('main:notification', {

src/renderer/components/sidebar/SidebarListItem.vue

@@ -30,7 +30,7 @@ import { ref } from 'vue'
 import Folder from '~icons/unicons/folder'
 import AngleRight from '~icons/unicons/angle-right'
 import { onClickOutside } from '@vueuse/core'
-import { ipc } from '@/electron'
+import { ipc, track } from '@/electron'
 import type {
   ContextMenuPayload,
   ContextMenuResponse,
@@ -80,16 +80,17 @@ const onClickContextMenu = async () => {
 
     if (action === 'new') {
       await folderStore.addNewFolder()
+      track('folders/add-new')
     }
 
     if (action === 'delete') {
       await folderStore.deleteFoldersById(props.id!)
-      console.log(action, type)
+      track('folders/delete')
     }
 
     if (action === 'update:language') {
-      console.log(data)
       await folderStore.patchFoldersById(props.id!, { defaultLanguage: data })
+      track('folders/set-language', data)
     }
   }
 
@@ -104,9 +105,9 @@ const onClickContextMenu = async () => {
     })
 
     if (action === 'delete') {
-      console.log('trash delete')
       snippetStore.emptyTrash()
       await snippetStore.getSnippets()
+      track('app/empty-trash')
 
       if (folderStore.selectedAlias === 'trash') {
         snippetStore.setSnippetsByAlias('trash')
@@ -126,6 +127,7 @@ const onClickContextMenu = async () => {
 
     if (action === 'delete') {
       await tagStore.deleteTagById(props.id!)
+      track('tags/delete')
 
       if (props.id === tagStore.selectedId) {
         tagStore.selectedId = undefined

src/renderer/components/sidebar/TheSidebar.vue

@@ -91,7 +91,7 @@ import Trash from '~icons/unicons/trash'
 import LabelAlt from '~icons/unicons/label-alt'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
-import { ipc } from '@/electron'
+import { ipc, track } from '@/electron'
 import { useTagStore } from '@/store/tags'
 import { emitter } from '@/composable'
 
@@ -153,6 +153,7 @@ const contextMenuHandler = () => {
 
 const onAddNewFolder = async () => {
   await folderStore.addNewFolder()
+  track('folders/add-new')
 }
 
 const onUpdate = async () => {

src/renderer/components/snippets/SnippetHeader.vue

@@ -27,7 +27,7 @@
 
 <script setup lang="ts">
 import { emitter } from '@/composable'
-import { ipc } from '@/electron'
+import { ipc, track } from '@/electron'
 import { useSnippetStore } from '@/store/snippets'
 import { useClipboard, useDebounceFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
@@ -53,6 +53,7 @@ const name = computed({
 const onAddNewFragment = () => {
   snippetStore.addNewFragmentToSnippetsById(snippetStore.selectedId!)
   snippetStore.fragment = snippetStore.fragmentCount!
+  track('snippets/add-fragment')
 }
 
 const onCopySnippet = () => {
@@ -61,6 +62,7 @@ const onCopySnippet = () => {
   ipc.invoke<any, NotificationPayload>('main:notification', {
     body: 'Snippet copied'
   })
+  track('snippets/copy')
 }
 
 emitter.on('focus:snippet-name', () => {

src/renderer/components/snippets/SnippetListHeader.vue

@@ -28,6 +28,7 @@ import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { useDebounceFn } from '@vueuse/core'
 import { computed } from 'vue'
+import { track } from '@/electron'
 
 const snippetStore = useSnippetStore()
 const folderStore = useFolderStore()
@@ -38,6 +39,7 @@ const query = computed({
     snippetStore.searchQuery = v
     snippetStore.setSnippetsByAlias('all')
     snippetStore.search(v!)
+    track('snippets/search')
   }, 300)
 })
 
@@ -50,6 +52,7 @@ const onAddNewSnippet = async () => {
   await snippetStore.getSnippets()
 
   emitter.emit('focus:snippet-name', true)
+  track('snippets/add-new')
 }
 
 const onReset = () => {

src/renderer/components/snippets/SnippetListItem.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ipc } from '@/electron'
+import { ipc, track } from '@/electron'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import type {
@@ -146,7 +146,10 @@ const onClickContextMenu = async () => {
   }
 
   if (action === 'delete') {
-    if (type === 'folder') await moveToTrash()
+    if (type === 'folder') {
+      await moveToTrash()
+      track('snippets/move-to-trash')
+    }
 
     if (type === 'favorites' || type === 'all' || type === 'inbox') {
       await moveToTrash(type)
@@ -165,6 +168,7 @@ const onClickContextMenu = async () => {
 
   if (action === 'duplicate') {
     await snippetStore.duplicateSnippetById(props.id)
+    track('snippets/duplicate')
 
     if (type === 'folder') {
       await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
@@ -181,6 +185,12 @@ const onClickContextMenu = async () => {
       isFavorites: data
     })
 
+    if (data) {
+      track('snippets/add-to-favorites')
+    } else {
+      track('snippets/delete-from-favorites')
+    }
+
     if (type === 'folder') {
       await snippetStore.getSnippetsByFolderIds(folderStore.selectedIds!)
     }

src/renderer/components/snippets/SnippetsFragmentsInput.vue

@@ -25,7 +25,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useSnippetStore } from '@/store/snippets'
 import { onClickOutside, useDebounceFn } from '@vueuse/core'
-import { ipc } from '@/electron'
+import { ipc, track } from '@/electron'
 import type {
   ContextMenuPayload,
   ContextMenuResponse
@@ -74,6 +74,7 @@ const onClickContext = async () => {
   if (action === 'delete') {
     await snippetStore.deleteCurrentSnippetFragmentByIndex(props.index)
     snippetStore.fragment = snippetStore.fragmentCount! - 1
+    track('snippets/delete-fragment')
   }
 }
 

src/renderer/components/snippets/SnippetsTags.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { track } from '@/electron'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
 import { useTagStore } from '@/store/tags'
@@ -24,6 +25,7 @@ const tags = computed({
 
       if (tag) {
         tagsIds.push(tag.id)
+        track('snippets/add-tag')
       } else {
         if (!i.text) return
 
@@ -37,6 +39,8 @@ const tags = computed({
         } else {
           snippetStore.selected!.tags = [newTag]
         }
+
+        track('tags/add-new')
       }
     }
 

src/renderer/electron.ts

@@ -1,3 +1,3 @@
-const { ipc, store, db } = window.electron
+const { ipc, store, db, track } = window.electron
 
-export { ipc, store, db }
+export { ipc, store, db, track }

src/renderer/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>massCode</title>
   </head>
   <body>
     <div id="app"></div>

src/renderer/store/app.ts

@@ -1,5 +1,6 @@
 import type { State } from '@shared/types/renderer/store/app'
 import { defineStore } from 'pinia'
+import { version } from '../../../package.json'
 
 export const useAppStore = defineStore('app', {
   state: (): State => ({
@@ -14,6 +15,7 @@ export const useAppStore = defineStore('app', {
         tagsHeight: 40,
         footerHeight: 30
       }
-    }
+    },
+    version
   })
 })

src/renderer/views/Main.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { store } from '@/electron'
+import { store, track } from '@/electron'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { useTagStore } from '@/store/tags'
@@ -53,6 +53,7 @@ const addDevtoolsHost = () => {
 
 addDevtoolsHost()
 init()
+track('main')
 </script>
 
 <style scoped lang="scss">

src/renderer/views/Preferences.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import { track } from '@/electron'
 import router from '@/router'
 import { ref } from 'vue'
 
@@ -28,6 +29,8 @@ const activeMenu = ref('storage')
 const toHome = () => {
   router.push('/')
 }
+
+track('preferences')
 </script>
 
 <style lang="scss" scoped>

src/shared/types/main/analytics.d.ts

@@ -0,0 +1,36 @@
+type CombineWith<T extends string, U extends string> = `${U}/${T}`
+
+type SnippetEvents =
+  | 'add-fragment'
+  | 'add-new'
+  | 'add-tag'
+  | 'add-to-favorites'
+  | 'copy'
+  | 'delete-fragment'
+  | 'delete-from-favorites'
+  | 'delete'
+  | 'duplicate'
+  | 'move-to-trash'
+  | 'set-language'
+  | 'search'
+type FolderEvents = 'add-new' | 'delete' | 'set-language'
+type TagEvents = 'add-new' | 'delete'
+type AppEvents =
+  | 'move-storage'
+  | 'open-storage'
+  | 'migrate'
+  | 'update'
+  | 'empty-trash'
+
+type TrackSnippetEvents = CombineWith<SnippetEvents, 'snippets'>
+type TrackFolderEvents = CombineWith<FolderEvents, 'folders'>
+type TrackTagEvents = CombineWith<TagEvents, 'tags'>
+type TrackAppEvents = CombineWith<AppEvents, 'app'>
+
+export type TrackEvents =
+  | TrackSnippetEvents
+  | TrackFolderEvents
+  | TrackTagEvents
+  | TrackAppEvents
+  | 'main'
+  | 'preferences'