Hotjarとは|ヒートマップを動画でとれる無料ツールの使い方を日本語で解説

ホームページやブログを改善していくためにアクセス解析は重要だけれど、ランディングページなどページ内でユーザーがどう行動したかを知るにはヒートマップが役に立ちます。

今回はユーザーのマウスの動きやヒートマップを動画で記録してくれるツールを紹介します。1日2000pvまで無料で使えるのでぜひ導入してみてくださいね。

Hotjarとは

Hotjar(ホットジャー)とは、サイト分析ツール。

有名なアクセス解析ツールはGoogleアナリティクスがあるけど、どちらかというとページ間の移動を分析するときに使うことが多くなると思います。それに対して、Hotjarのようなヒートマップは、ページ内の移動を分析するのに効果を発揮しますよ。だから両方をまず導入しておいて必要に応じて情報を活用するのがオススメです。

無料で使えるヒートマップは、ptengineとかuserHeatとか色々あるけど、静止画でしか記録できないんですよね。それでもユーザーの行動心理を想像するための大きなヒントになるけれど、このHotjarは動画でも記録できるんですよ。ただ管理画面が全部英語で日本語対応してないですけどね。

Hotjarの料金

詳しくはこちらの公式ページを見てほしいんですけど、無料プランもあります。

パーソナルプランのBASICプランだと、無料で使えて、一日2000PVまでで、データの保存期間が3ヶ月のようです。個人の場合はまず無料プランから始めてみて、アクセスが増えたら有料プランを検討すればいいと思います。

あなたが会社をやっていて、複数のクライアントのWEBサイトを一つのアカウントで管理したい場合は、エージェンシープランにする必要がありますね。

Hotjarの機能

Hotjarで出来ること

Hotjarで出来ることは、主に8つあります。

  • ヒートマップ
  • 録画
  • コンバージョンファネル
  • フォーム分析

といった分析機能と、

  • 訪問者に質問する
  • 目に見える形で簡単なフィードバックを残してもらう
  • 詳しいアンケート調査を行う
  • マンツーマンでのユーザー調査の依頼する

といったフィードバック機能に大きく分かれます。

ここでは、ヒートマップと画面録画の2つに絞って解説します。

 HEATMAPS【ヒートマップ】

ヒートマップは、ページのどの部分がよく見られているかがサーモグラフィみたいな感じで色分けされて表示されます。あと、どこがクリックされているかもわかります。

RECORDINGS【録画】

この動画を見てもらばわかるけど、
訪問者の実際のマウスの動きとページのスクロールの動きを動画で記録してくれるから、後で再生することが出来ます。

これらのデータを使って、例えば、ページの下部まで到達してないからコピーライティング(文書)を見直すとか、広告バナーの位置を変えるといった改善策がとれるんです。

Hotjarの使い方

それじゃあ早速使っていきましょう。アカウント作成から、画面の見方まで順を追って解説します。

Hotjarのアカウントを作る

まずは公式サイト(https://www.hotjar.com/)にアクセス。

「TRY IT FREE」からアカウントを作成しましょう。

名前とメールアドレスを入力したら、ボタンをクリック。

パスワードを入力したら、サービス規約に同意してチェックを入れて、「Next」で次へ。

パスワードは、8文字以上50文字未満で、アルファベットの大文字、アルファベットの小文字、数字、記号(!とか)が含まれている必要があるみたい。

YOUR ROLEは、あなたの仕事に合ったものを適当に選んどきましょう。その下は、このアカウントでクライアントのサイトを複数管理するかどうかなので、無料プランで使いたい場合は「NO」を選びましょう。「YES」を選択すると、ビジネスプランになり15日間のみの無料期間が適応されます。(後でプラン変更もできるので間違えてもご安心を。)「ORGANIZATION NAME」は、会社名や屋号を適当に入れておきましょう。

Hotjarを導入したいドメイン名(URLのhttps://以降。例えば、https://makitayuki.com/wpなら、makitayuki.com)を入力します。最後に「Start Using Hotjar」を押せばアカウント作成完了です。

Hotjarのコードをサイトに埋め込む

これをやらないとデータが取れません。管理画面右上の「Settings」ってところから「Sites&Organizations」に入ると「Tracking Code」というボタンがあります。

トラッキングコードをコピーして、あなたのサイトの<head>タグの中に貼り付けよう。</head>の前辺りがいいかも。WordPressを使ってる場合は、直接テーマ内のheader.phpに書き込んでもいいけど、headにコードを追加できるプラグインがあるので紹介しますね。

HotjarをWordPressで使うには

ヘッダーやフッターにソースコードを追加できるプラグインを入れると便利。「SOGO Add Script Header Footer」というプラグインを入れましょう。

プラグイン追加できたら、「設定」 > 「Header Footer Settings」に行くと、Headerの入力欄があるので、Hotjarのトラッキングコードを貼り付けて「変更を保存」しましょう。

ソースコードへの追加が完了したら、タブを「Verify installation」に切り替えて、URLを入力し「Verify installation」ボタンをクリックする。

すると別ウィンドウが表示されて自分のサイトが表示され、上に緑のチェックマークが表示されたらOKです。別ウィンドウは閉じて大丈夫です。

まとめ

最初の設定は少し手間ですが一度導入するとあとは自動的にデータを記録してくれるので、無料から使えますし、ぜひ早めに導入するだけしておいて、WEBサイトの改善に役立ててくださいね。

Related posts

Duplicate Postの設定と使い方 | WordPressの投稿を複製できるプラグイン

line@の友達登録でコンバージョンを計測する

WordPressが5.0から大きく変わる!Gutenberg(グーテンベルク)エディターとは