在 VitePress 中進行 GA 分析

有時候我們會需要知道網站的使用情況，這時候就需要用到 GA 分析，以下是我在 VitePress 中進行 GA 分析的步驟。

前言

以往在工作上時會需要幫客戶埋下 GA 的代碼，通常都是在網站加完 script 後，就交給 PM 去進行後續。現在自己使用 VitePress 架設，也想知道網站的使用情況，所以就研究了一下如何在 VitePress 中進行 GA 分析。

在 VitePress 中進行 GA 分析

在 Google Analytics 中建立一個專案，並獲取到專案的 ID，例如：G-XXXXXXXXXX
在 .vitepress/theme/ 中新增 googleAnalytics.js

路徑：

bash

docs
├─ .vitepress
│  └─ theme
│  │   └─ googleAnalytics.js
└─ index.md

把以下內容貼進 googleAnalytics.js

bash

export function useGoogleAnalytics(id) {
  if (process.env.NODE_ENV === 'production' && id && typeof window !== 'undefined') {
    // 避免重複加載
    if (window.dataLayer && window.gtag) {
      return
    }

    // 插入 Google Analytics script
    const script = document.createElement('script')
    script.src = `https://www.googletagmanager.com/gtag/js?id=${id}`
    script.async = true
    document.head.appendChild(script)

    // 初始化 gtag
    window.dataLayer = window.dataLayer || []
    window.gtag = function() {
      dataLayer.push(arguments)
    }

    window.gtag('js', new Date())
    
    window.gtag('config', id, {
      cookie_flags: 'SameSite=None;Secure',
      cookie_domain: 'auto'
    })

    console.log('Google Analytics 初始化成功')
  }
}

在 .vitepress/theme/index.js 中引入 googleAnalytics.js 並設置下述內容，這邊把 googleAnalyticsId 設定成變數，並由下一步的 config.mjs 中設置

路徑：

bash

docs
├─ .vitepress
│  └─ theme
│  │   └─ index.js
└─ index.md

程式碼：

bash

import { useGoogleAnalytics } from './googleAnalytics'

export default {
  extends: DefaultTheme,
  enhanceApp({ app, router, siteData }) {
    if (typeof window !== 'undefined') {
      const themeConfig = siteData.value.themeConfig
      if (themeConfig && themeConfig.googleAnalyticsId) {
        useGoogleAnalytics(themeConfig.googleAnalyticsId)
      } else {
        // 如果沒有設置，則會在 console 中顯示警告
        console.warn('Google Analytics ID 未在配置中設置或無法讀取')
        console.log('themeConfig:', themeConfig)
      }
    }
  }
}

在 .vitepress/config.mjs 中設置 googleAnalyticsId

路徑：

bash

docs
├─ .vitepress
│  └─ config.mjs
└─ index.md

程式碼：

bash

export default {
  themeConfig: {
    googleAnalyticsId: 'G-XXXXXXXXXX' // 替換為您的實際 GA ID
  }
}

結語

有些瀏覽器未來可能將阻止第三方 cookie 的提示，這是為了增強用戶隱私而進行的變更。雖然可能不會影響您網站的功能，但它確實提醒我們需要考慮未來的隱私變更。可以考慮在您的網站上添加一個 cookie 同意區塊，讓使用者選擇是否允許分析 cookie。這不僅有助於遵守隱私法規，還可能減少一些瀏覽器警告。

在 VitePress 中進行 GA 分析 ​

前言 ​

在 VitePress 中進行 GA 分析 ​

結語 ​

在 VitePress 中進行 GA 分析

前言

在 VitePress 中進行 GA 分析

結語