Umamiの使い方｜読まれたページとリンクのクリックを知る

ブログや小さな会社サイトを更新しても、どの記事が読まれ、問い合わせリンクが押されたかは、アクセス数だけでは分かりにくいものです。Umamiは、ページ閲覧やボタン操作をダッシュボードにまとめるアクセス解析サービスです。ここでは「記事から問い合わせページへ進んだか」を見る小さな例で、最初の設定を説明します。

この記事で作るもの：記事別の閲覧と問い合わせクリック

今回は「アクセスが少ない記事を見つける」「記事末尾の問い合わせリンクが押されるかを見る」を目標にします。Umamiを置くだけで売上や検索順位が上がるわけではありません。数字を見て、読まれている記事の説明やリンクを改善するための材料を集めます。

手順1：サイトを登録して計測コードを取る

1. 1Umami Cloudにサイトを追加

   Umami Cloudにアカウントを作り、ダッシュボードの「Websites」からサイトを追加します。表示名は管理しやすい名前、Domainには公開サイトのホスト名（例：example.com）を入力します。

2. 2Tracking codeをコピー

   追加したサイトの編集画面を開き、「Tracking code」に表示されたコードをコピーします。website IDやscriptのURLはサイトごとに異なるため、他人の例を貼らず、自分の画面に出たコードを使ってください。

3. 3サイト共通のheadへ設置

   CMSなら全ページ共通のヘッダー設定へ、静的サイトなら共通レイアウトのheadへ入れます。Next.jsでは公式案内どおりnext/scriptを使います。コードを公開リポジトリへ置く場合も、管理用パスワードやAPIキーは含めないでください。

4. 4自分で1ページ開いて確認

   公開サイトを開き、ダッシュボードに閲覧が出るか確かめます。数分待っても出ない場合は、コードの設置場所・公開反映・ブラウザーの広告ブロックを確認します。開発用ドメインと本番ドメインを分けている場合は、計測対象のdomainも見直します。

手順2：ボタンのクリックを一つだけ記録する

記事から問い合わせページへのリンクが押されたかを見るなら、リンクやボタンにイベント名を付けます。HTML要素へ data-umami-event="問い合わせページを開く" のような属性を追加すると、そのクリックを名前付きイベントとして記録できます。イベント名には個人名、メールアドレス、問い合わせ本文などを入れず、「資料請求」「料金ページへ」など用途だけを付けます。

1. 1確認したい行動を一つ決める

   例：「記事を読んだ人が問い合わせページへ進んだか」。最初から全ボタンを数えず、改善判断に使う行動だけ選びます。

2. 2イベント名を付けて公開

   対象ボタンに短いイベント名を設定し、変更を公開します。計測コードを重複して読み込むと、ページ閲覧が二重に記録されることがあるため、共通レイアウトに一度だけ設置します。

3. 3自分でクリックし、イベント欄を確認

   公開ページでボタンを押し、Umamiのイベントやリアルタイム表示に記録されるか確認します。自分のテスト操作も数字に混ざるため、確認日を控えておくと後で区別しやすくなります。

結果をどう読む？：数字を次の修正につなげる

• 閲覧が多いページ：タイトル・導入・次に読むリンクを見直し、読者が次の行動へ進めるか確認する。
• 閲覧はあるが問い合わせクリックが少ない：リンクの位置、文言、記事内容とのつながりを一つずつ変えて比較する。
• データが少ないページ：一週間だけで結論を出さず、期間を延ばして傾向を見る。訪問数が少ないと数人の差が大きく見える。
• 検索キーワードを知りたい：Umamiはアクセスやイベントを見る道具です。Google検索で使われた検索語句はSearch Consoleで確認します。

専用画面を一度作るだけで運用まで完了するわけではありません。コードを作っても、訪問を記録する仕組み、集計するDB、グラフ画面、保存期間や削除方法は別々に必要です。Claude/Codexはそれらの実装を助けられますが、稼働後の監視やデータ仕様変更への対応は運営者に残ります。Umamiなら計測とレポートの基本形が既にあり、設定したイベントの結果をすぐ見られる点が違います。