Microsoft Clarity for WordPress の導入と設定

Microsoft Clarity icon

Microsoft Clarity の特徴

  • 見やすい UIでウェブサイトのユーザー インタラクションを把握できる無料の行動分析ツール
  • スクロールの奥行きやデッドクリックなどを確認でき、サイトのユーザーエクスペリエンスの分析に最適
  • Copilot(生成AI)を実装し、サイトの指標を簡潔に表示
  • オープンソースで開発
  • Google Analytics GA4との連携もサポート
コパイロットとの AIチャットも実装予定で、ユーザーの質問に対してコパイロットがデータを分析して回答するようになる。

開発元

  • 開発元:Microsoft
  • 開発元の拠点:米国

アクセス

アカウントの登録

Microsoft Clarity 001

Microsoft Clarity 002

公式サイト の「使い始める」をクリックして、Microsoftアカウント・Facebookアカウント・Googleアカウント からサインアップに使用するアカウントを選択し、アカウントにログインして Clarityのアクセスを許可。

Bing Webmaster Tools を利用している場合は、Bing Webmaster Toolsから Clarityのリンクを開き、Bing Webmaster Toolsのアカウントでサインイン。

Microsoft Clarity 003

Clarityの使用許諾書に問題なければ 承諾します をチェックして「続ける」。

Microsoft Clarity 004

分析するサイトの情報を入力して「新しいプロジェクトを追加する」。

Microsoft Clarity 005

あと少しで完了です。 と表示されたらワードプレスの管理画面を開く。

Clarity プラグインのインストール

Microsoft Clarity 006

ワードプレスの管理画面を開いたら、左サイドパネルの プラグイン から 新規プラグインを追加 を選択。

ブラウザや拡張機能のアドブロック機能は無効にしておく。

Microsoft Clarity 007

Microsoft Clarity 009

Microsoft Clarity を検索してインストールしたら「有効化」。

Microsoft Clarity 010

Microsoft Clarity 011

プラグインを有効にしたら「Setup Clarity」をクリックし、既存の Clarity プロジェクトに接続する に分析するサイトが登録されているので選択後「接続」。

Microsoft Clarity 012

データの収集が開始する。

Clarityのドキュメント には content.php data-clarity-region=”article” のコード追加に関する記載があるが、プラグインをインストールすると該当のコードは content.php に追加される。

初期設定

Microsoft Clarity 031

管理画面の右上にある Clarity の詳細を見る をクリックして Clarityの管理ページを開く。

Microsoft Clarity 023

ツアープロジェクト設定 をクリック。

Microsoft Clarity 022

サイトカテゴリー を選択して保存。

Microsoft Clarity 024

Microsoft Clarity 025

Microsoft Clarity 026

Googleアナリティクスと連携する場合は、左サイドパネルの セットアップ から Googleアナリティクスの統合 の「開始する」を開き、Googleアナリティクスで使用している Googleアカウントでログイン後に Clarityのアクセスを許可して接続するサイトを選択。

Microsoft Clarity 027

Microsoft Clarity 028

管理者のアクセスをデータから除外する場合は、IPブロック で IPアドレスを追加。

Microsoft Clarity 029

Microsoft Clarity 030

上部メニューの 開始 を開いて残りのツアーを確認。

データの閲覧

Microsoft Clarity 033

Microsoft Clarity 032

導入後にデータが表示されるまで 5~ 6時間は必要で、WordPressの管理画面の左サイドパネルに追加されている Clarity で主な指標を確認できる。

Microsoft Clarity 031

Microsoft Clarity 034

ヒートマップや Googleアナリティクスなどは Clarityのウェブサイト にアクセスする。

ブラウザ拡張機能 – Microsoft Clarity Live

Microsoft Clarity 035

ブラウザ拡張機能をインストールすると、Clarityにログインした状態であればコードを設置したサイトにヒートマップやエリアマップをオーバレイで表示できる。

拡張機能は Chromium系のブラウザのみ利用でき、Firefoxは未サポート。

Microsoft Clarity 037

ストアから拡張機能をブラウザに追加。

Microsoft Clarity 038

Microsoft Clarity 039

Microsoft Clarity 040

拡張機能から Microsoft Clarity Liveを選択し、Show Clarity widget を有効にする。

アドブロックが有効だと Clarity Live failed to launch と表示されてウィジェットを起動できないので、Clarity Live利用時はブラウザや拡張機能のアドブロックやトラッキングブロックを無効にする。

Microsoft Clarity 041

Microsoft Clarity 042

ウィジェットを有効にすると表示ページの情報が右下に表示される。

Microsoft Clarity 043

ヒートマップやエリアマップを選択すると情報がページにオーバレイで表示される。

関連記事
GTrancelate-icon

GTranslate WordPress の設定と使い方

翻訳精度が高い Google のニューラル翻訳 を利用して翻訳されたページを サブドメインやサブディレクトリで配信できるリーズナブルな Wordpress の翻訳プラグイン

Ad-Inserter-Pro-icon

Ad Inserter の設定と使い方

Index Ad Inserter の特徴開発元ダウンロードプランの比較システム要件インストール初期設定広告ブロック検知広告ブロックの設定 Ad Inserter の特徴 無料で利用できる WordP…

Ad-Inserter-Pro-icon

Ad Inserter Pro のインストールと設定

Index Ad Inserter Pro の特徴開発元ダウンロードシステム要件購入方法インストール初期設定広告ブロック検出時の広告置換広告ブロック検出時のコンテンツ保護(非表示)クリック詐欺防止広告…