feat: add analytics (#12)

Author: antonreshetov

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!)
     }