ブログ運営

【簡単】無料ヒートマップツール「Clarity」のインストール方法を解説!

Microsoftから無料で公開されているヒートマップツール「Clarity」ですが、無料にもかかわらず機能性十分ということで注目を浴びていますね。

実際に私も利用していますが、サイト閲覧者の行動が可視化されるので、サイト分析に役に立つツールとなっています。

そんなClarityのインストール方法が知りたいといった方に向けて、Clarityのインストール方法を紹介したいと思います。

ClarityとGoogleアナリティクスの連携方法も解説しているので、ぜひ参考にしていただければと思います。

Clarityのインストール方法

Clarityのインストールは簡単です。

簡単な流れ

  • Clarityプロジェクトを作成する
  • サイトにClarityのトラッキングコードを埋め込む

 

プロジェクトを作成

まずは、以下のリンクからClarityでプロジェクトを作成します。

Microsoft Clarity - Free Heatmaps & Session Recordings

「Get started」ボタンをクリックします。

 

ログイン画面が表示されるのでログインを行います。アカウントを持っていない人は、Microsoftアカウントを作成しましょう。

 

以下の画面が表示されるので、プロジェクトを作成します。ここで作成したプロジェクトで、サイトの分析情報が見れるようになります。

参考

Name:好きなプロジェクト名を入力します。プロジェクトはサイトごとに作成することもできるので、見分けがつきやすい名前にすると管理がしやすいです。

Website:サイトのURLを入力します。

Site category:該当するサイトカテゴリーを選択します。

これでプロジェクトの作成は完了です。

トラッキングコードの埋め込み

Clarityでサイトを分析するには、Clarityのトラッキングコードをサイトに埋め込む必要があります。

埋め込み方法は2通りあります。

  1. ClarityのWordPressプラグインを利用
  2. 手動で<head>要素に貼り付け

どちらか好きな方法でOKです。

WordPressプラグインを利用した方法

WordPressプラグインを利用する場合は、プロジェクトIDが必要になります。

プロジェクト作成後の「Setup」画面から、プロジェクトIDをコピーしておきます。

 

次に、WordPressからClarityプラグインの新規追加をします。

WordPressのプラグイン新規追加画面から、検索ボックスに「Microsoft Clarity」と入力して検索します。

以下のように「Microsoft Clarity」のプラグインが表示されるので、インストールして「有効化」します。

 

「Setup Clarity」ボタンをクリックします。

 

以下の画面が表示されるので、先ほどコピーしておいた「プロジェクトID」を入力して「変更を保存」ボタンをクリックします。

これで、プラグインによるClarityトラッキングコードの埋め込みは完了です。

手動

手動でトラッキングコードを埋め込むには、以下のコードをサイトの<head>タグ内に貼り付けます。

Googleアナリティクスとの連携

Googleアナリティクスとの連携方法を紹介します。

Setup画面の一番下にGoogleアナリティクスと連携する箇所があるので「Get started」ボタンをクリックします。

 

Googleアナリティクスへのアクセス権限の付与を聞かれるので「許可」をします。

 

権限付与の確認画面が表示されるので「許可」ボタンをクリックします。

 

Googleアナリティクスで複数サイトを管理している場合は、連携したいサイトを聞かれるので対象サイトを選択します。

 

これでClarityとGoogleアナリティクスの連携は完了です。

まとめ

無料ヒートマップツール「Clarity」のインストール方法を解説してきました。

ちなみにですが、トラッキングコードの埋め込みが完了してからデータの表示までは、最大2時間かかる場合があるとのことです。

埋め込みが完了してから、しばらく時間をおきましょう。私の場合は20分くらいで分析結果がみれるようになりました。

-ブログ運営