Webサイトの管理・運営をしていると気になるのは、アクセス数はもちろんのこと、ユーザーがどのセクションに注目しているのか、どのコンテンツに興味を持たれていないのか、などの情報。
Google Analyticsなどでもある程度は情報として取れますが、画面のどこをクリックorタップしているのか、どこまでスクロールされているのか、などを数値として見る手段はありません。
そこで有用なのがヒートマップ。
ユーザーがどこまでスクロールしているのか、画面のどこをクリックorタップしているのか、などを色分けして可視化してくれるので、とてもわかりやすいのが特長。
とは言え、ひとくちにヒートマップツールと言っても、様々なツールが存在していて、無料で使えるものもあれば有料のものもあり、どれを選んでいいのかが悩みどころです。
そこでオススメしたいのは、MicrosoftのClarityというオンラインツール。
Webサイトにコードを埋め込むことで、Google Analyticsのように情報収集し、その結果を解析できるサービスがあったのです。しかもページ数もPV数も制限がないのに無料！
百聞は一見に如かず、ということで、まずは使ってみましょう。
ユーザー登録とサイト登録
オンラインツールなので、最初にユーザー登録する必要があります。まずはMicrosoft Clarityのサイトへ。
画面右上の青いボタン「Sign up」をクリックします。
どのアカウントでサインアップしますか？と聞かれます。Microsoftアカウント、Facebookアカウント、Googleアカウントの3種類ありますが、ClarityはGoogle Analyticsなどと連携できるので、Googleアカウントでサインアップします。
現在のブラウザでログインしているGoogleアカウントのリストが表示されます。Clarityで使用するアカウントを選択しましょう。ログインしているアカウントが無い場合は、アカウント情報を入力してログインします。
選択したGoogleアカウントのメールアドレスが自動で入力されます。このアカウントをClarityで使用することを許可するため、チェックボックスにチェックを入れて、「Continue」ボタンをクリックします。
次に、ヒートマップを導入するWebサイトの情報を設定します。Nameにはサイト名を、Website URLにはサイトのURLを「http://」や「https://」の後から入力し、「Add new project」ボタンをクリックします。
これでユーザー登録と、最初のサイトの登録が終わりました。
登録したサイトの設定
登録したサイトで情報収集できるよう、設定を行います。
サイト側の設定
登録したサイトに、情報収集用のトラッキングコードを設定します。
今回設定するのは当サイト「適当に書き連ねるネタ帳のようなもの」で、WordPressを使用していますので、画面真ん中の「Install on a third-party platform」の「View all platforms」をクリックします。
次の画面では「WordPress / WooCommerce」をクリックします。
WordPressにプラグインを追加する方法が書かれたページが表示されますので、画面の指示通りに、WordPress上でプラグインをインストールします。
まずはWordPressにログインし、左側メニューの「プラグイン」をクリック。プラグインの「新規追加」ボタンをクリックします。
キーワード検索欄に「Microsoft Clarity」と入力し、検索結果に表示されたMicrosoft Clarityの「今すぐインストール」ボタンをクリックします。
インストールが終わったら「有効化」ボタンをクリックして、プラグインを有効化します。
有効化できたら、「Setup Clarity」ボタンをクリックして設定画面を開きます。
設定画面では「Project Id」を設定します。一度Microsoft Clarityのサイトに戻り、Project IDを確認します。
「Copy project ID」ボタンをクリックするとコピーされますので、WordPressの設定画面に戻り、Project Id入力欄にペーストして「変更を保存」ボタンをクリックします。
これでWordPress側の準備は完了です。再度Microsoft Clarityのサイトに戻り、設定を続けます。
Clarity側の設定
「Settings」タブをクリックし、左側メニューの「Overview」をクリック。当サイトはブログなので、「Site Category」を「Blog」に変更し、「Save」ボタンをクリックして保存します。
当サイトではGoogle Analyticsを使用しているので、Google Analyticsと連携するための設定を行います。
左側メニューの「Setup」をクリックし、「Google Analytics integration」の「Get started」ボタンをクリックします。
Google Analyticsを使用しているアカウントを選択します。一覧に該当するアカウントが無い場合は、ここでログインします。
Microsoft Clarityが、Googleアカウントに対してアクセスを求めます。全ての項目にチェックを入れて「続行」ボタンをクリックします。
指定したアカウントが、Google Analyticsで管理しているサイトの一覧が取得されますので、今回設定するサイト（ここでは当サイト）を選択し、「Save」ボタンをクリックします。
Google Analyticsと接続されると、このように「Connected」と表示されます。
当サイトではGoogle Tag Managerも使用しているので、こちらも連携しておきます。同画面の上部にある「Install with Google Tag Manager」の「Start setup」ボタンをクリックします。
簡単な説明が表示されます。軽く目を通し、「Connect now」ボタンをクリックして進みます。
Google Tag Managerを使用しているアカウントを選択します。一覧に該当するアカウントが無い場合は、ここでログインします。
Microsoft Clarityが、Googleアカウントに対してアクセスを求めます。全ての項目にチェックを入れて「続行」ボタンをクリックします。
「Serect a GTM account」「Serect a GTM container」ともに、今回設定するサイト（ここでは当サイト）を選択し、「Create and publish」ボタンをクリックします。
Google Tag Managerと接続されると、このように「Connected」と表示されます。
これでAnalyticsおよびTag Managerとの連携設定は完了です。
Clarityの設定 - 日本語化
これを先にやっておくべきでした。デフォルトの状態では全て英語表示になっていますので、これを日本語表示するよう設定します。
画面右上の自分のアカウント名をクリックし、「Manage Account」をクリックします。
「Language」のプルダウンリストから「日本語」を選択します。選択しただけで、すぐに日本語表示に切り替わりますので、特に保存手順などはありません。
上の画面は日本語表示に切り換えた後です。
Clarityの設定 - 文字のマスク
Webサイト上の情報がMicrosoftのサーバに送られる際に、サイト上の文字をマスクする（●に置き換える）かどうかの設定ができます。
通常はデフォルトの（メールアドレスや電話番号などの個人情報と思われるものだけがマスクされる）状態で問題ないかと思いますが、他に「全ての文字をマスクする」「全ての文字をマスクしない」という設定もあるので、必要に応じて設定を変更します。
ヒートマップの確認
サイトの設定が完了すると、徐々に情報が収集されはじめます。Clarityのサイトによると、だいたい2時間ほどで収集された情報が解析され、確認できるようになってくるようです。
当然ですが、その間に解析するサイトにアクセスがあれば、の話ですが。
とりあえず設定してから30分後にヒートマップを確認してみると…既にアクセスがあり、情報が収集されていることがわかりました。
集計するサイトを追加する
さて、集計するサイトがひとつだけなら、あとは情報が集まるのを待つだけでいいのですが、他にも集計したいサイトがある場合は、上記作業をサイトの数だけ繰り返します。
サイトを追加したい場合はどうしたらいいか。まずは、画面上部の「自分のプロジェクト」をクリックします。
左上の「＋新しいプロジェクト」ボタンをクリックします。
あとは、上の方で書いた手順と同じように、ヒートマップを導入するWebサイトの情報を設定していけばOKですが、2つ目以降のサイトを追加する場合は、少しだけ手順が変わる部分がありました。
2つ目以降のサイトを登録する場合、そのサイトも同じGoogleアカウントでGoogle Tag Managerを使用している場合は、「Googleタグマネージャを使用してインストール」という項目が増えています。そのまま「セットアップの開始」ボタンをクリックしてもいいですし、「別のプラットフォームを使用する」をクリックし、そこからWordPressを選んで設定を進めてもOKです。
さいごに
ということで、仕事で管理・運営しているサイトで使えるかどうかの検証も兼ねて、当サイトにヒートマップツール「Microsoft Clarity」を設定するまでの手順をご紹介しました。
設定の手順はさほど難しくなく、解析結果も見やすくわかりやすいので、導入する価値はありそうです。個人的には、ダッシュボードで様々な情報が確認できる点もメリットじゃないかな、と。
特に、「参照元」や「クイックバック」はページ更新の参考になりますし、「JavaScriptのエラー」などは環境によって発生しにくいものもあるので助かります。
そして、「デッドクリック」や「イライラしたクリック」なんかはちょっと面白いですね。問題点の発掘ができそうです。
様々なツールを駆使して管理・運営していく必要性を感じるWebサイトですが、ツール同士を連携させることで、より目的に沿った使い方ができるようになるのではないでしょうか。
以上、お疲れ様でした！
コメント