久しぶりにマイクロソフトの製品で、使ってみたいと思えたサービスです。
いつぶりだろう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サインアップ](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100294/-2020-11-03-9.09.29/-2020-11-03-9.09.29.png?_i=AA 660w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_232,c_scale/f_auto,q_auto/v1613100294/-2020-11-03-9.09.29/-2020-11-03-9.09.29.png?_i=AA 300w)
プロジェクトを作成
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613088797/-2020-11-03-9.10.42/-2020-11-03-9.10.42.png?_i=AA 628w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_182,c_scale/f_auto,q_auto/v1613088797/-2020-11-03-9.10.42/-2020-11-03-9.10.42.png?_i=AA 300w)
プロジェクトに必要な情報を入力
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100289/-2020-11-03-9.11.41/-2020-11-03-9.11.41.png?_i=AA 916w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_237,c_scale/f_auto,q_auto/v1613100289/-2020-11-03-9.11.41/-2020-11-03-9.11.41.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_607,c_scale/f_auto,q_auto/v1613100289/-2020-11-03-9.11.41/-2020-11-03-9.11.41.png?_i=AA 768w)
セットアップを行う
Clarityの設定画面から、トラッキングコードを取得します。
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_644,c_scale/f_auto,q_auto/v1632106239/1f638fd1a0e04f86c336e66c634326be/1f638fd1a0e04f86c336e66c634326be.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_189,c_scale/f_auto,q_auto/v1632106239/1f638fd1a0e04f86c336e66c634326be/1f638fd1a0e04f86c336e66c634326be.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_483,c_scale/f_auto,q_auto/v1632106239/1f638fd1a0e04f86c336e66c634326be/1f638fd1a0e04f86c336e66c634326be.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/w_1536,h_966,c_scale/f_auto,q_auto/v1632106239/1f638fd1a0e04f86c336e66c634326be/1f638fd1a0e04f86c336e66c634326be.png?_i=AA 1536w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1632106239/1f638fd1a0e04f86c336e66c634326be/1f638fd1a0e04f86c336e66c634326be.png?_i=AA 1812w)
Clarity tracking codeのタグをタグマネージャー経由で実装します。
GTM上で、新しいタグの設置、カスタムHTMLで、コードを設定し、トリガーをAll Pagesにして、公開する
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_697,c_scale/f_auto,q_auto/v1632106235/b451db55358431e0858795522980865a/b451db55358431e0858795522980865a.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_204,c_scale/f_auto,q_auto/v1632106235/b451db55358431e0858795522980865a/b451db55358431e0858795522980865a.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_523,c_scale/f_auto,q_auto/v1632106235/b451db55358431e0858795522980865a/b451db55358431e0858795522980865a.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/w_1536,h_1046,c_scale/f_auto,q_auto/v1632106235/b451db55358431e0858795522980865a/b451db55358431e0858795522980865a.png?_i=AA 1536w, https://res.cloudinary.com/dz7ruywxa/images/w_2048,h_1395,c_scale/f_auto,q_auto/v1632106235/b451db55358431e0858795522980865a/b451db55358431e0858795522980865a.png?_i=AA 2048w)
Google Analyticsとの連携を行います。ClarityのSetupから、行います。
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100280/-2020-11-03-9.19.51/-2020-11-03-9.19.51.png?_i=AA 944w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_77,c_scale/f_auto,q_auto/v1613100280/-2020-11-03-9.19.51/-2020-11-03-9.19.51.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_197,c_scale/f_auto,q_auto/v1613100280/-2020-11-03-9.19.51/-2020-11-03-9.19.51.png?_i=AA 768w)
Get starterdを押すと、アカウント選択、権限付与の確認がでるので付与しOKを押す
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100271/-2020-11-03-9.41.04/-2020-11-03-9.41.04.png?_i=AA 704w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_163,c_scale/f_auto,q_auto/v1613100271/-2020-11-03-9.41.04/-2020-11-03-9.41.04.png?_i=AA 300w)
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100267/-2020-11-03-9.41.11/-2020-11-03-9.41.11.png?_i=AA 682w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_165,c_scale/f_auto,q_auto/v1613100267/-2020-11-03-9.41.11/-2020-11-03-9.41.11.png?_i=AA 300w)
Googleアナリティクスの管理者メールにセキュリティ通知が届くので、心当たりがあるを選択して、承認する
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100263/-2020-11-03-9.41.27-1/-2020-11-03-9.41.27-1.png?_i=AA 874w, https://res.cloudinary.com/dz7ruywxa/images/w_200,h_300,c_scale/f_auto,q_auto/v1613100263/-2020-11-03-9.41.27-1/-2020-11-03-9.41.27-1.png?_i=AA 200w, https://res.cloudinary.com/dz7ruywxa/images/w_684,h_1024,c_scale/f_auto,q_auto/v1613100263/-2020-11-03-9.41.27-1/-2020-11-03-9.41.27-1.png?_i=AA 684w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_1149,c_scale/f_auto,q_auto/v1613100263/-2020-11-03-9.41.27-1/-2020-11-03-9.41.27-1.png?_i=AA 768w)
Clarityの管理画面に戻ると、以下の画面になるので、selectboxから適切なURLを選択して、activateする
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100250/-2020-11-03-9.52.05-1/-2020-11-03-9.52.05-1.png?_i=AA 1254w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_117,c_scale/f_auto,q_auto/v1613100250/-2020-11-03-9.52.05-1/-2020-11-03-9.52.05-1.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_398,c_scale/f_auto,q_auto/v1613100250/-2020-11-03-9.52.05-1/-2020-11-03-9.52.05-1.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_299,c_scale/f_auto,q_auto/v1613100250/-2020-11-03-9.52.05-1/-2020-11-03-9.52.05-1.png?_i=AA 768w)
何故か、以下のエラーが出るので一旦あきらめる(2020/11/14(土)現在は、解消されてすぐリンクできます)
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100245/-2020-11-03-9.42.29/-2020-11-03-9.42.29.png?_i=AA 1158w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_33,c_scale/f_auto,q_auto/v1613100245/-2020-11-03-9.42.29/-2020-11-03-9.42.29.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_111,c_scale/f_auto,q_auto/v1613100245/-2020-11-03-9.42.29/-2020-11-03-9.42.29.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_84,c_scale/f_auto,q_auto/v1613100245/-2020-11-03-9.42.29/-2020-11-03-9.42.29.png?_i=AA 768w)
There was an issue trying to link Google Analytics. Please try again later.
2時間ぐらい反映を待ちましょう
実際には、20分ぐらいで見れるようになりました。
ダッシュボードの確認
まだ、開始したばかりで、さらにサイトへのアクセスが少ないため見れるものが少ないですが、とりあえず良さげです。
以下のように、クリックした位置がわかったり(ヒートマップ)
![マイクロソフトのサービスで久しぶりに使ってみたくなるものがキターッ「Microsoft Clarity(クラリティ)」](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1613100231/0c0ebaae6fd2554a2471f4765441e98d/0c0ebaae6fd2554a2471f4765441e98d.jpg?_i=AA 1000w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_87,c_scale/f_auto,q_auto/v1613100231/0c0ebaae6fd2554a2471f4765441e98d/0c0ebaae6fd2554a2471f4765441e98d.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_223,c_scale/f_auto,q_auto/v1613100231/0c0ebaae6fd2554a2471f4765441e98d/0c0ebaae6fd2554a2471f4765441e98d.jpg?_i=AA 768w)
以下のような形で、ユーザの行動がみれたりします。(セッションレコーディング)
これは、とりあえず入れておいて損はなさそうです。
[追記]
Analyticsとの連携がうまくできると、カスタムディメンションに、「Clarity Playback URL」が
追加されるので、これにより、コンバージョンがあったユーザの行動を簡単に追えるようになります。
(セカンダリディメンションに、上記を設定すると、ClarityのURLが表示されます。)