無料テーマCocoonにMicrosoft Clarityを連携する方法(プラグイン不要)

無料テーマCocoonにMicrosoft Clarityを連携する方法(プラグイン不要)のアイキャッチ画像
スポンサーリンク

そもそもMicrosoft Clarity(クラリティ)とは?

「Microsoft Clarity(クラリティ)」とは、Microsoftが提供している無料のサイト解析ツールです。

GA4が「アクセス数」や「流入経路」などの数字を分析するのに対し、Clarityは「読者の行動」を視覚的に見せてくれます。初心者の方に特におすすめしたいのが、以下の2つのすごい機能です。

  • レコーディング(録画)機能:読者がマウスを動かしたり、スクロールしたり、クリックしたりする生の動きを、まるで横でスマホを覗き見しているかのように動画で再生できます。
  • ヒートマップ(サーモグラフィー):よく読まれている場所は「赤色」、読まれていない場所は「青色」といったように、色の濃淡で読者の関心度が一目でわかります。

これほど高機能でありながら、「完全無料」かつ「PV(ページビュー)数無制限」で使えるというのが最大の衝撃メリットです。導入して損はないツールですよ!

【ステップ1】Microsoft Clarityに登録してIDを取得する手順

まずは、Microsoft Clarityのアカウントを作成し、ブログと連携するための「プロジェクトID」を取得しましょう。

  1. Microsoft Clarityの公式サイトへアクセスし、「サインアップ」をクリックします。
  2. Microsoft、Facebook、Google のいずれかお好きなアカウントを選んでサインインします。
  3. 「新しいプロジェクト」の作成画面が開いたら、ご自身のWebサイトの「名前」と「WebサイトURL」を入力し、「Webサイトの業種」の一覧の中からいずれかを選択します。※合う業種がなければ「その他」を選んでおけばOKです!
    Clarity プロジェクトを作成しましょう
  4. 入力が終わったら「新しいプロジェクトを追加する」をクリックします。
  5. 中央の「追跡コードを取得する」ボタンをクリックします。
    Clarity インストール方法の選択
  6. 設定画面に表示される プロジェクトID(最後に書かれている ”  ” で囲まれた中)をコピーします。
    Clarity プロジェクトIDをクリップボードにコピー

【ステップ2】Cocoon設定にIDを貼り付けて連携する

ここからがCocoonの素晴らしいところです!

通常なら専用のプラグインを導入したり、難しいコードをヘッダーに貼り付けたりする必要がありますが、Cocoonならコピペだけで簡単に完了します。

  1. WordPressの管理画面から「Cocoon設定」を開きます。
  2. 上部に並んでいるタブの中から「アクセス解析・認証」タブをクリックします。
  3. 画面を下の方へスクロールし「Clarity設定」の空欄に、先ほどコピーしたプロジェクトID(文字列)を貼り付けます。
    Cocoon設定のClarity プロジェクトIDを入力する箇所を指し示している状態
  4. 一番下の「変更をまとめて保存」ボタンをクリックすれば完了です!

【さらに便利に】GA4(Googleアナリティクス)を連携する方法

Cocoonへの設置が完了したら、ぜひやっておきたいのが「GA4との連携」です。実は、Clarityの画面から簡単に合体させることができます!

なぜGA4と連携させるの?(驚きのメリット)

連携すると、GA4の「数字のデータ」と、Clarityの「録画データ」が裏側でガッチリ繋がります。

例えば、GA4の画面を見ていて「この記事、なぜか最近クリック率がすごく高いな?」と気になったとき、そのデータを元に、Clarity側で「そのクリックをした読者の実際の動き(動画)」をピンポイントで絞り込んで再生できるようになります!

数字(GA4)で異変に気づき、映像(Clarity)で読者の本音を確かめる、という最強の分析ができるようになるんです。

GA4との連携手順

  1. Microsoft Clarityのダッシュボード(管理画面)を開きます。
  2. 画面右上にある「設定(Settings)」(歯車マーク)をクリックします。
  3. 左メニューから「統合」を選びます。
    Clarity 設定の「統合」を指し示している状態
  4. 画面に表示される「Google Analytics」ボタンをクリックします。
  5. Google Analyticsの統合画面で「開始する」をクリックします。
    Google Analyticsの統合画面で「開始する」を指し示している状態
  6. Googleアカウントの認証画面が出るので、ブログのGA4を管理しているアカウントを選んで「許可」します。下記の画面では「すべて選択」にチェックを入れて「続行」をクリックします。
    Googleアカウントの認証画面で、Clarityがアクセスできる情報を選択するよう指示している状態
  7. 連携したい自分のブログの「GA4プロパティ」を選択して保存すれば完了です!
    Clarityと連携したい「GA4プロパティ」を選択するように説明している状態

管理者の閲覧履歴をClarityに含めないようにする

そのままでは、管理者がサイトを閲覧しても解析されてしまいますので、必要であれば IPアドレスによるブロックを行いましょう。

  1. 左側のメニューから「IPブロック」を選びます。次に表示された画面で「+IPアドレスをブロックする」をクリックします。
    Clarityで「IPブロック」を選択する画面の説明
  2. わかりやすい名前をつけたら、「現在の IP をブロックする」にチェックを入れて「追加」ボタンをクリックします。
    Clarityで「現在の IP をブロックする」にチェックを入れる箇所の説明

Microsoft Clarityの生い立ちと進化の歴史

「こんなに高機能でPV制限もないのに、なんでずっと無料なの?」と不思議に思うかもしれません。そこで、Clarityが誕生した背景や、これまでのアップデートの歴史を少しだけご紹介します。

2020年:すべては「サイト運営者の悩み」から始まった

Microsoft Clarityは、2020年10月に正式に一般公開されました。

当時からヒートマップなどの解析ツールは存在していましたが、「高機能なものは利用料金が高い」「導入するとブログの表示速度が極端に落ちる」といった大きな課題を抱えていました。

そこでMicrosoftは、「誰でも無料で使えて、サイトのパフォーマンスに悪影響を与えない画期的なツールを作ろう!」と立ち上がりました。こうして、高度なデータ処理をMicrosoftの強力なサーバー側で行うことでサイトを重くしない仕組みと、完全無料という信じられない条件を備えたClarityが誕生したのです。

進化を続けるClarityの注目アップデート

リリース後も、Clarityは立ち止まることなく進化を続けています。ブログ運営者にとって嬉しい大きなアップデートをいくつかピックアップしますね。

  • Googleアナリティクス(GA4)との連携:GA4の数値データとClarityの視覚データを繋ぎ合わせて、より深く分析できるようになりました。
  • Copilot(AI)による自動要約機能:なんと、録画された読者の動きをAIが分析し、「この読者はボタンが見つけられず迷っています」などと文章で要約してくれる驚きの機能が追加されました。
  • スマートイベントの導入:読者がイライラして画面を連打した「怒りのクリック(Rage clicks)」などを自動で検知して教えてくれるようになりました。

Microsoftという巨大企業がバックアップしているからこそ、AIなどの最新技術がどんどん追加されているんですね。ブログを成長させるために、使わない手はありません!

まとめ

この記事では、WordPressの無料テーマ「Cocoon」に、プラグインなしでMicrosoft Clarityを連携する方法を解説しました。

標準機能だけでここまで簡単に設定できるなんて、Cocoonは本当に優秀なテーマですよね!プラグインを増やしてサイトが重くなる心配もありません。

これであなたのブログにも、最強の見張りカメラがつきました!ぜひ読者の生の動きを覗いてみて、ブログの改善に役立てていきましょう。

送信中です

×

※コメントは最大500文字、1回まで送信できます

送信中です送信しました!

コメント Leave a Comment

タイトルとURLをコピーしました