Supabase を使用してブログのページ ビューを追跡する方法

ページ ビューは、Web パフォーマンスを追跡するための重要な指標です。Google Analytics や Fathom などのソフトウェア ツールは、外部スクリプトを使用してこれを行う簡単な方法を提供します。

しかし、サードパーティのライブラリを使用したくない場合もあります。このような場合、データベースを使用して、サイトの訪問者を追跡できます。

Supabase は、ページビューをリアルタイムで追跡するのに役立つオープンソースの Firebase の代替手段です。

ページ ビューのトラッキングを開始するためのサイトの準備

このチュートリアルを進めるには、Next.js ブログが必要です。まだお持ちでない場合は、react-markdown を使用して Markdown ベースのブログを作成できます。

公式の Next.js ブログ スターター テンプレートをGitHubリポジトリから複製することもできます。

Supabase は、Postgres データベース、認証、インスタント API、エッジ機能、リアルタイム サブスクリプション、およびストレージを提供する Firebase の代替手段です。

これを使用して、各ブログ投稿のページ ビューを保存します。

スーパーベース データベースの作成

Supabase のWeb サイトにアクセスして、サインインするか、アカウントにサインアップします。

Supabase ダッシュボードで、[新しいプロジェクト] をクリックし、組織を選択します (Supabase は、アカウントのユーザー名で組織を作成します)。

プロジェクト名とパスワードを入力し、[ Create new project ] をクリックします。

API セクションの設定ページで、プロジェクト URL と公開鍵と秘密鍵をコピーします。

Next.js プロジェクトで.env.localファイルを開き、これらの API の詳細をコピーします。

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\n

次に、SQL エディタに移動し、[新しいクエリ] をクリックします。

標準の SQL コマンドを使用して、 viewsというテーブルを作成します。

CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\n);\n

または、テーブル エディタを使用してビュー テーブルを作成することもできます。

テーブル エディターは、ダッシュボードの左側のペインにあります。

ビューを更新するための Supabase ストアド プロシージャの作成

Postgres には、Supabase API を介して呼び出すことができる SQL 関数のサポートが組み込まれています。この関数は、ビュー テーブルのビュー カウントをインクリメントします。

データベース関数を作成するには、次の手順に従います。

1. 左ペインの SQL エディタ セクションに移動します。
2. [新しいクエリ] をクリックします。
3. この SQL クエリを追加して、データベース関数を作成します。 CREATE OR REPLACE FUNCTION update_views(page_slug TEXT)
RETURNS void
LANGUAGE plpgsql
AS $$
BEGIN
    IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN
        UPDATE views
        SET view_count = view_count + 1,
            updated_at = now()
        WHERE slug = page_slug;
    ELSE
        INSERT into views(slug) VALUES (page_slug);
    END IF;
END;
$$;

4. [実行] または Cmd + Enter (Ctrl + Enter) をクリックして、クエリを実行します。

この SQL 関数は update_views と呼ばれ、テキスト引数を受け入れます。まず、そのブログ投稿がテーブルに既に存在するかどうかを確認し、存在する場合は、ビュー カウントを 1 増やします。存在しない場合は、ビュー カウントがデフォルトで 1 に設定されている投稿の新しいエントリを作成します。

Next.js で Supabase クライアントを設定する

Supabase のインストールと構成

@supabase/supabase-js パッケージを npm 経由でインストールし、Next.js からデータベースに接続します。

npm install @supabase/supabase-js\n

次に、プロジェクトのルートに/lib/supabase.tsファイルを作成し、Supabase クライアントを初期化します。

import { createClient } from '@supabase/supabase-js';\nconst supabaseUrl: string = process.env.NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.env.SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient(supabaseUrl, supabaseServerKey);\nexport { supabase };\n

データベースを作成したときに、API 資格情報を env.local に保存したことを思い出してください。

ページビューの更新

Supabase からページ ビューをフェッチし、ユーザーがページにアクセスするたびにビュー カウントを更新する API ルートを作成します。

このルートは、views/[slug].tsというファイル内の/apiフォルダーに作成します。ファイル名を括弧で囲むと、動的ルートが作成されます。一致したパラメータは、slug と呼ばれるクエリ パラメータとして送信されます。

import { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n. from("views")\n. select("view_count")\n. filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default handler;\n

最初の if ステートメントは、リクエストが POST リクエストかどうかをチェックします。そうであれば、update_views SQL 関数を呼び出し、スラッグを引数として渡します。関数は、ビュー カウントをインクリメントするか、この投稿の新しいエントリを作成します。

2 番目の if ステートメントは、リクエストが GET メソッドかどうかをチェックします。そうであれば、その投稿の合計閲覧数を取得して返します。

リクエストが POST または GET リクエストでない場合、ハンドラ関数は「無効なリクエスト」メッセージを返します。

ブログにページ ビューを追加する

ページ ビューを追跡するには、ユーザーがページに移動するたびに API ルートにアクセスする必要があります。

まず、swr パッケージをインストールします。これを使用して、API からデータをフェッチします。

npm install swr\n

swr は、再検証中の古い状態を表します。バックグラウンドで最新のデータをフェッチしながら、ビューをユーザーに表示できます。

次に、viewsCounter.tsx という新しいコンポーネントを作成し、以下を追加します。

import useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total)? data.total: "0"\n } views`}</span>\n);\n};\nexport default ViewsCounter;\n

このコンポーネントは、各ブログの合計ビューをレンダリングします。投稿のスラッグを prop として受け取り、その値を使用して API へのリクエストを行います。API がビューを返す場合、その値が表示されます。それ以外の場合は、「0 ビュー」が表示されます。

ビューを登録するには、各投稿をレンダリングするコンポーネントに次のコードを追加します。

import { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default Post\n

Supabase データベースをチェックして、ビュー カウントがどのように更新されているかを確認します。投稿にアクセスするたびに 1 ずつ増加する必要があります。

ページ ビュー以外のトラッキング

ページ ビューは、サイトの特定のページにアクセスしているユーザーの数を示します。パフォーマンスの良いページとそうでないページを確認できます。

さらに先へ進むには、訪問者のリファラーを追跡してトラフィックがどこから来ているかを確認するか、ダッシュボードを作成してデータをより適切に視覚化します。Google アナリティクスなどの分析ツールを使用すると、いつでも物事を簡素化できることを忘れないでください。