# Fumadocs (Framework Mode, Next.js): Privatus Analytics
URL: /zh-TW/docs/next/community/privatus-analytics
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/(framework)/[framework]/community/privatus-analytics.zh-TW.mdx

不使用 Cookie，也能掌握有多少人閱讀您的文件。

> 這是由社群維護的整合。

您想知道讀者看了哪些文件頁面，以及他們從哪裡來。許多分析工具會使用 Cookie，因此在不少國家/地區，您必須先跳出 Cookie 同意視窗。很多訪客會選擇拒絕，這些人就完全不會出現在您的統計數據中。

[Privatus Analytics](https://privatusanalytics.com) 不使用 Cookie 即可計算造訪次數，也不會保留任何 IP 位址，並會排除已知的機器人流量。[`@privatus-analytics/next`](https://www.npmjs.com/package/@privatus-analytics/next) 套件只需一個標籤，就能將其指令碼加入您的 Fumadocs 網站。另有免費方案，每月 10,000 個事件，最多可用於 3 個網站，而且不需綁定信用卡。

## 設定 [#setup]

您需要 Privatus Analytics 的網站 ID。它以 `pa_` 開頭，可在 **Site settings** 的 **Tracking** 中找到。

### 1. 安裝套件 [#install-the-package]

```package-install
@privatus-analytics/next
```

### 2. 設定您的網站 ID [#set-your-site-id]

```bash title=".env"
PRIVATUS_SITE_ID=pa_YOURSITEID
```

請在執行 `next build` 的環境中設定此值，而不只是在網站執行的環境中設定。Next.js 在建置時算繪的頁面會於建置當下讀取此值，因此若該值只存在於執行階段，這些頁面就不會載入追蹤程式。您也可以改用 `siteId` 將它傳給該元件標籤。

### 3. 加入標記 [#add-the-tag]

請將 `<PrivatusAnalyticsTag />` 放在根版面配置的 `<head>` 中，它也能在伺服器元件中使用。版面配置的其他部分則維持原樣即可。

```tsx title="app/layout.tsx"
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 切換頁面時不會整頁重新載入，指令碼會自行偵測每次的頁面切換。

## 不使用套件 [#without-the-package]

您也可以改為手動加入 script 標籤：

```tsx title="app/layout.tsx"
<head>
  <script
    defer
    src="https://privatusstats.com/js/pa.js"
    data-site="pa_YOURSITEID"
    data-modules="engage,auto,vitals,clicks,ask"
  />
</head>
```

## 追蹤事件 [#track-events]

若要統計某個動作 (例如下載) 的次數，請在用戶端元件中呼叫 `usePrivatus()`。此功能需要安裝以下套件：

```tsx
'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 標籤，也可以改為加入屬性，指令碼會在瀏覽器中讀取該屬性：

```tsx
<a href="/guide.pdf" data-privatus-event="Download" data-privatus-prop-file="guide.pdf">
  Download
</a>
```

所有設定請參閱[套件 README](https://github.com/Privatus-Analytics/js/tree/main/next)，儀表板的使用說明則請參閱 [Privatus Analytics 文件](https://privatusanalytics.com/docs)。