Clarityの導入と活用方法について
はじめまして、mediba 新卒2年目 データアナリストの左海です。
mediba Adventカレンダー10日目ということで、私からはGTMを使用して自社サイトにMicrosoft Clarity(ヒートマップツール)を設定したお話を書いていきます。
Microsoft Clarityでできること
Clarityとは、Microsoft社から2020年10月にリリースされた無料のヒートマップツールです。 Clarityでできることは、主に以下の3つです。
- サイト訪問者数、離脱者数、任意のページにおけるスクロールされた割合など基本数値を把握できる
- 1ユーザーにフォーカスして、サイト上でどんな行動をしたのかセッションレコーディング(録画)できる
- どこをクリックして、どこまでスクロールしたのかヒートマップで視覚的に可視化できる
導入編
設定手順
GTMを使用する場合は、以下の順に設定していきます。
- Microsoft Clarity アカウントを作成する
- GTMを使用し、Clarity tracking codeを配信する
- GTMのプレビューで、設定したタグが配信されているか確認後、公開する
- Clarityの管理画面で、正しく数値が計測されているか確認する
Microsoft Clarityのアカウントを作成する
Microsoft Clarityにアクセスし、赤枠箇所をクリックしてアカウントを作成します。その後、必要事項を記入します。
GTMを使用し、Clarity tracking codeを配信する
Clarity管理画面 > Settings > SetupからClarity tracking codeをコピーし、GTMのタグ設定画面のHTMLに貼り付けます。
GTM側で、タグの作成とトリガーの設定を行います。
タグの作成は、GTM 管理画面 > タグ > 新規 から作成をします。タグとトリガーの設定は以下の通りです。
- タグの種類：カスタムHTML
- トリガーの設定：All Pages
以上で、タグの作成とトリガーの設定は完了です。
GTMのプレビューで、作成したタグが問題なく配信されているか確認する
GTMのプレビュー画面のTags FiredにMicrosoft Clarityタグが確認できました。問題なく、タグが発火されているようです。公開ボタンをクリックします。
GTMの設定は以上になります。
Clarityの管理画面で、正しく数値が計測されているか確認する
最後に、Clarityの管理画面で、問題なく数値が計測されているか確認します。タグ公開から2時間ほどで、Clarityのダッシュボード画面に数値が反映されました。
ヒートマップのデータも反映され、活用できるようになっています。
GTM経由で、自社サイトにClarityの設定が完了しました。
Session Recordingsについて
以下の通り、Session Recordingsも活用できるようになっています。ユーザーのカーソルの動きが鮮明に閲覧できます。
活用方法の検討
Clarityはどういった場面で活用できるのか検討してみました。ここでは、仮説として、任意のページの次のページへの遷移率が減少傾向であるとします。その場合、以下のような課題発見から意思決定までの流れが考えられます。
課題発見
まずは、課題を設定します。ここでは、仮の課題として「任意のページの次のページへの遷移率が減少傾向である」とします。
現状把握・要因調査
GAの定量データを使用し、課題の要因を突き止めようとします。しかし、定量データだけでは、特に要因が分かりません。
次に、Clarityを使用して、任意のページで何が起こっているのかセッションレコーディングとヒートマップで要因を調査します。例えば、非活性箇所がクリックされているような場合には「誤クリックで離脱している」と言えるかもしれません。
方策
方策として以下の案が浮かぶのではないでしょうか。
- クリックできない箇所をクリックできるように活性させる
以上のように、GAの定量データでは普段発見できないようなユーザーの行動でもClarityを使用すれば、簡単に把握することができるでしょう。その結果、意思決定につながると考えています。
おわりに
GTMを使用することで、エンジニアに依頼せずとも、Clarityを設定できるのは便利かと思います。
Clarityは無料でかつ実装に手間がかかりません。そして、ヒートマップやセッションレコーディング機能など多様な機能も魅力的です。ぜひご自身のサイトにClarityを導入してみてはいかがでしょうか。
どなたかの参考になれば、幸いです。
