アナリティクス

ファーストパーティのウェブアナリティクス — Vercel Web Analytics、Cloudflare Web Analytics、PostHog、または任意のカスタムスクリプト — を blume.config.ts から設定できます。

Blume は blume.config.ts の単一の analytics ブロックからアナリティクスを注入します。Vercel Web Analytics、Cloudflare Web Analytics、PostHog はファーストクラスでサポートされ、scripts というエスケープハッチによって他のあらゆるプロバイダー（Plausible、Fathom、Google Analytics、Umami など）に対応できます。

アナリティクスが読み込まれるのは本番ビルドのみです。スクリプトは blume build によって出力され、blume dev では決して出力されません。そのため、ローカルのトラフィックがダッシュボードに届くことはなく、別途「開発用」プロジェクトを用意する必要もありません。

Vercel Web Analytics

Vercel Web Analytics を追加するには vercel: true を設定します。Blume は Vercel のファーストパーティスクリプトを注入します。このスクリプトは、Vercel ダッシュボードでプロジェクトの Web Analytics を有効にすると、あなた自身のドメインから配信されます。

analytics: {
  vercel: true,
}

キーは不要です — スクリプトはデプロイ先のプロジェクトにレポートします。これは /_vercel/insights エンドポイントが存在する Vercel のデプロイでのみデータを収集します。

Cloudflare Web Analytics

Cloudflare Web Analytics には 2 つのセットアップ方法があり、設定が必要なのはそのうち一方だけです。

プロキシされたゾーン（自動セットアップ）。 Cloudflare がサイトを配信している場合（カスタムドメインを持つ Worker、Pages、またはオレンジ色の雲が有効になっている任意のゾーン）は、Cloudflare ダッシュボードでそのゾーンの Web Analytics を有効にするだけで完了です。Cloudflare がエッジでビーコンを注入するため、analytics.cloudflare は設定しないでください。併せて設定すると、すべてのページビューが二重にカウントされます。

その他のホスト（手動セットアップ）。 Cloudflare がプロキシしていないサイトの場合は、ダッシュボードの Web Analytics でサイトを追加し、表示される JS スニペットからトークン（data-cf-beacon 内の token）をコピーして、ここに指定してください。Blume はスニペットと同じビーコンタグをレンダリングします。

analytics: {
  cloudflare: {
    token: "0123456789abcdef0123456789abcdef",
  },
}

トークンはブラウザに配信しても安全です — サイトを識別するだけのものです。ビーコンは履歴の変更を自動的に追跡するため、クライアントルーターによるナビゲーションも追加の設定なしでカウントされます。

PostHog

PostHog を追加するには、プロジェクト API キーを指定します。ホストのデフォルトは PostHog Cloud US です。EU Cloud（https://eu.i.posthog.com）やセルフホストのインスタンスを使う場合は host を設定してください。

analytics: {
  posthog: {
    key: "phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    host: "https://us.i.posthog.com", // optional, this is the default
  },
}

プロジェクト API キーはブラウザに配信しても安全です — これは公開用の書き込み専用キーです。

カスタムスクリプト

他のアナリティクスプロバイダーを読み込むには scripts を使用します。各エントリは 1 つの <script> タグをレンダリングし、src（外部）または content（インライン）のどちらか一方だけを設定する必要があります。

analytics: {
  scripts: [
    // Plausible
    {
      src: "https://plausible.io/js/script.js",
      strategy: "defer",
      attributes: { "data-domain": "example.com" },
    },
    // Fathom
    {
      src: "https://cdn.usefathom.com/script.js",
      strategy: "defer",
      attributes: { "data-site": "ABCDEFG" },
    },
    // An inline snippet
    {
      content: "console.log('analytics ready')",
    },
  ],
}

attributes はタグに展開される追加の HTML 属性（data-*、id など）のマップで、strategy は外部スクリプトに async または defer を追加します。

オプション

3 つすべてを組み合わせることもできます — Vercel、PostHog、カスタムスクリプトを同時に有効にできます。ビルドしたサイトのデプロイについては、デプロイを参照してください。