ユーザーの動きを録画したり、ヒートマップも活用できるツール「Hotjar」のWordPressサイトに導入する方法

サイト内でクリックされている箇所や、ユーザーの視線の動きを知りたい時ってありませんか？

それらを分析できれば、リンクやバナーを設置したり、サイト制作・リニューアルする際にも大きく役立ちますよね。実際にサイトを使う側の視点を探れば、新たな気づきもあると思います。

というわけで今回は、サイト上のユーザーの動きを録画したり、ヒートマップやフィードバック機能まで活用できるサービス「Hotjar」をWordPressサイトに導入する方法をご紹介いたします。

「Hotjar」の機能概要

「Hotjar」は、ヒートマップやユーザーの動き、フィードバックを活用してサイトのユーザービリティをUPできるツールです。

個人プラン、ビジネスプラン、エージェンシープラン（第三者のサイトを分析するプラン）の3種類が用意されています。詳しくは公式ページでご覧ください。

個人プランは、1日あたり2000ページビューまでと制限がありますので、体験版として活用し、後から最適なプランを選ぶといいでしょう。

Hotjarには、大きく分けて以下の4つの機能があります。無料版でも制限の範囲内で使えます。

• ヒートマップ：ユーザーがどこをクリックしたのか、どこに注目したのかなどを確認できる機能
• レコーディング：ユーザーのカーソルの動きを録画できる機能
• フィードバック：ユーザーからフィードバックをもらえる機能
• サーベイ：アンケートを表示してユーザーを調査できる機能

WordPressで使えるヒートマップなら以下のようなプラグインもあります。

WordPressサイトに「Hotjar」を導入する手順

「Hotjar」をWordPressで利用する前に以下の初期設定が必要です。それぞれ解説いたします。

1. Hotjarのアカウント作成（Googleアカウントを利用＆クレジット情報不要）
2. WordPress専用のプラグインの有効化＆アカウントとの連携

Hotjarのアカウントの登録

Hotjarの公式サイトのこの画面でお手持ちのGoogleアカウントでログインしてください。

ログインすると以下の画面が開きますので、いずれかの項目にチェックを入れて「NEXT」をクリックしてください。

何を目的にインストールしたのかを聞かれているだけですので、特に気にせず選択して次へ進んでください。

次の画面で、あなたの役割やこのサービスを第三者のサイトに使うのかどうかなどを聞かれます。

上記を例に入力してみてください。

続いて、分析したいサイトのURLを入力して、サイトのタイプを選択します。今回WordPressサイトのURLを入力します。

下部の「Start Using Hotjar」をクリックすると以下の画面が表示されます。ここまできたら、もう直ぐセットアップ完了です。

WordPressサイトとの連携

今回はWordPressに導入するので、真ん中のタブをクリックします。

WordPressのアイコンをクリックすると導入方法のページが英文で開きますが、プラグインを有効化するだけですので、特に見る必要はありません。

ただし、上記画面の赤枠のIDを後ほど使うので、画面をそのまま残したままにしておいてください。

続いてWordPressサイトを開いて専用のプラグインを有効化いたします。

管理画面で「Hotjar」と検索してインストールしてください。

ダッシュボードの設定＞Hotjarを選択して先程の画面のIDをコピペして「変更を保存」を押します。

上部に表示される「Click here to verify your install 」をクリックします。

すると導入したWordPressサイトが表示され、左上に以下のように表示されます。

これでWordPressサイトへHotjarの導入が完了しました。

Hotjarの使い方

Hotjarの4種類の機能とその基本的な使い方を解説していきます。

• ヒートマップ機能
• レコーディング機能
• フィードバック機能
• サーベイ機能

それぞれこの画面を基準に操作します。

ヒートマップ機能

ヒートマップ機能は、ユーザーがカーソルを合わせた箇所やクリックした箇所をサーモグラフィーのようなUIで確認できる機能です。温度が高い箇所（色が赤に近い箇所）で集中してクリックされたり、カーソルが合わせられているということです。

左側の「Heatmaps」をクリックして、下記箇所にURLを入力します。

入力箇所の左側にあるドロップダウン項目は、単一のページのみか同じアドレスから始まるページを含むかどうかを設定する箇所です。

条件を設定したら右側の「View Heatmap」をクリックしてヒートマップを確認してみましょう。

しかも、デバイス別（PC/タブレット/スマホ）のヒートマップを確認できます。クリックされた箇所や、カーソルの軌跡、スクロールの加減などもすべてチェック可能です。上図は、PCでのカーソルの軌跡を示したヒートマップのサンプルです。

レコーディング機能

レコーディング機能は、ユーザーの動き（カーソルの軌跡）を記録できる機能です。どの箇所に滞在していたのか、どのような動きでクリックや離脱に至ったのかをチェックできます。

左側の「Recordings」をクリックすると、デフォルトでは、過去30日間のユーザーの動きを確認できます。ユーザーごとにIDが振り当てられ、各ユーザーがどれだけの間、どのページを見てどこから離脱したのか日付や時刻も合わせて確認できます。

PLAYボタンをクリックするとそのユーザーの動きを動画で確認可能です。すでに再生済みのものは、PLAYボタンが灰色になります。左側の「USER SEGMENT（ユーザーの区分）で「New users（新規ユーザー）」や「Returning users（再訪問したユーザー）」などを選択すればソート表示も可能です。

フィードバック機能

ユーザーからフィードバックをもらえる機能です。導入したサイトにフィードバック用のウィジェットを表示できます。

左のメニューで「Incoming」をクリック、右上の「New Feedback Widget」を押して、フィードバックウィジェットの中身を設定します。

下記画面でウィジェットを作っていきます。すべて英語で書かれていますが、ブラウザがChromeの場合は、右クリックして「日本語に翻訳」を押すとわかりやすいかと思います。

以下で順番に説明いたします。

Name

管理用にウィジェットに名前をつけます。

Appearance

ウィジェットを表示する位置（画面の横 or フッター）や「Feedback」という文字の言語、ウィジェットの色などを設定します。デフォルトでは、画面中段の右端に英字で赤色（#f4364c）で表示されます。ここはお好みで変更してみてください。

Steps

ここでウィジェットの中身を設定してきます。

上から順に解説いたします。

一つ目は質問文を入力します。
例：「サイトは使いやすいですか？」

チェックボックスは、フィードバック送信時のスクリーンショットを自動で添付するかどうかの設定です。

二つ目はメールアドレスを入力してもらうフィールドに表示する文言を設定します。
例：「メールアドレスを入力していただければ、お得な情報をゲットできます。」

入力いただければ、メルマガのリストに追加することも可能ですね。右側のスイッチでいつでも非表示にもできます。

三つ目は、追加で表示する文言を設定可能です。こちらも任意で表示/非表示にできます。リンクも設置できるので、より詳しい内容を知りたい方のために活用できます。
例：メールアドレスを入力する理由や、このフィードバックの目的など

四つ目は、フィードバックを送信いただいた後に表示するメッセージを設定します。
例：フィードバックありがとうございました。

Targeting

どのデバイスのユーザーに表示するか、どのページで表示するかを詳細に設定できます。

特に詳細に設定しない場合は、デフォルトのままで大丈夫です。特定のページでのみ表示したい場合は、「On pages I specify.」を選択して、URLを入力してください。

Forward Feedback

フィードバックが送信された際に、Slackやメールで受け取るかどうかをここで設定します。こちらも任意で設定可能です。

Review&Activate

最後にウィジェットを有効にするかどうかを設定します。有効化する場合は、「Active」を選択して「Start Incoming Feedback」をクリックして完了です。

サーベイ機能

下記のように任意のサーベイ（アンケート）を作成・表示できる機能です。

左側のメニュー「Surveys」で設定できます。「New Survey」をクリックして詳しい設定画面へ移ります。

以下がサーベイの詳細設定画面です。

一つ目で、管理用にアンケートの名前を入力します。
例：「サイトに訪問した理由について」

二つ目で、サイト内にウィジェットとして表示するか、全画面のモーダルウィンドウとして表示するかを設定します。全画面は煩わしいので、特別な理由がない限りおすすめしません。一番右は、外部リンクとして表示できる設定です。

三つ目で、質問と回答を設定します。リアルタイムでプレビューが表示されるので、わかりやすいですね。

自由回答型か選択回答型かを選べます。両タイプを連結・追加することも可能です。以下のようにカーソルを合わせるとプレビューで確認できます。

選択肢に数値を設定すれば5段階評価などのアンケートを作ることも簡単ですね。

最後にアンケート完了後に表示するメッセージを設定します。
例：「アンケートにご協力いただきまして、ありがとうございました。」

「フィードバック機能」と同様の設定内容は割愛いたしますが、飛んで六つ目の設定では、どのタイミングでアンケートウィジェットを表示するかを設定できます。

上図は、日本語訳した画面のスクリーンショットです。ページが読み込まれた直後や、ページを閉じよう（放棄しよう）とした時などに表示させるかを選択できます。

また、アンケートに回答（応答）するまで表示し続けるかどうかも設定可能です。煩わしくない程度に設定しておきましょう。

Hotjarを活用してサイトのユーザビリティをUPしよう

Hotjarで使える機能の概要をご紹介して参りました。

ヒートマップに、ユーザー行動の録画に加えて、フィードバック機能まで搭載されている高機能なツールです。どの機能もユーザビリティの向上に活用できます。綺麗なUIで操作しやすい点もおすすめできる点です。

実際のユーザーは、制作側で思いつかない動きをしていることもあるので、意外な発見をサイトやページ制作に活用してみてください。まずは無料版で試して、有料プランを検討してみるのもいいと思います。

今回は、一例としてWordPressサイトに導入する方法をご紹介いたしましたが、他のwebサイトでも使えるので、基本的な使い方や設定方法を参考にしていただけますと幸いです。