透過 100 多個技巧學習 Nuxt！
55.5K

cloudflare-analytics
nuxt-cloudflare-analytics

Nuxt 的 Cloudflare 網站分析模組
2.4K 下載
30 個星號
v1.0.8
hamlogichamlogic
madebyfabianmadebyfabian

Nuxt Cloudflare 網站分析模組

npm versionnpm downloads

將 Cloudflare 網站分析新增至您的 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 儀表板的網站分析頁面找到權杖。

選項

token (!string)

  • 必填
  • Cloudflare 分析權杖，例如：1a2b3v4a5er6ac7r8afd

scriptPath (string | 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 (string | false | undefined)

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

customProxyPath (string | undefined)

  • （選填），預設為 undefined。只有在您將 proxyPath 設定為 false 時才定義此項。
  • 這是您自訂 proxy 端點的路徑，例如來自 vercels 重寫設定。
  • 例如
// 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

開發