✨ Inject Googlge analytics

Author: nicejade

README.md

@@ -119,6 +119,7 @@ docker run -d -p 8888:8888 -v "$(pwd)/data:/app/data" nicejade/wealth-tracker:la
 - `ALLOW_PASSWORD`: 设置为 `true` 启用密码保护功能;
 - `PEPPER_SECRET`: 设置它为用户密码提供更强大的保护；
 - `CAN_BE_RESET`: 设置为 `true` 允许重置数据库功能;
+- `GOOGLE_ANALYTICS_KEY`: Google Analytics 衡量 ID (如 `G-XXXXX`)，配置后将开启页面访问与关键行为埋点（需在构建客户端时注入，新建 根据 `.env.example` 新建 `.env`，填入 ID）。
 
 ```bash
 docker run -d -p 8888:8888 \

client/.env.example

@@ -0,0 +1,3 @@
+# Google Analytics Measurement ID (e.g., G-XXXXXXXXXX)
+# If configured, the app will enable Google Analytics tracking
+GOOGLE_ANALYTICS_KEY='G-XXXXXXXXXX'

client/index.html

@@ -108,14 +108,14 @@
         "url": "https://www.jeffjade.com/"
       },
       "datePublished": "2024-01-01",
-      "dateModified": "2024-12-19"
+      "dateModified": "2026-01-29"
     }
   </script>
   <!-- Google Analytics (Conditional) -->
   <script>
     (function () {
-      const GA_KEY = '%VITE_GOOGLE_ANALYTICS_KEY%'
-      if (GA_KEY && GA_KEY !== '%VITE_GOOGLE_ANALYTICS_KEY%') {
+      const GA_KEY = '%GOOGLE_ANALYTICS_KEY%'
+      if (GA_KEY) {
         const script = document.createElement('script')
         script.async = true
         script.src = 'https://www.googletagmanager.com/gtag/js?id=' + GA_KEY

client/src/components/CustomCurrencyManager.svelte

@@ -90,10 +90,10 @@
 
       if (editingId) {
         response = await updateCustomCurrency(editingId, editingCurrency)
-        trackEvent('custom_currency_update', { code: editingCurrency.code })
+        trackEvent('custom-currency-update', { code: editingCurrency.code })
       } else {
         response = await createCustomCurrency(editingCurrency)
-        trackEvent('custom_currency_create', { code: editingCurrency.code })
+        trackEvent('custom-currency-create', { code: editingCurrency.code })
       }
 
       if (response.success) {
@@ -129,7 +129,7 @@
       loading = true
       const response: any = await deleteCustomCurrency(deleteId)
       if (response.success) {
-        trackEvent('custom_currency_delete')
+        trackEvent('custom-currency-delete')
         await loadCurrencies()
         // 重新获取汇率
         await fetchExchangeRates()

client/src/components/Header.svelte

@@ -4,6 +4,7 @@
   import { locale } from 'svelte-i18n'
   import SvgIcon from './SvgIcon.svelte'
   import { language, theme } from '../stores'
+  import { trackEvent } from '../helper/analytics'
   import { saveUserSettings } from './../helper/settings'
   import { TITLE, DEFAULT_THEME, LANG_ARR } from './../helper/constant'
 
@@ -96,6 +97,7 @@
   const onToggleTheme = async () => {
     const newTheme = $theme === DEFAULT_THEME ? 'dark' : DEFAULT_THEME
     theme.set(newTheme)
+    trackEvent('theme-toggle', { theme: newTheme })
     // 保存到服务器（响应式更新会自动触发，但这里显式调用以确保立即保存）
     await saveUserSettings({ theme: newTheme }).catch((err) => {
       console.error('Failed to save theme:', err)
@@ -106,6 +108,7 @@
     lang = item.value
     language.set(item.value)
     updateUrlLang(item.value)
+    trackEvent('language-change', { language: item.value })
 
     await saveUserSettings({ language: item.value }).catch((err) => {
       console.error('Failed to save language:', err)
@@ -115,7 +118,11 @@
 
 <header class="flex h-20 items-center justify-between" style="z-index: 1000;">
   <h1 class="h-full leading-none">
-    <a href="/" title={TITLE} class="flex h-full items-center space-x-2 focus-visible:outline-none">
+    <a
+      href="/"
+      title={TITLE}
+      class="flex h-full items-center space-x-2 focus-visible:outline-none"
+      on:click={() => trackEvent('logo-click')}>
       <img src="/logo.png" alt="Sink" class="h-5 w-5" />
       <span class="title font-[cursive] text-xl font-semibold">{TITLE}</span>
     </a>
@@ -126,7 +133,8 @@
       rel="noopener"
       class="focus-visible-ring inline-flex rounded-md p-2 leading-5 outline-none hover:bg-gray-100"
       href="https://x.com/intent/user?screen_name=MarshalXuan"
-      title="X | Twitter Follow MarshalXuan">
+      title="X | Twitter Follow MarshalXuan"
+      on:click={() => trackEvent('social-link-click', { platform: 'x' })}>
       <SvgIcon name="x" width={20} height={20} color="#212121" />
     </a>
     <button
@@ -169,7 +177,8 @@
       title="Github"
       class="inline-flex w-full items-center rounded-full bg-gray-900 px-6 py-3 text-sm
       leading-4 text-white hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-0
-      focus:ring-offset-2 md:hidden md:w-auto md:rounded-full md:px-3 md:focus:ring-2">
+      focus:ring-offset-2 md:hidden md:w-auto md:rounded-full md:px-3 md:focus:ring-2"
+      on:click={() => trackEvent('social-link-click', { platform: 'github' })}>
       <SvgIcon name="githubx" width={20} height={20} color="#ffffff" />
       <strong class="ml-2 font-semibold">GitHub</strong>
     </a>

client/src/components/Modal/Update.svelte

@@ -133,21 +133,21 @@
       }
       if (action === ACTION_TYPES.create) {
         await createAssets(items)
-        trackEvent('asset_create', {
+        trackEvent('asset-create', {
           asset_type: items.type,
           currency: items.currency,
         })
       }
       if (action === ACTION_TYPES.update) {
         await updateAssets(items)
-        trackEvent('asset_update', {
+        trackEvent('asset-update', {
           asset_type: items.type,
           currency: items.currency,
         })
       }
       if (action === ACTION_TYPES.change) {
         await updateRecords(items)
-        trackEvent('record_update', {
+        trackEvent('record-update', {
           asset_type: items.type,
           currency: items.currency,
         })

client/src/components/Wysiwyg.svelte

@@ -253,7 +253,7 @@
     exportMarkdown: () => {
       const markdown = editor?.storage.markdown.getMarkdown()
       if (markdown) {
-        trackEvent('insight_export_markdown')
+        trackEvent('insight-export-markdown')
         // Create a downloadable file
         const blob = new Blob([markdown], { type: 'text/markdown' })
         const url = URL.createObjectURL(blob)

client/src/routes/Advice.svelte

@@ -181,7 +181,7 @@
 
   const onGenAdviceClick = async () => {
     try {
-      trackEvent('ai_advice_request', {
+      trackEvent('ai-advice-request', {
         model: settings.model,
       })
       handleGptStream({ prompt, settings })

client/src/routes/Index.svelte

@@ -83,26 +83,31 @@
     currentAssetItem.type = Date.now().toString()
     updateActionType = ACTION_TYPES.create
     isShowUpdateModal = true
+    trackEvent('asset-add-click')
   }
 
   const handleUpate = (event) => {
     currentAssetItem = event.detail
     updateActionType = ACTION_TYPES.update
     isShowUpdateModal = true
+    trackEvent('asset-update-click', { asset_type: currentAssetItem.type })
   }
 
   const handleDestroy = (event) => {
     const { type } = event.detail
     typeToBeDestroyed = type
     isShowComfirmModal = true
+    trackEvent('asset-delete-click', { asset_type: type })
   }
 
   const handleReset = () => {
     isShowResetModal = true
+    trackEvent('database-reset-click')
   }
 
   const handleUpdateConfirm = () => {
     fetchDatabase()
+    trackEvent('asset-update-confirm', { action_type: updateActionType })
   }
 
   const handleUpdateClose = () => {
@@ -112,7 +117,7 @@
   const handleComfirm = async () => {
     try {
       await destroyAssets({ type: typeToBeDestroyed })
-      trackEvent('asset_delete', { asset_type: typeToBeDestroyed })
+      trackEvent('asset-delete', { asset_type: typeToBeDestroyed })
       fetchDatabase()
       isShowComfirmModal = false
     } catch (error) {
@@ -127,7 +132,7 @@
   const handleResetComfirm = async () => {
     try {
       await resetDatabase()
-      trackEvent('database_reset')
+      trackEvent('database-reset')
       isShowResetModal = false
       window.location.reload()
     } catch (error) {
@@ -244,7 +249,10 @@
     <h2 class="gradient-text typing-text my-4 text-xl text-white">
       {$_('getAIAdviceDescription')}
     </h2>
-    <a href="/advice" class="regular-btn hover:text-brand inline-block text-center text-base">
+    <a
+      href="/advice"
+      class="regular-btn hover:text-brand inline-block text-center text-base"
+      on:click={() => trackEvent('get-ai-advice-click')}>
       {$_('getAIAdvice')}
     </a>
   </div>

client/src/routes/Insights.svelte

@@ -174,11 +174,11 @@
 
       if (editingInsight) {
         await updateInsights({ ...data, id: editingInsight.id })
-        trackEvent('insight_update')
+        trackEvent('insight-update')
         notice.set($_('insights.updateSuccess'))
       } else {
         await createInsights(data)
-        trackEvent('insight_create')
+        trackEvent('insight-create')
         notice.set($_('insights.saveSuccess'))
       }
 
@@ -210,7 +210,7 @@
   const confirmDelete = async () => {
     try {
       await destroyInsights({ id: deletingInsightId })
-      trackEvent('insight_delete')
+      trackEvent('insight-delete')
       notice.set($_('insights.deleteSuccess'))
       isShowDeleteModal = false
       deletingInsightId = null