# Cookieなしで記事ごとのPVを数える方法：genkoの設定と人気記事表示

公開日: 2026-10-20 | 更新日: 2026-10-20 | URL: https://blog.genko.me/cookieless-page-views

> Cookieなしで記事別の閲覧数を計測し、CMSで確認する方法を解説します。genko.meのPageView・ViewCount、素のJavaScriptでの送信、人気順の一覧、重複除外と保存データ、GA4などとの使い分けを整理します。

Cookieなしで記事ごとのPVを数えるには、閲覧時にページのパスとCMSの記事IDを計測先へ送ります。genko.meでは受付ドメインを登録し、Reactなら`PageView`、ほかの構成なら`sendPageView`を設置すると、管理画面で記事別の閲覧数を確認できます。同じ端末による同じページの閲覧は30分に1回として数えるため、毎回のリロード数とは異なります。

本記事はgenko.meの運営側が執筆しています。2026年10月時点の[genko.me](https://genko.me/)のPV仕様を説明し、GA4、Cloudflare Web Analytics、Plausibleとの使い分けも整理します。

## CookieなしのPV計測で分かること

genkoのPVは、「どの記事が読まれているか」を編集画面から確認するための機能です。サイトのパス別とCMSの記事別に日ごとの回数を保存します。ユーザーの行動を追い続ける解析とは目的が異なります。

| 確認したいこと | genko PVで扱うか |
| --- | --- |
| ページのパス別閲覧数 | 扱います |
| CMS記事IDごとの閲覧数 | 扱います |
| よく読まれる記事の一覧 | 累計閲覧数で並べられます |
| 参照元、国、デバイスの分析 | 保存しません |
| 訪問者の継続的な追跡 | 行いません |

URLを変えても、同じ記事IDを送れば集計を継続できます。一方で、記事IDはワークスペース内で共通の集計キーです。異なるAPIに同じIDがあれば閲覧数を共有するため、独立して数えたい記事には別のIDを付けます。

## 1. 計測するドメインを登録する

ワークスペースの「PV」を開き、計測を受け付けるドメインを登録します。登録・変更はオーナーまたはメンテナーが行います。サブドメインは別登録で、登録外のドメインと`localhost`からの閲覧は数えません。

1. 実際に配信するドメインを登録します。
2. サイトに計測処理を設置します。
3. 登録済みドメインを通常のブラウザで開きます。
4. 管理画面で受信状況とグラフを確認します。

APIキーは不要です。公開記事を取得する配信APIの認証と、PVの送信は別の仕組みです。自動操作ブラウザは計測対象外なので、E2Eテストで数字が増えなくても設定ミスとは限りません。

## 2. Next.jsにPageViewを設置する

Next.js App Routerでは`@genko-me/react/next`から読み込みます。以下のパッケージを追加してから、`app/layout.tsx`にパス計測用の部品を1つ置きます。

```bash
npm install @genko-me/react @genko-me/core
```

```tsx
import type { ReactNode } from 'react';
import { PageView } from '@genko-me/react/next';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <PageView workspace="your-workspace" />
      </body>
    </html>
  );
}
```

`workspace`はワークスペースのスラッグへ置き換えます。`PageView`は画面に何も描画しません。Next.js版は`usePathname()`に追従するため、App Router内の画面遷移でもパスを送信します。

記事ページでは、取得済み記事のIDを別に送ります。次はサーバーコンポーネントとして利用する記事用の表示部品です。

```tsx
import { PageView, ViewCount } from '@genko-me/react/next';

export function ArticleViews({ entry }: { entry: { id: string } }) {
  return (
    <>
      <PageView workspace="your-workspace" entryId={entry.id} />
      <ViewCount workspace="your-workspace" entryId={entry.id} />
    </>
  );
}
```

レイアウトの送信はパス、記事側の送信は記事の閲覧数を加算します。記事側に`entryId`を付けたことでパスが二重に加算されることはありません。`ViewCount`は累計を表示するだけで、閲覧数を増やしません。

Next.js以外のReactでは`@genko-me/react`からimportします。独自ルーターでは現在のパスを`path`に渡し、SPAの画面遷移でも更新されるようにしてください。

## 素のJavaScriptや静的サイトでPVを数える

Reactを使わないサイトでは、ブラウザ向けの関数を使います。次はnpmパッケージを解決できるバンドラーのブラウザ用エントリーファイルに置く例です。Node.js側で実行しても閲覧は送信されません。

```ts
import { sendPageView } from '@genko-me/core/browser';

sendPageView({ workspace: 'your-workspace', path: location.pathname });
sendPageView({ workspace: 'your-workspace', entryId: 'abcDEF123456' });
```

2行目は記事ページで、実際に取得した記事IDへ差し替えて使います。記事以外のページなら最初の送信だけで十分です。SPAでは初回表示だけでなく、ルーターの遷移後にも送信します。

2026年10月時点で、Vue・Svelte・Web Components専用のPV部品は未対応です。この関数を使えば、表示部分のフレームワークとは分けて組み込めます。[静的HTMLのお知らせ実装](https://blog.genko.me/static-site-news-cms)と組み合わせる場合も、スクリプトの読み込み方法を揃えてください。

累計を自分で取得する場合は、次の関数が使えます。

```ts
import { fetchViewCounts } from '@genko-me/core';

const counts = await fetchViewCounts({
  workspace: 'your-workspace',
  entryIds: ['abcDEF123456'],
  paths: ['/blog/hello'],
});
console.log(counts.entries.abcDEF123456, counts.paths['/blog/hello']);
```

取得失敗は表示側で扱います。累計表示は最大約5分キャッシュされます。キャッシュと重複判定は分けて確認します。

## 人気記事をPVの多い順に並べる

一覧取得で`orders: '-views'`を指定すると、累計閲覧数が多い順になります。`orders: 'views'`は少ない順で、未計測の記事は0として扱います。次はSDKの設定を含む取得例です。

```ts
import { createGenko, listApi } from '@genko-me/sdk';

const genko = createGenko({
  workspace: 'your-workspace',
  apiKey: process.env.GENKO_API_KEY!,
  apis: { blog: listApi() },
});
const popular = await genko.apis.blog.list({ orders: '-views', limit: 4 });
console.log(popular.contents);
```

`@genko-me/sdk`をインストールし、サーバーで配信APIキーを設定して使います。Reactの`List`でも`orders="-views"`を指定できます。この並び順は累計なので、「今週の人気記事」と表示しないでください。期間別の集計が必要なら、[SDKの取得仕様](https://docs.genko.me/sdk/fetching)にある`views({ ids, days })`などを使い、対象期間と順位の定義を別途設計します。

## どんな情報を保存し、何を保存しませんか

[PVの仕様](https://docs.genko.me/sdk/page-views)では、IPアドレスとUser-Agentから日ごとに変わるソルト付きハッシュを作り、一時的な重複判定に使います。IPアドレスとUser-Agentそのものは保存しません。

保存する閲覧データはパス別・記事別の日ごとの回数です。クエリ文字列とハッシュは取り除き、連続スラッシュと末尾スラッシュも正規化します。Cookie、参照元、デバイス、国、訪問者の追跡情報は保存しません。ボットや自動操作ブラウザは除外し、IPごとのレート制限もあります。

したがって、ページに名前などを含むURLを設計しないことも大切です。クエリが除かれてもパスは送信されます。プライバシーポリシーへは、パスをgenkoへ送る仕組みとして説明すると、実際の処理と案内を揃えられます。

## GA4・Cloudflare・Plausibleとはどう使い分けますか

2026年10月20日に各社公式資料で確認した違いです。単なるPVの数だけでなく、編集者が何を知りたいかで選びます。

| サービス | Cookieや計測の特徴 | 選ぶ場面 |
| --- | --- | --- |
| genko PV | Cookieなし。パスと記事IDの日別回数 | CMSで記事の読まれ方を確認したい |
| GA4 | 通常のタグはファーストパーティCookieでユーザーとセッションを区別。Cookieなしの送信も可能 | ユーザー・セッションを含む解析を設計したい |
| Cloudflare Web Analytics | CookieやlocalStorageを計測に使わない。ページ表示やパフォーマンスを扱う | サイト全体の表示体験も見たい |
| Plausible | Cookieなし。参照元や国、ブラウザ等も扱う | 流入元などを含むサイト解析をしたい |

GA4は「Cookieがなければ一切送信できない」わけではありません。[Googleの説明](https://support.google.com/analytics/answer/11397207?hl=en-GB)も、その点を明記しています。[Cloudflare](https://www.cloudflare.com/web-analytics/)は端末側の状態を使わない計測、[Plausible](https://plausible.io/data-policy)は日替わりの識別子とより広い解析項目を説明しています。genkoで記事の反応を見つつ、別の解析ツールを併用する選択もできます。

2026年10月時点でgenkoのPV計測は現在無料ですが、将来の無料枠と従量料金は未定です。CMS本体のプランは[料金と上限](https://docs.genko.me/studio/plans)と[公式サイト](https://genko.me/)で確認してください。

## よくある質問

### リロードしてもPVが増えないのはなぜですか？

同じ端末の同じページは30分に1回として数えます。累計表示のキャッシュ、受付ドメイン、ボット除外も確認してください。

### localhostでPVの動作確認はできますか？

localhostからの閲覧は計測しません。登録したドメインのページを、通常のブラウザで開いて確認します。

### ViewCountを置くだけで計測できますか？

できません。`ViewCount`は表示用です。送信には`PageView`か`sendPageView`が必要です。

### GA4とPVの数字が一致しなくても問題ありませんか？

重複除外やボット判定、計測の定義が異なるため、同じ数字になるとは限りません。運用の判断には同じサービスの同じ定義で推移を比較します。

## 出典

2026年10月20日に確認しました。

- [genko PV](https://docs.genko.me/sdk/page-views)
- [genko SDKの取得](https://docs.genko.me/sdk/fetching)
- [genko 料金プラン](https://docs.genko.me/studio/plans)
- [Google Analytics 4のCookie](https://support.google.com/analytics/answer/11397207?hl=en-GB)
- [Cloudflare Web Analytics](https://www.cloudflare.com/web-analytics/)
- [Cloudflare Web Analyticsの概要](https://developers.cloudflare.com/web-analytics/about/)
- [Plausible Data Policy](https://plausible.io/data-policy)