透過 100+ 個技巧的集合來學習 Nuxt！
56.4K

cloudflare-analytics
nuxt-cloudflare-analytics

用於 Nuxt 的 Cloudflare Web Analytics 模組
4.3K 下載
30 星星
v1.0.8
hamlogichamlogic
madebyfabianmadebyfabian

Nuxt Cloudflare Web Analytics 模組

npm versionnpm downloads

將 Cloudflare Web Analytics 新增至您的 Nuxt 專案。最新的版本，1.0.8+ 以上是為 Nuxt 3 所設計的，如果您想要使用 Nuxt 2，請使用 0.1.5

注意： 這個模組在開發模式下不會啟用。您可以設定環境變數 NODE_ENV 為 production 以在開發模式中進行測試。

設定

  • 使用 yarn 或 npm 將 nuxt-cloudflare-analytics 依賴項新增至您的專案 npm i nuxt-cloudflare-analytics 或 yarn install nuxt-cloudflare-analytics
  • 將 nuxt-cloudflare-analytics 新增至 nuxt.config.ts 的 modules 區段
{
  // either
  modules: [
    [
      'nuxt-cloudflare-analytics',
      {
        // See below for more options
        token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
      },
    ],
  ]

  // or
  modules: [
    'nuxt-cloudflare-analytics'
  ],
  cloudflareAnalytics: {
    // See below for more options
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
  }
}

您可以在 Cloudflare 控制面板的 Web Analytics 頁面找到 token。

選項

token (!字串)

  • 必填
  • Cloudflare analytics token，範例：1a2b3v4a5er6ac7r8afd

scriptPath (字串 | false | undefined)

  • (選填)，預設為 /_ca/b.js。這是來自 Cloudflare 的 beacon.min.js。
  • 您可以將其設定為 false 以不使用本地腳本，而是使用 CDN 腳本 (https://127.0.0.1/beacon.min.js)。但不建議這樣做，因為某些瀏覽器可能無法載入此腳本。
  • 您可以將其設定為自訂路徑，以定義本地腳本的位置。這必須是您 public 資料夾內的 .js 檔案。因此，如果您的檔案位於 public/my/beacon.js 下，您應該將此選項設定為 my/beacon.js。

proxyPath (字串 | false | undefined)

  • (選填)，預設為 false。
  • 您可以將其設定為自訂路徑，以產生代理 Nuxt 伺服器 API 端點。這必須以 /api 開頭。例如，將 proxyPath 設定為 /api/_ca/p，然後模組將會自動
    • 產生此端點
    • 變更 scriptPath 以使用此端點（只要您沒有將其設定為自己的東西）
  • 自動建立的代理端點用於將資料傳送到 Cloudflare。
    • 優點：這可以避免某些瀏覽器封鎖此請求。
    • 缺點：根據您託管頁面的位置，Cloudflare 會將該國家/地區視為頁面點擊的來源。因此，如果您在美國託管您的頁面（例如 Vercel），但您的訪客來自德國，您將會在您的控制面板中看到美國作為點擊的來源。
  • 您可以將其設定為 false 以不使用代理並直接呼叫 Cloudflare。請注意，某些瀏覽器可能會封鎖請求，並且您將看不到任何資料。
  • 如果您有其他解決方案，例如 Vercel 的重寫配置，請將 proxyPath 設定為 false 並定義 customProxyPath（請參閱下方）。

customProxyPath (字串 | undefined)

  • (選填)，預設為 undefined。僅當您將 proxyPath 設定為 false 時才定義此項。
  • 這是您自訂代理端點的路徑，例如來自 Vercel 的重寫配置。
  • 例如
// nuxt.config.ts
{
  cloudflareAnalytics: {
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
    proxyPath: false,
    customProxyPath: '/my-proxy'
  }
}

// vercel.json
{
    "rewrites": [{ "source": "/my-proxy", "destination": "https://cloudflareinsights.com/cdn-cgi/rum" }]
}

貢獻者

許可證

MIT © Hamjs

開發