久しぶりにマイクロソフトの製品で、使ってみたいと思えたサービスです。
いつぶりだろうw
Googleが、analyticsとセットでこのようなツールを出してくれれば最高なのに。
よーく検索してみると、Beta版は、2018年12月ぐらいにリリースされているようです。
https://www.atmarkit.co.jp/ait/articles/1812/14/news092.html
このツール何がすごいかっていうと、完全無料のようです。うーむ太っ腹。
ヒートマップツールを提供している会社さんはガクブルですね。
ということで、早速、当サイトにも設置してみたいと思います。
目次
「Microsoft Clarity(クラリティ)」の使い方
- サイトにアクセス
- Microsoftアカウント、Facebookアカウント、Googleアカウントのいずれかでサインアップ
- Add New Projectでプロジェクトを作成
- プロジェクトの名前、URL、サイトの種類を設定しプロジェクトを作成
- 作成したプロジェクトから、セットアップを行う。
- GTMでタグを埋め込む。
- 反映まで待ち、ダッシュボードを確認する
サイトにアクセス
https://clarity.microsoft.com/
サインアップ

プロジェクトを作成

プロジェクトに必要な情報を入力

セットアップを行う
Clarityの設定画面から、トラッキングコードを取得します。

Clarity tracking codeのタグをタグマネージャー経由で実装します。
GTM上で、新しいタグの設置、カスタムHTMLで、コードを設定し、トリガーをAll Pagesにして、公開する

Google Analyticsとの連携を行います。ClarityのSetupから、行います。

Get starterdを押すと、アカウント選択、権限付与の確認がでるので付与しOKを押す


Googleアナリティクスの管理者メールにセキュリティ通知が届くので、心当たりがあるを選択して、承認する

Clarityの管理画面に戻ると、以下の画面になるので、selectboxから適切なURLを選択して、activateする

何故か、以下のエラーが出るので一旦あきらめる(2020/11/14(土)現在は、解消されてすぐリンクできます)

There was an issue trying to link Google Analytics. Please try again later.
2時間ぐらい反映を待ちましょう
実際には、20分ぐらいで見れるようになりました。
ダッシュボードの確認
まだ、開始したばかりで、さらにサイトへのアクセスが少ないため見れるものが少ないですが、とりあえず良さげです。
以下のように、クリックした位置がわかったり(ヒートマップ)

以下のような形で、ユーザの行動がみれたりします。(セッションレコーディング)
これは、とりあえず入れておいて損はなさそうです。
[追記]
Analyticsとの連携がうまくできると、カスタムディメンションに、「Clarity Playback URL」が
追加されるので、これにより、コンバージョンがあったユーザの行動を簡単に追えるようになります。
(セカンダリディメンションに、上記を設定すると、ClarityのURLが表示されます。)