運用最適化の秘密兵器：ヒートマップの威力を再認識しましょう！ （優れた）

この 2 部構成の記事では、ヒートマップ分析が今日どのように革命的であるか、どのように適用できるか、そして (例を挙げて) ヒートマップ分析によってどのような興味深い結果が得られるかについて説明します。

過去には、ヒートマップを実際に使用する人はほとんどいませんでした。ヒートマップは非常に直感的に見えますが、それほど使いやすいものではありません。以前は、データの表示が正確でないことが大きな原因でした。現在、ヒートマップ分析の対象であるWebページやAPP画面でのインタラクションはますます複雑になっており、ヒートマップを描く技術的な難しさは以前よりもはるかに高くなっています。このため、ヒート マップは「次のページの概要」のようなレポートほど有用ではないと、私は長い間感じていました。

幸いなことに、今日のデータツールは以前とは異なります。今日のヒートマップは、単に「ご満足いただけることを保証する」というだけではなく、これまでほとんど解決できなかったいくつかの問題を解決するのに役立つ重要かつ実用的なデータ手法として機能し始めており、それによってインターネット運用を新たなレベルに引き上げるのに役立っています。

ヒートマップに関連する主な指標

まず、ヒートマップはツールではなくシステムであることを明確にする必要があります。ヒートマップは、さまざまな機能を実行する複数のツールの有機的な集合体です。ヒートマップは、人々がどこをより多く、またはより少なくクリックしているかを確認するための単なるツールだと考えているなら、それは過小評価です。

ヒートマップはシステムであるため、関連する主要な指標が必ず存在します。知っているものもあれば、知らないものもあるかもしれません。

最初のタイプの主要指標は、ユーザーのクリック動作を示すために使用されます。

ただし、人々のクリック動作は非常にランダムであるため、クリックはリンク クリック、リンク以外のインタラクション クリック、空白クリックの 3 つのカテゴリに分類できます。リンク クリックとは、簡単に言えば、実際の http リンクをクリックすることです。非リンク インタラクティブ クリックとは、 JavaScriptインタラクションや Flash インタラクションなど、クリックはできるものの http リンクではないクリックのことです。空白クリックとは、リンクやインタラクションがない場所で発生するクリック、つまり「白い点をクリックする」クリックを指します。

当社のウェブサイト分析で一般的に使用されるページビューとは異なり、ヒートマップで測定されるクリック動作の指標はクリック数です。ただし、一部のツールではマウスのクリックを直接監視しないため、ヒートマップに表示されるクリック数は実際のクリック数ではなく、リンクをクリックした後に開かれた新しいページのページビュー数になります。私たちが最もよく使用するツールであるGoogleアナリティクスは、この方法でヒートマップを描画します。そのため、このツールを使用したヒートマップは非常に不正確になります。

優れたヒートマップ ツールは、実際のクリック、つまりリンクのクリックだけでなく、リンク以外のインタラクションのクリックや空白のクリックも測定する必要があります。また、クリック後に開かれた新しいページのページビュー数をクリック数の代わりとして使用することはできません。

2番目の重要な指標は、ページ上での人々の閲覧行動です。

通常、Web ページは複数の画面を占有するため (つまり、Web ページ全体を 1 つのモニター画面に表示できない)、コンテンツ全体を表示するには Web ページを下にスクロールする必要があります。ヒートマップ システムは、閲覧行動の重要な部分である、ユーザーがどのようにページをスクロールするかを記録する必要があります。さらに、ヒートマップ システムは、Web ページのどの部分が画面上に長く表示されているかも表示するため、ページのどの部分がより注意深く閲覧されているかを把握するのに役立ちます。

ユーザーがページをどれだけスクロールするかを測定する指標は「ブラウズ ライン」と呼ばれ、ページのどの部分が画面上に長く表示されるかを測定する指標はディスプレイ ヒートと呼ばれます。次の図に示すように:

上の図では、上から下に向かってパーセンテージの数字が小さくなっていることがわかります。これらの数値は、その場所までスクロールした訪問者の割合を示します。たとえば、上の図の 57% の線 (実線と破線) は、訪問者の 57% が図の線で示された位置までページをスクロールしたことを意味します。

同様に、上の画像では、ページ全体が青、緑、赤、黄色のさまざまな色の帯で覆われていることにも気づくでしょう。これは、ページの対応する位置が画面上にどのくらい長く留まるかを示しています。色が暖色系（赤、オレンジ、黄色）であるほど、保持時間が長くなり、人々がこの部分をより長い時間見ていることを意味します。色が寒色系（緑、青、または無色）であるほど、対応する部分が画面上に留まる時間が短くなり、人々がこの部分を見る時間が短くなります。これが、主要な指標の 2 番目のカテゴリである「視聴回数と滞在時間」です。

主要指標の3番目のカテゴリーは最初の2つのカテゴリーとは異なる。

最初の 2 つの指標カテゴリは、人々の能動的な行動、つまり特定の目標を達成するために実行される行動を測定し、3 番目の指標カテゴリは人々の間接的な行動を測定します。言うのは難しそうですが、理解するのは難しくありません。このタイプの動作は、私たちがよく使用するマウスを動かす（クリックしない）動作です。マウスを動かす目的はクリックすることですが、動き自体は比較的ランダムです。ある点をクリックするために、人によって移動の軌跡は必ず異なり、それぞれの動きも異なります。マウスの動きを測定することは最も重要なことではありませんが、ページ上のユーザーの動作が「実際の人々」の動作であるかどうかを確認したい場合など、重要な場合もあります。ほとんどのヒートマップ ツールには、マウスの動きを監視する機能が含まれていない可能性があることに注意してください。私にとって、この機能はあまり必要ないので、この記事では詳しく紹介しません。

上記の主要な指標を理解することは難しくなく、非常に良いスタートとなります。次に、ヒートマップをどのように使用すべきか、そしてヒートマップが特定の問題をどのように解決できるかを見てみましょう。

ランディングページのジレンマ

クラスメートが私に、ランディング ページで注目すべき最も重要な指標は何かと尋ねました。以前なら、「直帰率」を見ればよいと答えていましたが、今ではそれに完全には同意できません。直帰率を見ることは何も悪いことではありませんが、直帰率は完全に信頼できるものではありません。

その理由は、多くのページの技術設定が変更され、これらのページには HTML 以外のインタラクションが多数あるためです。たとえば、クリックするとカスタマー サービス ウィンドウがポップアップ表示されたり、他の Web サイト (Taobao や JD.com など) にジャンプしたり、単に電話を取って電話をかけたり、訪問者が最初から最後までページを長時間注意深く読んだもののそれ以上のアクションをとらなかったり、ページ コンテンツが訪問者の心を打ったりします。これらの状況はすべて、直帰率を「異常に高く」し、ランディング ページが非常に悪いという「錯覚」を引き起こします。

さらに、多くのウェブサイトはシングルページ ウェブサイトです。これらのウェブサイトは単なるランディング ページであり、すべてのビジネス要求はこのランディング ページで完了します。この場合、直帰率は 95% を超えると予想されます。 (100% ではない理由は、ページがユーザーによって更新される可能性があり、ページの更新は Web サイト分析ツールにとって目立った問題ではなくなったためです)。たとえば、以下のページでは、クリック可能なすべての領域で会話用の QQ が開きます。

上記のページは、Web サイトのデザイナーがユーザーに他のページにアクセスしてほしくないため、典型的なシングルページ Web サイトです。これらのウェブサイト上のすべてのリンクは、「Enterprise QQ」や「Leyu」などの顧客サービス システムにリンクされています。したがって、このタイプの Web サイトの直帰率を調査することはあまり意味がありません。これにより、ランディング ページの最適化はジレンマに陥ります。つまり、従来の監視方法を使用してユーザーの行動を説明することは非常に困難です (一般的なツールではユーザーの行動を検出できないため)。そのため、最適化の根拠を得ることは困難です。

ランディングページを最適化するのにヒートマップより優れたツールはありません

直帰率だけに頼ることはできないので、これらのページが期待に応え、ユーザーを満足させているかどうかをどのように知ることができるでしょうか?これには、ヒート マップの使用と、より完全なヒート マップ ツールが必要です。たとえば、すべてのマウス クリック動作を監視できるツール、つまり、前のセクションで最初の種類の主要指標について説明したように、リンク クリック、非リンク クリック、空白クリックを監視できるヒート マップ ツールが必要です。さらに、ヒートマップを使用して人々の注目がどのように変化するかを理解して、より多くのインタラクション データがなくても、ユーザーがページ上のどのコンテンツに興味を持っているかを判断する必要もあります。

ヒートマップを使用してランディング ページを最適化する私のアプローチは、通常次のようになります。

まず、ランディング ページが長すぎないかどうかを確認します。一般的に、ページの長さについては個人的な好みや誤解があります。多くの人は、ページの長さには決まりがあると考えています。ページの長さは、長すぎても（訪問者が退屈してしまう）、短すぎても（もっと見たいと感じて満足できない）いけません。私はこれに全く同意しません。雑誌と同じように、10 ページが適切でしょうか、それとも 100 ページが適切でしょうか?これに関しては本当にルールはありません。雑誌（Playboy、FHM など）がお好みなら、100 ページでも少なすぎることはないかもしれませんが、Chaoyang Masses 誌の場合は、おそらくそれほど多くのページは必要ないでしょう。

実際、多くの AB テストでは、ページの長さはビジネス目標の達成に一定の影響を与えないという法則が示されています。したがって、それぞれのケースを個別に分析する必要があります。ページの長さを分析するには、ヒートマップ ツール、特に前述した「ブラウズ ライン」を使用する必要があります (前のセクションの 2 番目の種類の主要指標を参照)。

閲覧ラインの使い方は非常に簡単です。ページの長さが 10 画面以上あるのに、閲覧ラインで 4 画面目に残っている人が 5% しかいないと表示された場合は、そのページが本当にそれほど長い価値があるのか​​、コンテンツが読者を引き付けるほど魅力的であるのかを調べる必要があります。

次に、ユーザーがクリックすべきでない場所をクリックしたり、クリックすべき場所をクリックしていないかどうかを確認します。これは理解するのが簡単なので、これ以上の説明は必要ありません。それでも、ほぼすべてのランディング ページはここで間違いを犯します。ヒートマップを見ると、ユーザーのクリックパターンが想像を超えることが多いことがわかります。こうした予期しない動作は、実は非常に価値があります。私たちは、これらを利用してユーザーの意図を判断し、推測されたユーザーの意図に基づいて現在のランディング ページを変更します。

最後に、修正したランディングページをすぐに公開するのではなく、ABテストを実施します。2つのランディングページのCTRの比較だけでなく、2つのページのヒートマップの違いも引き続き確認します。これは、前のステップで行ったユーザーの意図の推測を確認するためです。

この方法は、私にとって何度も効果がありました。データ モデリングやビッグ データ マイニングは必要ありません。非常にシンプルで直接的ですが、非常に効果的です。

信じられませんか？名前と姓に関する実際のケースを見てみましょう。

ランディングページ ヒートマップ分析の例

これは、中国で最も有名なエンタープライズ コミュニケーション ソリューション企業の 1 つである「Xintongwangying」の新製品ページです。

さて、このページの直帰率はわずか 52.95% と非常に良好です。まだ最適化する必要があると思いますか?

このような商用ランディング ページの場合、ほぼすべてのトラフィックは Baidu SEMから来ています。クリックの価格はご存じのとおりです。53% の直帰率は良好ですが、たとえ 1 パーセント ポイントでも削減できれば、それはまだ実際のお金になります。さらに、現在、百度には競争力のある広告スペースがわずかしか残っておらず、入札はさらに熾烈になっています。

分析していきますので、このページの関連データをお渡しします。

• 直帰率: 52.95%
• 平均滞在時間：1分40秒
• 撤退率は36.05%です。

このページをどのように改善できると思いますか?

あなたはこう言うでしょう。「ソン先生、これは分析できません。データが広すぎます。」

ほとんどの場合、私たちはこのような少しのデータだけが記載されたランディング ページに直面します。最適化しますか?どこから始めればいいのか分からない感じです。ほとんどの場合、ランディング ページの統計が上記と似ている場合、ページのパフォーマンスは全体的に良好であるため、ページが特に最適化されていないことを意味します。

しかし、ヒートマップを見ると、あなたの考えは完全に変わります。

下のヒートマップは、PtMind が提供する PtEngine モニタリング ツールのヒートマップ機能を使用しました。これは私が見つけた中で最も実用的で使いやすいヒートマップ ツールであり、このツールは優れた位置付けにあります。過去にヒートマップをほとんど使用しなかった重要な理由は、ヒートマップ データがあまりにも不正確だったためです。現在、このツールを使用すると、この問題をまったく心配する必要がありません。

上記ページのヒートマップは下図の通りです。同様に、下の小さい画像をクリックすると、大きい画像が表示されます。

ヒート マップは多くのスロットを提供します。ヒート マップから得られる非常に重要な情報は次のとおりです。

1. 最初の画面にある 5 つの「ケーキ」とその下のテキストは、かなりの数のクリックを獲得しました。残念ながら、これらの 5 つの円にはリンクがないため、クリックできません。 ——クリックできない。ランディングページの最初の画面の目立つ位置に置くのは、意図的にユーザーエクスペリエンスを難しくしている。
2. 円グラフの下の 2 つの大きなバナー画像は、1 番目と 2 番目の画面で非常に大きなスペースを占めています。残念ながら、そこをクリックする人はほとんどいません。さらに、右側の注目度維持ヒートマップを見ると、この場所でのユーザー維持状況も非常に悪いことがわかります。 ——では、なぜこの横幅いっぱいの写真２枚をこんないい位置に置いたのでしょうか？
3. 上部のナビゲーションには多くのクリックが必要です。問題は、このページが元々ナビゲーション遷移ページとして使用するように設計されていなかったことです。
4. 最後の 2 つの画面では突然クリック数が急増し、閲覧維持率もかなり良好で、これらのコンテンツがユーザーにとって大きな関心事であったことがわかります。残念ながら、ここまでスクロールするユーザーは 60% 未満です。

これは、53% の直帰率からわかる情報ではありません。しかし、一つ一つが重要です！

上記の 4 つの情報を読んだ後、このページを調整する方法がわかったと思います。もちろん、調整後はABテストを実施する必要があります。 AB テストの結果は予想通りでした。直帰率は 53% から 37.5% に低下しました。有料検索に依存している企業にとって、この大きな変化は競合他社に対して強力な優位性を確立するのに十分です。

予想外のプラス効果：イベント追跡の簡素化

上記の事例を読んだ後、注意深い読者は間違いなくさらに興味深い何かを見つけるでしょう。ヒートマップが、実際にクリック可能な場所かどうかに関係なく、すべてのマウスクリックを忠実に記録できるとしたら、これまで記録するのが非常に困難だったいくつかのインタラクションが簡単になるのではないでしょうか。

記録が難しいインタラクションには、前述した JavaScript、Flash、ビデオ プレーヤー プラグイン、カスタマー サービス プラグインなどが含まれます。以前は、これらのインタラクティブな要素のクリックを記録するには、イベント トラッキング パッチを使用する必要がありました。イベント トラッキングは優れた機能ですが、導入が難しく (現在では誰もがイベント トラッキングの導入を「トラッキング」と呼んでいます)、エラーが発生しやすいという大きな欠点があります。

高度なヒートマップ機能の登場は、実際には、それほど強力なイベント追跡機能を必要としない人にとって大きな助けとなります。たとえば、JavaScript のインタラクションの数を確認したいだけです。ヒート マップを使用すると、ポイントを埋め込むことなく直接確認できるため、多くの手間が省けます。

ヒートマップが十分に正確で詳細であり、今日の分析ツールが HTML インタラクションの検出だけではなくなった場合 (DOM イベントなども検出できます)、完全なイベント トラッキングの機能を拡張することもできます。これは、実際には、いわゆる「非埋設ポイント」イベント監視のソースです。現在、一部の中国の工具サプライヤーは、埋め込みポイントのない技術を「開拓した」と強調していますが、このソリューションは実際には 3 ～ 4 年前に登場しました。現在、多くのツールベンダーが対応する機能を提供しています。

下の図では、私のブログの「注目」列にある上下スクロール ボタンは HTML インタラクティブではなく、JavaScript インタラクティブでもありません。しかし、監視ツールを使用すると、クリックされた回数を簡単かつ正確に表示できます。

したがって、この機能は、埋め込みなしでもほぼ瞬時に「イベント トラッキング」機能になります。追加の設定を行う必要はありません。ツールは、HTML であるかどうかに関係なく、すべてのインタラクションをすでに記録しています。これは今までとは全く違う体験であり、ツールがこんなにも賢くなったという強い快感を覚えるでしょう。次の図に示すように:

実際、ヒート マップを正確にするには、埋め込みポイントなしで収集されたデータが正確になることがわかりました。ノーエンベッディングは本来的に正確ではないので、ノーエンベッディングがうまくできているかどうかを確認したい場合は、このツールのヒートマップの精度（値や配置ポイントの精度）を見ればほぼ検証できます。

コンテンツ分析もヒートマップに大きく依存している

ランディング ページがヒートマップに大きく依存している場合、コンテンツ分析にはヒートマップがさらに必要になります。コンテンツ分析はデータドリブンな運用において難しいポイントですが、特にSEOの分野では非常に核心的なポイントでもあります。

コンテンツ分析の難しいところは、ユーザーがコンテンツにアクセスしたかどうかはわかるものの、コンテンツがユーザーにどのような影響を与えたかは判断できないことです。ユーザーがコンテンツにアクセス (開く) することと、コンテンツを見ることは、実際には異なることです。実際に何人のユーザーがあなたのコンテンツを読んだのか、どの程度読んだのか、どこで放棄したのかを把握する方法が必要です。コンテンツ分析はランディング ページ分析と非常によく似ており、直帰率を使用して判断するのは実際には非常に不正確です。読むのにリンクをクリックする必要がないかもしれませんが、訪問者の心はコンテンツによって完全に影響される可能性があるからです。この場合、多くの直帰は「疑似直帰」である可能性があります。

以下の私のウェブサイトの例では、直帰率を代理として使用するのは不公平であることは明らかです。私は記事を書くときに SEO をあまり考慮しないので（特に近年の記事）、内部リンクを追加するのが面倒です。したがって、これらの記事 (赤いボックス内の 2 つの記事など) で示される直帰率は、非常に驚​​くべきものであることがよくあります。しかし、直帰率が高いということは、その記事が読者に「嫌われている」ということなのでしょうか?

これら 2 つの赤枠の記事のうち最初の記事 (「/interne」にある記事) は、私の記事の中で最も人気のある記事の 1 つであり、非常に多くの再投稿を受けています。しかし、この記事の直帰率は81%と最も高くなっています。同時に、この記事の滞在時間は実はかなり長く、6 分半近くになっていることがわかります。これら 2 つの矛盾する指標のうち、滞在時間の方が明らかに信頼できます。

問題を見つけるのは難しくありません。この記事の特徴の 1 つは、テキスト全体にリンクがないことであり、クリックする必要はなく、そのまま読むことができます。これは SEO には悪影響で、直帰率が上がるのは明らかですが、記事の滞在時間は長く、人々が記事を読むのにどれだけ努力を払っているかがわかります。それは知っておいてよかったのですが、その記事がどれだけ広く読まれたのか、もっと根本的には、何人の人が読んだのかということも知りたいです。表内の直帰率も滞在時間も、この質問に答えるのに役立ちません。従来のヒートマップもこれには役立ちません。

新しいヒートマップ機能、特に画面滞在時間と既読ラインにより、人々が実際に記事をどの程度「気に入った」かなど、以前は見えなかった多くのことがわかります。

上の画像は基本的に記事全体の閲覧状況を示しています。

上のヒートマップから多くのことがわかります。多くの人が私の記事を心から気に入ってくれているのです。こんなに長い記事でも、40%近くの人が最後まで読んでくれます。さらに、画面上の主流の状況から判断すると、効果的なコンテンツは常により長い期間保持されます。では、81% の直帰率はどうでしょうか?ここでは直帰率はもはや重要ではありません。重要なのはコンテンツが消費されていることです。

読者に認知されているこのような記事は、記事内の適切な内部リンク（私は怠けて追加しませんでした）と相まって、検索エンジンの支持を簡単に得ることができます。

このようなケースは非常に一般的であり、ほぼすべてのコンテンツ分析にヒートマップを使用する必要があります。

さて、前半はこれで終わりです。後半では、ヒートマップがコンバージョンの最適化にどのように役立つか、共通のテンプレートを共有しているが非常に数が多いページのクラスター分析をヒートマップがどのように解決するか、ヒートマップが新しいウェブサイトのページテクノロジーにどのように適応するか、アプリでヒートマップを使用する方法、セグメンテーションとヒートマップを組み合わせてさらに優れた分析を作成する方法など、いくつかの非常に重要なトピックについても説明します。

モバイルアプリケーション製品プロモーションサービス： APPプロモーションサービス清瓜メディア情報フロー

この記事は@Sidney Songによって書かれました （APP Top Promotion）が編集・発行しました。転載の際は著者情報と出典を明記してください。