cloudflare-analytics
nuxt-cloudflare-analytics

用于 Nuxt 的 Cloudflare Web Analytics 模块
3.2K 下载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 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 (!string)

  • 必需
  • Cloudflare analytics 令牌，例如：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

开发