Nuxt Cloudflare Web Analyticsモジュール

NuxtプロジェクトにCloudflare Web Analyticsを追加します。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 analyticsトークン、例: 1a2b3v4a5er6ac7r8afd

scriptPath (string | false | undefined)

• (オプション) デフォルトは/_ca/b.jsです。これはCloudflareのbeacon.min.jsです。
• ローカルスクリプトを使用せず、CDNスクリプト（https://#/beacon.min.js）を使用するには、falseに設定できます。ただし、一部のブラウザではこのスクリプトがロードされない場合があるため、これは推奨されません。
• ローカルスクリプトの場所を定義するために、カスタムパスに設定できます。これは、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）でホストしており、訪問者がドイツからである場合、ダッシュボードではクリック元が米国として表示されます。
• プロキシを使用せずにCloudflareを直接呼び出すには、falseに設定できます。一部のブラウザがリクエストをブロックし、データが表示されない場合があることに注意してください。
• これに対する別の解決策（例: 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" }]
}

貢献者

• hamlogic (https://github.com/hamlogic)
• madebyfabian (https://github.com/madebyfabian)

ライセンス

MIT © Hamjs

開発

• リポジトリをクローン
• 依存関係をインストール
• Take Over Modeに切り替える
• npm run dev:prepare を使用してローカルファイルが生成されていることを確認します。
• npm run dev を使用してプレイグラウンドを開始します。
• Nuxtモジュールについて詳しく知るには、このドキュメントを参照してください: https://nuxt.dokyumento.jp/docs/guide/going-further/modules