cloudflare-analytics
nuxt-cloudflare-analytics

用於 Nuxt 的 Cloudflare Web 分析模組
3.3K 下載29 星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 add 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 (!string)

  • 必需
  • Cloudflare 分析令牌，例如：1a2b3v4a5er6ac7r8afd

scriptPath (string | false | undefined)

  • （可選），預設為 /_ca/b.js。這是來自 cloudflare 的 beacon.min.js。
  • 您可以將其設定為 false 以不使用本地指令碼，而是使用 CDN 指令碼（https://#/beacon.min.js）。但這不是推薦的做法，因為某些瀏覽器可能無法載入此指令碼。
  • 您可以將其設定為自定義路徑，以定義本地指令碼的位置。這必須是您 public 資料夾中的 .js 檔案。因此，如果您的檔案位於 public/my/beacon.js，您應該將此選項設定為 my/beacon.js。

proxyPath (string | false | undefined)

  • （可選），預設為 false。
  • 您可以將其設定為自定義路徑以生成代理 nuxt 伺服器 api 端點。這必須以 /api 開頭。例如，將 proxyPath 設定為 /api/_ca/p，然後模組將自動
    • 生成此端點
    • 更改 scriptPath 以使用此端點（只要您沒有將其設定為自己的東西）
  • 自動建立的代理端點用於向 Cloudflare 傳送資料。
    • 優點：這避免了一些瀏覽器阻止此請求。
    • 缺點：根據您託管頁面的位置，Cloudflare 會將該國家/地區作為頁面點選的來源。因此，如果您的頁面託管在美國（例如 Vercel），但您的訪問者來自德國，您將在儀表板中看到美國作為點選來源。
  • 您可以將其設定為 false 以不使用代理並直接呼叫 Cloudflare。請做好準備，一些瀏覽器可能會阻止該請求，您將看不到任何資料。
  • 如果您有其他解決方案，例如 Vercel 的重寫配置，請將 proxyPath 設定為 false 並定義一個 customProxyPath（見下文）。

customProxyPath (string | 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

開發