WordPressの記事をヒートマップツール「ミエルカ」で分析!

WordPressでミエルカヒートマップを使ってみた ブログ

こんにちは、ikuzo(いくぞう)です。

今回は無料で使える「ミエルカヒートマップ」を紹介します。

 

ミエルカヒートマップとは、記事の「熟読されている部分」「離脱された場所」「クリックされた場所」が色の濃淡やパーセンテージによって一目でわかるツールです。

3つのヒートマップが並んでいるところ

私もヒートマップの存在は知っていたものの、これまで特に使うことなくブログを続けてきました。

なぜかというとヒートマップは、

  • いいものは有料だと思っていた
  • 無料のものは機能が少ない
  • 単に面倒だった

というのが主な理由です。

 

しかし最近、ミエルカヒートマップの10日間無料トライアルというものを知り、ブログを始めて2年近くなってから初めてヒートマップを使ってみました。

使ってみた感想は正直、現実逃避したくなりました。

なぜなら、ヒートマップの一つ「スクロールヒートマップ」はユーザーの離脱ポイントが分かるんですが、

記事によっては早期離脱がとても多いという現実を知らされたからです…

 

私のようにヒートマップツールを使ったことがないブロガーさんは、

自分の記事がどのように見られているのか一度把握して、場合によってはリライトしていくのがよろしいかと思います。

ミエルカヒートマップは「無料トライアル」の期間後も、機能はかなり限定されますがそのまま「無料プラン」が使えるので、是非これを読んで使ってみて下さい。

>>ミエルカヒートマップ 無料トライアル

「ミエルカヒートマップ」で分かること

「ミエルカヒートマップ」には3つのヒートマップがあります。

アテンションヒートマップ

ユーザーが静止した(よく読まれている)位置ほど色が濃くなります。

ユーザーが記事のどこに関心があるのかが分かります。

アテンションヒートマップ

スクロールヒートマップ

ユーザーが記事のどこで離脱したのか(どこまで読んだのか)が分かります。

多少PVの多い記事でも、早めに離脱されているのが分かるとショックですね…(´・ω・`)

スクロールヒートマップ

プー太郎
プー太郎

現実を突きつけられるよね…

クリックヒートマップ

ユーザーが記事のどこをクリックしたのかが分かります。

リンクでない場所がクリックされていることも多々あります。

クリックヒートマップ

そしてこの3つを同時に並べて見ることが可能です。

3つのヒートマップが並んでいるところ

プー太郎
プー太郎

アテンションの色が薄くて、離脱の多い場所はかなりヤバいね。

「ミエルカ」の無料アカウント発行&設定

ミエルカヒートマップのトップページで無料アカウントの発行手続きを行います。

個人のブロガーさんなら、会社名には「ブログ名」を入れておけばいいでしょう。

電話番号を入力しても、有料コースへの勧誘の電話は来ませんでしたのでご安心を(それなりのブロガーさんなら来るかも)。

プー太郎
プー太郎

それなりのブロガーさんなら、すでに有料コースを使ってるんじゃない?

「無料アカウントを発行する」を押すとメールでパスワードが送られてくるので、ログイン後「ヒートマップ」→「新規サイト追加」へと進みます。

「ヒートマップ」→「新規サイト追加」へと進む

サイトのドメイン(トップページのURL)を入力して「続行」をクリックします。

サイトのドメインを入力して「続行」を押す

入力したドメイン専用の「ヒートマップ計測用タグ」が発行されるので、これをコピーして「続行」を押します(タグの設置方法はこのあと説明します)。

ヒートマップ計測用のタグをコピーして「続行」を押す

次に「分析したい記事のURL」を一行ずつ入力して「続行」をクリックします(お試し期間&有料プランは複数の記事を登録できます)。

分析したい記事のURLを入力

最後に「管理画面に進む」を押せばミエルカヒートマップの設定は完了です。

ミエルカの「管理画面に進む」をクリック

WordPressへのタグの設置方法

前章でコピーした「ヒートマップ計測用タグ」の設置方法は以下の通りです。

WordPressの「外観」→「テーマエディター」をクリックします。

WordPressの「外観」→「テーマエディター」をクリック

テーマファイル内の「テーマヘッダー」の中にある</head>直前に計測用のタグを貼り付けて「ファイルを更新」を押します。

テーマヘッダーにヒートマップ計測用のタグを貼り付けた

ちなみに私はCocoonを使っているので、Cocoon設定の「アクセス解析・認証」タブの中にある「ヘッド用コード」にタグを貼り付けました。

Cocoonの「アクセス解析・認証」タブのヘッド用コードに計測用コードを貼り付け

もちろんこれで計測はできましたが、</head>直前という指定ができなかったのが少し気になりました。

</head>直前の欄はないですが、フッター(</body>直前)の入力欄はあるので、「ヘッド内の順番はそれほど気にしなくてもいい」という解釈でよろしいかと思います。いかがでしょう、わいひらさん。

フッターの入力欄

私は「ヘッド用コード」にタグを貼りましたが、多少サイトの表示速度が遅くなりました。あまり遅いようであれば「フッター用コード(</body>直前)」にタグを貼った方がいいかもしれません。

いずれかの方法でコードを貼り付けたら、24時間後からデータの確認ができるようになります。

24時間後からヒートマップのデータの確認が可能

ヒートマップの活用方法

「ミエルカヒートマップ」の使い方はかんたんです。

使い方は、サイトに2~3分程度の動画がありますので、そちらをご覧になって下さい。

ここではヒートマップで読みとれる特徴や有効活用方法を紹介します。

プー太郎
プー太郎

ちなみにミエルカは、デバイスごと(モバイル・タブレット・デスクトップ)のデータ確認が可能です。

アテンションヒートマップ

アテンションヒートマップは、ユーザーがじっくり読んだ場所ほど色が濃くなります。

熟読率 高(色が濃い)

「熟読率 高」のアテンションヒートマップ

色の濃い部分はユーザーがよく読んでいるところ(=ユーザーの興味がある部分)なので、記事をさらに充実させるために「より詳しく書けないか」などを検討します。
または内容が理解しにくく、ユーザーが「理解するのに時間がかかっている」という可能性もあります。

熟読率 低(色が薄い)

「熟読率 高」のアテンションヒートマップ

色の薄い部分は

  • ユーザーの興味のないところ
  • 読む必要がないと判断されたところ
  • さくっと読めるので通過に時間がかからなかったところ

などが考えられます。

スクロールヒートマップ

スクロールヒートマップ

スクロールヒートマップは、記事の中で改善できそうなポイントが分かります。他に比べて数値の下がり幅が大きいエリアは、それだけ改善できる余地が多いということです。たとえば記事の冒頭で離脱が多い場合には、アイキャッチ画像やリード文を変えてみるといいかもしれません。

プー太郎
プー太郎

今回調べてみたら、アイキャッチのすぐ下で4割離脱という記事もありました(ショック…)。

クリックヒートマップ

クリックヒートマップ

クリックヒートマップはクリックされやすいリンクと、そうでないリンクとのが区別ができます。また、誤クリックは「何か動きがあるのでは?」というユーザーの期待の表れなので、そこにリンクを貼ることができないかを検討してみるといいでしょう。

「ミエルカ」を使って起きた変化

私の場合、ミエルカのタグを設置した期間は次のような現象が起きました。

ページの読み込み時間が長くなった

ヒートマップのスクリプト処理に時間がかかるようで、タグ設置後はページの読み込み時間が多少長くなりました。

Googleのページスピードインサイトで計測したものです。

ヒートマップのタグ設置前後のスピードテストの結果

アナリティクスのユーザー数が減少

「ミエルカ」を使ったらアナリティクスのユーザー数が減少した

タグの設置中はアナリティクスのユーザー数がいつもより減少するという現象が起きました(しゃれではありません)。

 

以上の2つから推測したことは、ヒートマップの計測タグを貼ったことにより、

ページの表示速度が落ちて、表示前に離脱した方が増えたのではないかということです。

もし、このような現象が起きたら、</body>直前にタグを貼るのがいいと思います。

“<body>~</body>間にタグを設置することも可能ですが、計測が多少不正確になる可能性があります”とミエルカの注意事項に書いてありますが、

</body>直前にタグを貼り付けたところ、速度の低下はほぼ見られませんでした。

Cocoonのフッター用コードに、ヒートマップ計測タグを貼り付けた▲Cocoonの場合はここ

最後に

ということで今回は「ミエルカヒートマップ」を紹介してきました。

ミエルカの有料プランは一番安いものでも10,780円/月なので、残念ながら弱小ブロガーがおいそれと使えるツールではありません(つд`)

ミエルカヒートマップ利用料金一覧ミエルカ 料金プラン

なので、とりあえず10日間の無料トライアル(すべての機能が使えます!)でご自身のサイトを思う存分分析してみてはいかがでしょうか。

プー太郎
プー太郎

10日間の無料トライアル後は、自動的に「無料プラン」へ移行するよ。

そしていつかいっぱい稼げるようになったら、その時は有料プランに申し込みましょう!(と、自分に言ってます。)

>>ミエルカヒートマップ 無料トライアル

コメント