Menu

Plausible 統合

Plausible は、軽量でプライバシー重視のオープンソース解析ツールです(SaaS 版 / セルフホストの両方に対応)。GA と比べて設定がシンプルで、よりプライバシーやコンプライアンスを重視したプロダクトに向いています。

NEXTY.DEV には Plausible のスクリプト挿入ロジックが組み込まれており、環境変数を設定するだけで本番環境で自動的に読み込まれます。

注目すべき点

  • NEXTY.DEV は開発環境では統計スクリプトを無効化しており、データ汚染を防ぎます
  • ローカルで検証したい場合は app/[locale]/layout.tsx を開き、process.env.NODE_ENV === "development" の判定を削除してください
  • ローカル検証が不要なら、本番環境の環境変数を設定するだけで該当スクリプトが自動的に有効になります

ステップ 1:Plausible でサイトを作成

  1. Plausible を開きます:https://plausible.io/(またはセルフホストの URL)
  2. 登録/ログイン後、Add a website をクリックします
  3. サイトのドメイン(通常はプロトコルなし、例:example.com)を入力します
  4. 作成後、インストール用スクリプトの案内が表示されます

ステップ 2:NEXTY.DEV の環境変数を設定

NEXTY.DEV は以下 2 つの環境変数で Plausible を制御します:

  • NEXT_PUBLIC_PLAUSIBLE_SRC:Plausible のスクリプト URL(例:https://your_plausible_address/js/script.file-downloads.outbound-links.pageview-props.revenue.tagged-events.js)
  • NEXT_PUBLIC_PLAUSIBLE_DOMAIN:サイトのドメイン(例:nexty.dev

例:Plausible 公式ホスティングを使う場合:

.env
NEXT_PUBLIC_PLAUSIBLE_SRC=https://plausible.io/js/script.js
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=example.com

Plausible API を利用

NEXTY.DEV テンプレートは、API 経由で Plausible のデータを取得することもできます。実装は actions/plausible/index.ts にあります。

Plausible の管理画面で API Keys を開いて API Key を作成し、以下の環境変数に設定します:

.env
PLAUSIBLE_API_KEY=your_api_key
PLAUSIBLE_URL=your_plausible_address
NEXT_PUBLIC_PLAUSIBLE_DOMAIN=your_site_domain
API key を作成してコピー