Merge pull request #11 from NCTUCSUnion/dev

fix: implement analytics tracking across various components for user …

Author: gainsborouo

frontend/src/components/Navbar.vue

@@ -41,7 +41,7 @@
               v-if="isAuthenticated && userData?.is_admin"
               icon="pi pi-cog"
               label="系統管理"
-              @click="$router.push('/admin')"
+              @click="handleNavigateAdmin"
               severity="secondary"
               size="small"
               outlined
@@ -106,7 +106,7 @@
             severity="secondary"
             size="small"
             outlined
-            @click="toggleTheme"
+            @click="handleToggleTheme"
           />
         </div>
       </template>
@@ -268,6 +268,7 @@ import { useTheme } from '../utils/useTheme'
 import { authService } from '../api'
 import { useRouter } from 'vue-router'
 import { useToast } from 'primevue/usetoast'
+import { trackEvent, EVENTS } from '../utils/analytics'
 
 export default {
   name: 'AppNavbar',
@@ -343,8 +344,17 @@ export default {
     },
   },
   methods: {
+    handleToggleTheme() {
+      trackEvent(EVENTS.TOGGLE_THEME, {
+        from: this.isDarkTheme ? 'dark' : 'light',
+        to: this.isDarkTheme ? 'light' : 'dark',
+      })
+      this.toggleTheme()
+    },
+
     openLoginDialog() {
       this.loginVisible = true
+      trackEvent(EVENTS.LOGIN, { type: 'dialog-open' })
     },
 
     async handleLocalLogin() {
@@ -366,9 +376,13 @@ export default {
         this.checkAuthentication()
         this.username = ''
         this.password = ''
+
+        trackEvent(EVENTS.LOGIN_LOCAL, { success: true })
+
         await this.router.push('/archive')
       } catch (error) {
         console.error('Login failed:', error)
+        trackEvent(EVENTS.LOGIN_LOCAL, { success: false })
         this.toast.add({
           severity: 'error',
           summary: '登入失敗',
@@ -382,6 +396,7 @@ export default {
 
     handleOAuthLogin() {
       this.loginVisible = false
+      trackEvent(EVENTS.LOGIN_OAUTH, { provider: 'NYCU' })
       authService.login()
     },
 
@@ -411,8 +426,10 @@ export default {
     async handleLogout() {
       try {
         await authService.logout()
+        trackEvent(EVENTS.LOGOUT, { success: true })
       } catch (error) {
         console.error('Logout API failed:', error)
+        trackEvent(EVENTS.LOGOUT, { success: false })
       }
 
       sessionStorage.removeItem('authToken')
@@ -425,12 +442,19 @@ export default {
 
     handleTitleClick() {
       if (this.isAuthenticated) {
+        trackEvent(EVENTS.NAVIGATE_ARCHIVE, { from: 'title-click' })
         this.$router.push('/archive')
       }
     },
 
+    handleNavigateAdmin() {
+      trackEvent(EVENTS.NAVIGATE_ADMIN, { from: 'navbar' })
+      this.$router.push('/admin')
+    },
+
     openIssueReportDialog() {
       this.issueReportVisible = true
+      trackEvent(EVENTS.OPEN_ISSUE_REPORT)
     },
 
     closeIssueReportDialog() {
@@ -458,6 +482,13 @@ export default {
     submitIssueReport() {
       const { type, title, description, contact } = this.issueForm
 
+      trackEvent(EVENTS.SUBMIT_ISSUE_REPORT, {
+        type,
+        hasContact: !!contact,
+        titleLength: title.length,
+        descriptionLength: description.length,
+      })
+
       const systemInfo = this.getSystemInfo()
       const issueBody = this.formatIssueBody(description, contact, systemInfo, type)
       const repoOwner = 'nctucsunion'

frontend/src/components/UploadArchiveDialog.vue

@@ -349,6 +349,7 @@ import { useToast } from 'primevue/usetoast'
 import { courseService, archiveService } from '../api'
 import PdfPreviewModal from './PdfPreviewModal.vue'
 import { PDFDocument } from 'pdf-lib'
+import { trackEvent, EVENTS } from '../utils/analytics'
 
 const props = defineProps({
   modelValue: {
@@ -561,6 +562,12 @@ function previewUploadFile() {
     const fileUrl = URL.createObjectURL(new Blob([form.value.file], { type: 'application/pdf' }))
     uploadPreviewUrl.value = fileUrl
     showUploadPreview.value = true
+
+    trackEvent(EVENTS.PREVIEW_ARCHIVE, {
+      context: 'upload-dialog',
+      fileName: form.value.filename,
+      fileSize: form.value.file.size,
+    })
   } catch (error) {
     console.error('Preview error:', error)
     uploadPreviewError.value = true

frontend/src/utils/analytics.js

@@ -0,0 +1,77 @@
+/**
+ * Analytics utility for tracking user events
+ * Uses Umami analytics for event tracking
+ */
+
+/**
+ * Track a custom event
+ * @param {string} eventName - Name of the event
+ * @param {object} eventData - Optional event data/properties
+ */
+export const trackEvent = (eventName, eventData = {}) => {
+  try {
+    // Check if umami is available
+    if (typeof window !== 'undefined' && window.umami) {
+      window.umami.track(eventName, eventData)
+      //   console.log('Event tracked:', eventName, eventData)
+    } else {
+      //   console.warn('Umami not loaded, event not tracked:', eventName, eventData)
+    }
+  } catch (error) {
+    console.error('Error tracking event:', error, eventName, eventData)
+  }
+}
+
+/**
+ * Track page view
+ * @param {string} pageName - Name of the page
+ */
+export const trackPageView = (pageName) => {
+  trackEvent('pageview', { page: pageName })
+}
+
+// Pre-defined event names for consistency
+export const EVENTS = {
+  // Theme events
+  TOGGLE_THEME: 'toggle-theme',
+
+  // Auth events
+  LOGIN: 'login',
+  LOGOUT: 'logout',
+  LOGIN_OAUTH: 'login-oauth',
+  LOGIN_LOCAL: 'login-local',
+
+  // Navigation events
+  TOGGLE_SIDEBAR: 'toggle-sidebar',
+  NAVIGATE_HOME: 'navigate-home',
+  NAVIGATE_ARCHIVE: 'navigate-archive',
+  NAVIGATE_ADMIN: 'navigate-admin',
+
+  // Archive events
+  VIEW_ARCHIVE: 'view-archive',
+  DOWNLOAD_ARCHIVE: 'download-archive',
+  PREVIEW_ARCHIVE: 'preview-archive',
+  UPLOAD_ARCHIVE: 'upload-archive',
+  EDIT_ARCHIVE: 'edit-archive',
+  DELETE_ARCHIVE: 'delete-archive',
+  SEARCH_COURSE: 'search-course',
+  SELECT_COURSE: 'select-course',
+  FILTER_ARCHIVES: 'filter-archives',
+
+  // Admin events
+  CREATE_COURSE: 'create-course',
+  UPDATE_COURSE: 'update-course',
+  DELETE_COURSE: 'delete-course',
+  CREATE_USER: 'create-user',
+  UPDATE_USER: 'update-user',
+  DELETE_USER: 'delete-user',
+  VIEW_ANALYTICS: 'view-analytics',
+  OPEN_ANALYTICS_NEW_TAB: 'open-analytics-new-tab',
+
+  // Issue report events
+  OPEN_ISSUE_REPORT: 'open-issue-report',
+  SUBMIT_ISSUE_REPORT: 'submit-issue-report',
+
+  // Tab/Panel events
+  SWITCH_TAB: 'switch-tab',
+}

frontend/src/views/Admin.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full px-2 md:px-4 admin-container">
     <div class="card h-full flex flex-col">
-      <Tabs value="0" class="flex-1">
+      <Tabs value="0" class="flex-1" @update:value="handleTabChange">
         <TabList>
           <Tab value="0">課程管理</Tab>
           <Tab value="1">使用者管理</Tab>
@@ -382,6 +382,7 @@ import {
   updateUser,
   deleteUser,
 } from '../api'
+import { trackEvent, EVENTS } from '../utils/analytics'
 
 const confirm = useConfirm()
 const toast = useToast()
@@ -436,6 +437,7 @@ const umamiLoading = ref(false)
 
 const openUmamiInNewTab = () => {
   if (umamiShareUrl.value) {
+    trackEvent(EVENTS.OPEN_ANALYTICS_NEW_TAB)
     window.open(umamiShareUrl.value, '_blank')
   }
 }
@@ -570,6 +572,7 @@ const openCreateDialog = () => {
   courseFormErrors.value = {}
   editingCourse.value = null
   showCourseDialog.value = true
+  trackEvent(EVENTS.CREATE_COURSE, { action: 'open-dialog' })
 }
 
 const openEditDialog = (course) => {
@@ -580,6 +583,7 @@ const openEditDialog = (course) => {
   courseFormErrors.value = {}
   editingCourse.value = course
   showCourseDialog.value = true
+  trackEvent(EVENTS.UPDATE_COURSE, { action: 'open-dialog', courseName: course.name })
 }
 
 const closeCourseDialog = () => {
@@ -614,6 +618,11 @@ const saveCourse = async () => {
   try {
     if (editingCourse.value) {
       await updateCourse(editingCourse.value.id, courseForm.value)
+      trackEvent(EVENTS.UPDATE_COURSE, {
+        action: 'submit',
+        courseName: courseForm.value.name,
+        category: courseForm.value.category,
+      })
       toast.add({
         severity: 'success',
         summary: '成功',
@@ -622,6 +631,11 @@ const saveCourse = async () => {
       })
     } else {
       await createCourse(courseForm.value)
+      trackEvent(EVENTS.CREATE_COURSE, {
+        action: 'submit',
+        courseName: courseForm.value.name,
+        category: courseForm.value.category,
+      })
       toast.add({
         severity: 'success',
         summary: '成功',
@@ -660,6 +674,10 @@ const confirmDeleteCourse = (course) => {
 const deleteCourseAction = async (course) => {
   try {
     await deleteCourse(course.id)
+    trackEvent(EVENTS.DELETE_COURSE, {
+      courseName: course.name,
+      category: course.category,
+    })
     toast.add({
       severity: 'success',
       summary: '成功',
@@ -688,6 +706,7 @@ const openCreateUserDialog = () => {
   userFormErrors.value = {}
   editingUser.value = null
   showUserDialog.value = true
+  trackEvent(EVENTS.CREATE_USER, { action: 'open-dialog' })
 }
 
 const openEditUserDialog = (user) => {
@@ -700,6 +719,7 @@ const openEditUserDialog = (user) => {
   userFormErrors.value = {}
   editingUser.value = user
   showUserDialog.value = true
+  trackEvent(EVENTS.UPDATE_USER, { action: 'open-dialog', userName: user.name })
 }
 
 const closeUserDialog = () => {
@@ -750,6 +770,11 @@ const saveUser = async () => {
         updateData.password = userForm.value.password
       }
       await updateUser(editingUser.value.id, updateData)
+      trackEvent(EVENTS.UPDATE_USER, {
+        action: 'submit',
+        userName: userForm.value.name,
+        isAdmin: userForm.value.is_admin,
+      })
       toast.add({
         severity: 'success',
         summary: '成功',
@@ -758,6 +783,11 @@ const saveUser = async () => {
       })
     } else {
       await createUser(userForm.value)
+      trackEvent(EVENTS.CREATE_USER, {
+        action: 'submit',
+        userName: userForm.value.name,
+        isAdmin: userForm.value.is_admin,
+      })
       toast.add({
         severity: 'success',
         summary: '成功',
@@ -796,6 +826,10 @@ const confirmDeleteUser = (user) => {
 const deleteUserAction = async (user) => {
   try {
     await deleteUser(user.id)
+    trackEvent(EVENTS.DELETE_USER, {
+      userName: user.name,
+      isAdmin: user.is_admin,
+    })
     toast.add({
       severity: 'success',
       summary: '成功',
@@ -848,6 +882,22 @@ const formatDateTime = (dateString) => {
   }
 }
 
+const handleTabChange = (value) => {
+  const tabNames = {
+    0: 'courses',
+    1: 'users',
+    2: 'analytics',
+  }
+
+  trackEvent(EVENTS.SWITCH_TAB, {
+    tab: tabNames[value] || value,
+  })
+
+  if (value === '2') {
+    trackEvent(EVENTS.VIEW_ANALYTICS)
+  }
+}
+
 onMounted(() => {
   loadCourses()
   loadUsers()