個人ブログに Google Analytics と Microsoft Clarity を入れた理由

2026-05-06 読了約8分

What's in this posts

ブログを整え直している流れで、アクセス解析まわりも見直しました。

もともと Cloudflare Web Analytics は使っていましたが、今回は Google Analytics 4 と Microsoft Clarity も追加しました。アクセス数を細かく追いかけたいというより、どの記事が読まれているのか、どこから来ているのか、読者がページ内でどう動いているのかを見られるようにしたかったからです。まあ、そもそも誰も見にきてないんですけどね。やってみたいだけですね。

もともと使っていた Cloudflare Web Analytics

Cloudflare Web Analytics は、個人ブログにはかなり相性がいいと思っています。軽くて、Cookie に依存せず、プライバシー寄りの設計です。まず全体のページビューや訪問傾向をざっくり見るだけなら、これで十分な場面も多いです。

公式の説明によると、JavaScript の beacon と Performance API を使ってデータを収集しており、訪問者の個人データは収集・使用しない設計になっています。Core Web Vitals などのパフォーマンス指標の傾向も確認できます。

「何人くらい来ているのか」「どのページが見られているのか」を日々ざっくり把握するには、これで十分です。

それでも GA4 を追加した理由

GA4 は正直、個人ブログには機能が多すぎる面もあります。ただ、流入元やページごとの傾向を後から掘れるのは便利です。SNS に投稿した直後の反応、検索から読まれた記事、内部リンクで回遊された記事などを見たいとき、Cloudflare より細かい分析ができます。

GA4 の主な強みを整理すると:

リアルタイムレポート: 直近 5分 / 30分のアクティブユーザー、閲覧ページ、イベントをざっくり確認できる。正確な流入元の内訳は、通常のトラフィック取得レポートで後から確認する用途に向く
トラフィック・ユーザー分析: どこから来ているか（検索、SNS、直接など）の内訳を見る
探索（Explorations）: 標準レポートより深く、フィルタやセグメントを組み合わせて分析できる

個人ブログでは全部使う必要はないです。「SNS に投稿したあと、どこから何人来たか」「検索から読まれている記事はどれか」といった目的を決めて、必要なところだけ見る使い方で十分だと思っています。まだ書いたブログをSNSに投稿してないですね、やらないといけないですね。

将来的に Search Console と接続してオーガニック検索の傾向を見たり、イベント設計をして内部リンクのクリックを追ったりもできるみたいですね。将来の選択肢は多い方がいいですからね。

Microsoft Clarity を追加した理由

Clarity は、数字というより読者の動きを見るために入れました。他の人のブログで見て、なんだろうこれと思ってとりあえず、調べて、入れてみた感じです。どこでスクロールが止まるのか、どのリンクが押されるのか、スマホで読みづらそうな箇所がないか。こういうことは、ページビューだけを見ていてもわかりません。

Microsoft Clarity の概要によると、以下のような機能があります:

セッション録画: 実際の動画ではなく、HTML とユーザー操作の再構成。どう読んだかの流れを見られる
ヒートマップ: クリック・スクロール・タップの傾向をページ単位で可視化
イベント / ファネル: 特定の操作の頻度や離脱ポイントを確認
Copilot による要約: Clarity 内の AI 機能でデータをまとめてくれる

長い記事でどこまで読まれているか、目次が使われているか、スマホで読みにくい箇所がないか、といった観点で使おうと思っています。

ひとつ注意点として、セッション録画はユーザーの操作を記録するツールなので、プライバシーへの配慮が必要です。特に、問い合わせフォームや個人情報の入力欄があるページではマスキング設定を確認することを推奨します。Clarity はデフォルトでパスワードフィールドをマスクしますが、追加の確認は必要です。

3つのツールの比較

ツール	得意なこと	個人ブログでの使いどころ	注意点
Cloudflare Web Analytics	軽量なアクセス解析、ページビュー、訪問者、パフォーマンス把握	全体の健康状態をざっくり見る	深い行動分析や自由な探索には向きにくい
Google Analytics 4	流入元、イベント、ページ分析、探索、リアルタイム	記事ごとの傾向や流入経路を深掘りする	高機能なので見すぎると疲れる
Microsoft Clarity	ヒートマップ、クリック、スクロール、セッションリプレイ	読者がページ内でどう動いたかを見る	録画/行動データ系なのでプライバシー配慮が必要

どれかひとつが完全に上位互換というより、見る角度が違います。 Cloudflare は軽い定点観測、GA4 は数字の深掘り、Clarity は行動の観察、という分け方が自分にはしっくりきました。

一文でまとめると:

Cloudflare でざっくり健康診断、GA4 で流入と数字の深掘り、Clarity で読者の動きを見る、という役割分担にしました。

Hugo / Ananke への実装

GA4

Hugo / Ananke はビルトインで GA4 に対応しています。hugo.toml に以下を追加するだけです:

googleAnalytics = "G-XXXXXXXXXX"

G-XXXXXXXXXX は GA4 プロパティの測定 ID です。

Microsoft Clarity

Clarity は Hugo のビルトイン機能にはないため、layouts/_partials/head-additions.html にカスタムコードを追加しました。

hugo.toml の [params] セクションに Clarity の Project ID を定義:

[params]
  clarityProjectId = "XXXXXXXXXX"

layouts/_partials/head-additions.html に以下を追加:

{{- with site.Params.clarityProjectId -}}
  {{- if hugo.IsProduction -}}
    <script type="text/javascript">
      if (navigator.doNotTrack != "1" && window.doNotTrack != "1") {
        (function(c,l,a,r,i,t,y){
            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script", "{{ . }}");
      }
    </script>
  {{- end -}}
{{- end -}}

ポイントは2つです:

hugo.IsProduction のときだけ出力: ローカルのプレビュー環境（hugo server）ではトラッキングコードを出さない
Do Not Track を尊重: ブラウザの doNotTrack が "1" に設定されているときは Clarity を読み込まない

プライバシーポリシーと免責事項も更新した

アクセス解析ツールを増やしたので、プライバシーポリシーと免責事項も合わせて更新しました。技術的にはタグを貼れば終わりですが、読者のデータが第三者サービスに送られる以上、説明は置いておいた方がよいと思います。

具体的には:

プライバシーポリシー: Google Analytics 4 と Microsoft Clarity を使用している旨、各社のプライバシーポリシーへのリンク、オプトアウト方法などを追記
免責事項: 第三者サービスのプライバシーポリシー・利用規約は各社に従う旨を追記

法的な内容の正確性は自分では保証できないため、あくまで「このブログでどんなツールを使っているか」を読者に説明するためのものとして位置づけています。

これから何を見るか

毎日 PV を確認するためではなく、記事を改善するための観察材料として使っていきたいと思っています。