通过 100+ 条技巧学习 Nuxt！
55.5K

cloudflare-analytics
nuxt-cloudflare-analytics

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

  • 必需
  • Cloudflare analytics 令牌，示例：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。
  • 您可以将其设置为自定义路径以生成代理 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

开发