アナリティクス

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

Blume は blume.config.ts の単一の analytics ブロックからアナリティクスを注入します。Vercel 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 のデプロイでのみデータを収集します。

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、カスタムスクリプトを同時に有効にできます。ビルドしたサイトのデプロイについては、デプロイを参照してください。