Compass media

Webサイトやブログのメディア運営のコツをコツコツと発信

はてなブログ Pro にヒートマップ(User Heat)を導入してみた

"はてなブログにヒートマップ(User Heat)を導入してみた"

ブログやメディア運営をしていると、サイトを訪れた後の CVR などを改善していく必要があります。

その場合、ヒートマップが強力な分析ツールになります。

訪問者がどこをクリックしたか、どこまでスクロールしたかがグラフィカルに解析結果を表示できます。

今回は、無料で月間30万PVまで使える User Heat をはてなブログに導入してみたので、その手順を紹介します。

アカウント登録

"アカウント登録"

User Heat 公式ページへアクセス

公式ページ(こちら)へアクセスし、解析対象のURLを入力する

User Heat 公式ページへアクセス

メアド、パスワードを入力

メアド、パスワードを入力する。

メアド、パスワードを入力

登録メアドにメールアドレス認証用のメールが送られてくるので URL をクリックしてメールアドレス認証を行う。

メールアドレス認証

登録完了。

User Heat 解析タグの設置手順

"解析タグの設置手順"

解析タグ設置画面へ遷移

"解析タグ設置画面へ遷移" 登録完了後のログイン画面で「解析タグの設置」をクリック

埋め込み用解析タグの入手

埋め込み用解析タグスクリプトの入手

はてなブログ Pro への設定

[設定] → [詳細設定] → [headに要素を追加] に解析用タグをコピペする

正しく設定されているか確認する

「解析結果の一覧」タブで「データを集計中です。」と表示されれば正しく設置されています。

正しく設定されているか確認する

アクセスが蓄積されるまで暫し待つ。

User Heat ではてなブログ Pro の解析結果を確認する

"User Heat ではてなブログ Pro の解析結果を確認する"

アクセスが溜まってくると、ヒートマップ解析結果が表示することができるようになり、サイトアクセス分析を行うことができます。

  • マウス軌跡解析
  • クリック解析
  • 熟読エリア
  • 終了エリア
  • 離脱エリア

User Heat 解析の使い方

User Heat にログインし、解析したいページの「マウス」をクリックします。 ""

User Heat ヒートマップのクリック解析

User Heat でのクリック解析をヒートマップで見れます。

"User Heat ヒートマップのクリック解析"

User Heat でスマホヒートマップ解析

PC とスマホではクリックする箇所もスクロールの仕方も全然違います。

右上の [ヒートマップ設定] をクリックし [スマホ] を選択、ヒートマップを更新しましょう。 "User Heat でスマホヒートマップ解析"

スマホ画面におけるクリックした箇所やスクロールのしかたがわかります。

"スマホ画面におけるクリックした箇所やスクロールのしかたがわかります。"

User Heat でクリックヒートマップ解析

クリックした箇所を点で表示できます。

"User Heat でクリックヒートマップ解析"

User Heat で熟読エリアのヒートマップ解析

ユーザが読んだ場所の時間に応じて色がついていきます。ヒートマップで最も有名な解析機能ですね。

"" ""

下に行くほど青くなってほとんど読まれていないことがわかります。

ファーストビューでもうそれ以上読まないことがほとんどであることを視覚的に理解することができます。

User Heat で終了エリアのヒートマップ解析

下に行くほど漏斗型に細くなっています。これもヒートマップの代表的な機能ですね。

"User Heat で終了エリアのヒートマップ解析"

User Heat で離脱エリアのヒートマップ解析

記事作成にあたっては「いかに離脱させず目的の箇所まで読ませるか」という Web ライティングが重要です。

そして、実際の離脱ポイントを視覚化し改善していくことが良いサイト作りに重要かと。

"User Heat で離脱エリアのヒートマップ解析"