ヒートマップツールは、視覚的に、サイト内でのユーザーの行動(どこまで閲覧したか?、クリックされた箇所など)に関するデータを取得することができるツールです。

ヒートマップツールを利用することで、Google アナリティクスなどの解析ツールとは異なり、ユーザーの滞在箇所やクリックされる箇所などを色で表示されているため、専門的な知識がなくても簡単にユーザーの行動を把握することができ、ページの改善につなげることができます。

有料で提供されているツールもありますが、 Microoftが無料で使用することができるヒートマップツール「Clarity」を提供してくれています。

今回は、無料で使用できるヒートマップツール「Clarity」の導入方法を図解でわかりやすくご紹介いたします。
ぜひ、参考にしていただきみなさんのサイトに導入されてみてはいかがでしょうか?

Clarityアカウントの作成

まずは、Clarityにログインするためのアカウントの作成を行う必要があります。
ここからは、Clarityのアカウントの作成方法をご紹介いたします。

1.Clarityのサイト上部にある「サインアップ」をクリックしてください。

Clarity:https://clarity.microsoft.com/

1.Clarityのサイト上部にある「サインアップ」をクリックしてください。

2.サイト上部の「サインアップ」をクリックすると、サインアップするために連携するためのアカウントが表示されます。
サインアップするためのアカウントは、「Microsoft」「Facebook」「Google」の3種類があります。

2.サイト上部の「サインアップ」をクリックすると、サインアップするために連携するためのアカウントが表示される

3.今回は、Googleアカウントでサインインしていきます。

3.今回は、Googleアカウントでサインインしていく

4.「Clarityに同意します」をクリックし、続行をクリックしてください。

4.「Clarityに同意します」をクリックし、続行をクリック

5.プロジェクトを作成するサイトの名前とWebサイトのURLを入力し、「新しいプロジェクトを追加する」をクリックします。

5.プロジェクトを作成するサイトの名前とWebサイトのURLを入力し、「新しいプロジェクトを追加する」をクリック

6.今回は、Google タグマネージャーを使用し、Clarityのインストールを行います。

6.今回は、Google タグマネージャーを使用し、Clarityのインストールを行う

7.「今すぐつながりを申請」をクリックしてください。

7.「今すぐつながりを申請」をクリック

8.インストールを行うGoogle タグマージャーの「アカウント」と「コンテナー」を選択してください。

8.インストールを行うGoogle タグマージャーの「アカウント」と「コンテナー」を選択

9.Clarityと連携を行うGoogle アナリティクスの設定を「開始する」をクリックします。

9.Clarityと連携を行うGoogle アナリティクスの設定を「開始する」をクリック

10.今回、計測を行いたいサイトを選択してください。

10.今回、計測を行いたいサイトを選択

11.Google タグマネージャーとGoogle アナリティクスの設定が完了しましたら、プロジェクトの作成が完了となります。

11.Google タグマネージャーとGoogle アナリティクスの設定が完了すると、プロジェクトの作成が完了となります。

Clarityのトラッキングコードの設置方法

ここからは、Clarityを実際に使用していくための設定についてご紹介いたします。
今回は、Google タグマネージャーでの設置方法についてご紹介していきます。

もし、まだGoogle タグマネージャーを導入していないという方がいらっしゃいましたら、下記記事を参考に導入されてみてはいかがでしょうか?

Google タグマネージャーの設定方法

それでは、早速、Google タグマネージャーでの「Crarity」のトラッキングコードの設定方法についてご紹介していきます。

1.Google Tag Manager にサインインしてください。
Google タグ マネージャーのワークスペースで、[新しいタグ] を選択します。

Google タグ マネージャーのワークスペースで、[新しいタグ] を選択

2.[名前] フィールドで、タグに任意の名前を付けます。例)Clarity タグ
[タグの設定] パネルを選択して、「Clarity」のタグの設定を行います。

[タグの設定] パネルを選択して、「Clarity」のタグの設定

3.[タグタイプを選択] パネルから、[コミュニティ テンプレート ライブラリで他のタグを検出する] を選択します。

[タグタイプを選択] パネルから、[コミュニティ テンプレート ライブラリで他のタグを検出する] を選択

4.「タグテンプレートのインポート」で、「clarity」を検索します。

「タグテンプレートのインポート」で、「clarity」を検索

5.[Microsoft Clarity – Official] を選択してください。

[Microsoft Clarity - Official] を選択

6.「テンプレートの詳細」の上部にある、「ワークスペースに追加」をクリックしてください。

「テンプレートの詳細」の上部にある、「ワークスペースに追加」をクリック

7.[タグの構成] ページで、Clarity プロジェクト ID を入力

今回計測するClarityプロジェクトのIDを、Google タグマネージャーに設定する必要があります。

ClarityプロジェクトのIDは、ブラウザーのアドレスバーのプロジェクトURLに記載があります。
例: https://clarity.microsoft.com/projects/view/projectid/

●Google タグマネージャー

●Clarity 管理画面

Google タグマネージャー
Clarity 管理画面

8.「トリガー」をクリックし設定を行います。

「トリガー」をクリックし設定を行う

9.[トリガーの選択] パネルで、[All Pages]を選択してください。

[トリガーの選択] パネルで、[All Pages]を選択

10.トリガーが追加されましたら、右上の[保存]ボタンから保存を行ってください。

トリガーが追加されると、右上の[保存]ボタンから保存する

11.Google タグマネージャーのワークスペースページ上部の[公開]をクリックすることで、Clarityのタグ設定は完了となります。

設定完了からデータ反映まで約2時間程度かかります。

Google タグマネージャーのワークスペースページ上部の[公開]をクリックすることで、Clarityのタグ設定は完了

IPアドレスのブロック

Clarityでは、特定のIPをブロックすることが可能です。
社内のIPや制作会社などのパートナー会社のIPを登録しておくことで、より正確なヒートマップの結果を取得することができるようになります。

Pアドレスのブロック

まとめ

今回は、Clarityの設定方法についてご紹介させていただきました。
アクセス数や売上の向上を目指し、みなさんのサイトに導入されてみてはいかがでしょうか?

当社では、事業会社様向けにデジタルマーケティングについてのお悩み、貴社の課題に
対して専任のコンサルタントによる無料の個別相談会を毎週金曜に定期開催しております。

運用型広告に関するお悩みごとだけでなく、マーケティングから技術的なことまでお気軽にご相談ください。