Privatus Analytics
Cookie を使わずに、ドキュメントの閲覧者数を把握できます。
これはコミュニティが管理しているインテグレーションです。
どのドキュメントページが読まれているのか、閲覧者がどこから来ているのかを知りたいことはよくあります。多くのアナリティクスツールは Cookie を使用するため、多くの国では最初に Cookie の同意ポップアップを表示する必要があります。しかし、拒否を選ぶ訪問者も多く、そうした訪問は数値に反映されません。
Privatus Analytics は Cookie を使わずに訪問数を計測し、IP アドレスも保存しません。既知のボットは計測から除外されます。@privatus-analytics/next パッケージを使えば、タグを 1 つ追加するだけで Fumadocs サイトにスクリプトを組み込めます。最大 3 サイトで月 10,000 イベントまで利用できる無料プランがあり、クレジットカードの登録も不要です。
セットアップ
Privatus Analytics のサイト ID が必要です。サイト ID は pa_ で始まり、Site settings > Tracking で確認できます。
パッケージのインストール
npm install @privatus-analytics/nextサイトIDを設定する
PRIVATUS_SITE_ID=pa_YOURSITEIDサイトを実行する環境だけでなく、next build を実行する環境にも設定してください。Next.js がビルド時にレンダリングするページはその時点で値を読み取るため、実行時にしか存在しない値では、それらのページにトラッカーが組み込まれません。siteId としてタグに渡すこともできます。
タグを追加する
ルートレイアウトの <head> 内に <PrivatusAnalyticsTag /> を配置します。このコンポーネントはサーバーコンポーネント内でも動作します。レイアウトのその他の部分は変更する必要はありません。
import { RootProvider } from 'fumadocs-ui/provider/next';
import { PrivatusAnalyticsTag } from '@privatus-analytics/next/server';
import type { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<PrivatusAnalyticsTag modules={['engage', 'auto', 'vitals', 'clicks', 'ask']} />
</head>
<body className="flex flex-col min-h-screen">
<RootProvider>{children}</RootProvider>
</body>
</html>
);
}このタグは本番環境(next build と next start)でのみ出力されます。next dev では何も出力されないため、執筆中のご自身のアクセスはカウントされません。Fumadocs はページ全体を再読み込みせずにページを遷移しますが、スクリプトがページ遷移を毎回自動で検知します。
パッケージを使用しない場合
代わりに、script タグを手動で追加することもできます。
<head>
<script
defer
src="https://privatusstats.com/js/pa.js"
data-site="pa_YOURSITEID"
data-modules="engage,auto,vitals,clicks,ask"
/>
</head>イベントのトラッキング
ダウンロードなどのアクションを計測するには、Client Component 内で usePrivatus() を呼び出します。そのためには、次のパッケージが必要です：
'use client';
import { usePrivatus } from '@privatus-analytics/next';
export function DownloadButton() {
const privatus = usePrivatus();
return (
<button onClick={() => privatus.track('Download', { file: 'guide.pdf' })}>Download</button>
);
}script タグを手動で追加した場合は、代わりに属性を追加することもできます。スクリプトはブラウザ上でこの属性を読み取ります。
<a href="/guide.pdf" data-privatus-event="Download" data-privatus-prop-file="guide.pdf">
Download
</a>各設定の詳細はパッケージの READMEを、ダッシュボードについてはPrivatus Analytics のドキュメントを参照してください。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep