Nuxt Cloudflare Web Analytics モジュール

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.config.ts の modules セクションに nuxt-cloudflare-analytics を追加します。

{
  // 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 Aalytics ページで確認できます。

オプション

`token` (!string)

必須
Cloudflare Analytics トークン。例: 1a2b3v4a5er6ac7r8afd

`scriptPath` (string | false | undefined)

(オプション) デフォルトは /_ca/b.js です。これは Cloudflare の beacon.min.js です。
ローカルスクリプトを使用せず、代わりに CDN スクリプト (https://127.0.0.1/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

開発

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