Track tag usage

Author: Rokt33r

src/components/atoms/TagNavigatorListItem.tsx

@@ -5,6 +5,7 @@ import { mdiClose } from '@mdi/js'
 import { flexCenter } from '../../lib/styled/styleFunctions'
 import { useRouter } from '../../lib/router'
 import { useTranslation } from 'react-i18next'
+import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 
 const TagItem = styled.li`
   margin-right: 5px;
@@ -54,6 +55,7 @@ const TagNavigatorListItem = ({
 }: TagNavigatorListItemProps) => {
   const { t } = useTranslation()
   const { push } = useRouter()
+  const { report } = useAnalytics()
 
   return (
     <TagItem>
@@ -74,6 +76,7 @@ const TagNavigatorListItem = ({
         title={t('tag.removeX', { tag })}
         onClick={() => {
           removeTagByName(tag)
+          report(analyticsEvents.removeNoteTag)
         }}
       >
         <Icon path={mdiClose} />

src/components/atoms/TagNavigatorNewTagPopup.tsx

@@ -21,6 +21,7 @@ import { useEffectOnce } from 'react-use'
 import { mdiPound } from '@mdi/js'
 import Icon from './Icon'
 import { isTagNameValid } from '../../lib/db/utils'
+import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 
 const Container = styled.div`
   position: fixed;
@@ -81,6 +82,7 @@ const TagNavigatorNewTagPopup = ({
 }: TagNavigatorNewTagPopupProps) => {
   const [newTagName, setNewTagName] = useState('')
   const [menuIndex, setMenuIndex] = useState(0)
+  const { report } = useAnalytics()
 
   const trimmedNewTagName = useMemo(() => {
     return newTagName.trim()
@@ -220,6 +222,7 @@ const TagNavigatorNewTagPopup = ({
               appendTagByName(storageTag)
               setNewTagName('')
               inputRef.current?.focus()
+              report(analyticsEvents.appendNoteTag)
             }}
           >
             <Icon path={mdiPound} />
@@ -236,6 +239,8 @@ const TagNavigatorNewTagPopup = ({
               appendTagByName(trimmedNewTagName)
               setNewTagName('')
               inputRef.current?.focus()
+              report(analyticsEvents.appendNoteTag)
+              report(analyticsEvents.addTag)
             }}
           >
             <span>Create</span>&nbsp;

src/components/molecules/TagListFragment.tsx

@@ -10,6 +10,7 @@ import { useDb } from '../../lib/db'
 import { useTranslation } from 'react-i18next'
 import { mdiPound, mdiTagMultiple } from '@mdi/js'
 import { openContextMenu } from '../../lib/electronOnly'
+import { useAnalytics, analyticsEvents } from '../../lib/analytics'
 
 interface TagListFragmentProps {
   storage: NoteStorage
@@ -23,6 +24,7 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
   const { removeTag } = useDb()
   const { t } = useTranslation()
   const currentPathname = usePathnameWithoutNoteId()
+  const { report } = useAnalytics()
 
   const tagListNavItemId = getTagListItemId(storage.id)
   const tagListIsFolded = !sideNavOpenedItemSet.has(tagListNavItemId)
@@ -59,6 +61,7 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
                       onClose: (value: number | null) => {
                         if (value === 0) {
                           removeTag(storageId, tagName)
+                          report(analyticsEvents.removeTag)
                         }
                       },
                     })
@@ -70,7 +73,16 @@ const TagListFragment = ({ storage }: TagListFragmentProps) => {
         />
       )
     })
-  }, [storageId, tagMap, push, currentPathname, messageBox, removeTag, t])
+  }, [
+    storageId,
+    tagMap,
+    push,
+    currentPathname,
+    messageBox,
+    removeTag,
+    t,
+    report,
+  ])
 
   if (tagList.length === 0) {
     return null

src/lib/analytics.ts

@@ -87,4 +87,8 @@ export const analyticsEvents = {
   createFolder: 'folders.create',
   updateUiTheme: 'preferences.updateUiTheme',
   updateEditorTheme: 'preferences.updateEditorTheme',
+  appendNoteTag: 'notes.tags.create',
+  removeNoteTag: 'notes.tags.destroy',
+  addTag: 'tags.create',
+  removeTag: 'tags.destroy',
 }