ヒートマップ紹介

この記事では、Ptengineのヒートマップ技術の特徴や、基本仕様についてご紹介いたします。

ヒートマップとは？ #

ヒートマップは、サイト訪問者のクリックやスクロール、滞在時間などの閲覧行動をサーモグラフィーや数値を用いて可視化する、Ptengineで最も評価をいただく機能の1つです。

• 1ページのどこが注目されたり、無視されているのか
• 2コンバージョンを阻害/促進している要因は何か
• 3ユーザーはサイトに何を求めているのか
• 4ユーザーの潜在的なニーズは何か

このように、ヒートマップを通じてビジネス推進に関わる深い洞察を得ることを可能にします。

また、Ptengineのヒートマップは、独自の計算処理アルゴリズムとダイナミックな描画仕様により、訪問者の閲覧行動を正確に描写します。そのため、幅広いサイトの仕様に対応でき、さまざまなニーズに合わせて精度の高いインサイトを獲得することができます。

独自仕様“ダイナミックヒートマップ” #

ダイナミックヒートマップは、静的にページを取得してヒートマップを描写する、一般的なスクリーンショット型のヒートマップよりも高度な描写技術と多くのデータ量を必要としますが、訪問者のクリックやタップといった閲覧行動をより高い精度で描写でき、深い顧客理解を可能にするPtengine独自のヒートマップです。

Ptengineは開発当初よりダイナミックヒートマップの技術を採用しており、ハンバーガーメニューやメガメニュー、スライド、アコーディオン型の動的なコンテンツ、レスポンシブサイトはもちろん、先進的でインタラクティブなデザインのサイトや、ユーザーフレンドリーなSPAといったサイトなどもヒートマップで計測することができます。

今やほとんどのウェブページでは動的な要素が使用されているため、ダイナミックヒートマップは、ウェブサイトの最適化にとって不可欠な技術となっています。

ダイナミックヒートマップのメリット

• 1正確な描写
  ダイナミックヒートマップは、訪問者のクリックやタップがあった座標にデータを描画するのではなく、ページのHTML構造を捉えてヒートマップを描画します。
  これにより、クリックやタップなどの操作、またはレスポンシブデザインによってHTML構造が変化した場合、ヒートマップの色づきやクリックデータもHTML構造に従って変化し、ユーザー行動を直感的かつ正確に理解することができます（例：ポップアップの表示前と後で描写が変化する）
  
• 2動的要素を分析可能
  サイトのグローバルメニューやスライド式バナー、折りたたみ式のコンテンツなど、閲覧に操作を要する動的要素は、訪問者の興味関心が現れやすい場所です。ダイナミックヒートマップではこのような隠れた場所に表示されているコンテンツのヒートマップも簡単に確認できます。詳しくはこちらの記事をご確認ください。
  
• 3動的な特殊ページも分析可能
  ダイナミックヒートマップは、動的にヒートマップを描写するため、SPA (Single Page Application) やPWA (Progressive Web Apps) 、スクロールフェードイン効果を用いたページなど、最新の技術スタックとの互換性が高いのも特徴です。
  互換性のあるページ技術：
  ・ SPAページ (React、Vueなど実績多数)
  ・ PWAページ
  ・ レスポンシブページ
  ・ Lazy Load (遅延読み込み)やスクロールをトリガーに要素が表示されるような長いページ
  ・ モダンなデザイン、パララックススクロール、アニメーションエフェクトなど
  ・ 会員限定やログインが必要なページ
  ・ アクセス制限のあるページ (IP制限、イントラネット、ステージング環境)
  基本的には、JSコードが機能すればほとんどのページ/サイト制作ツール(WordPress、Wix、ペライチ、Hubspotなど)またはCMSに対応可能です。

“ウェブビュー”による快適な閲覧 #

ウェブビューとは、ヒートマップをウェブコンテンツとして閲覧するための仕様です。Ptengineのヒートマップはウェブビューを採用することで、多様なページ構成に柔軟に対応し、Ptengine Experienceを筆頭とした様々なモジュールとの連携および機能の拡張を実現しています。

※2023/5/24以前に作成されたプロジェクトでは、管理画面内に組み込まれた旧式のヒートマップを提供しています。今後は順次、管理画面ヒートマップの提供を終了させていただく予定です。ご不明な点やご心配な点がございましたら、ぜひお気軽にお問い合わせください。

Note：ウェブビューヒートマップを快適に利用していただくため、Ptengine拡張機能をご利用ください。

Ptengineヒートマップの各種機能 #

Ptengineのヒートマップには、クリックヒートマップ・アテンションヒートマップ・ページ分析・比較分析・シェア機能など豊富な機能があります。

各機能の詳細は、リンク先をご覧ください。

・クリックヒートマップ：クリックやタップを直感的に確認

・アテンションヒートマップ：訪問者が注視/無視しているコンテンツを確認

・スクロール到達率：ページのどこまで閲覧されたかを確認

・ページ分析：要素ごとのクリック数を数字で確認

・比較分析：複数のヒートマップを一画面に並べて比較分析

・ページ保存：過去バージョンのページデザインを保存しておくことで、ページ変更前後のヒートマップを比較

・シェア：チームでヒートマップを確認

・コンバージョン貢献度：要素ごとのクリック関連詳細データ、コンバージョン貢献度を確認（β版）

ヒートマップの推奨環境 #

ウェブビューヒートマップは、ほとんどのページで動作しますが（推奨ブラウザ：Chrome、Microsoft Edge、Firefox）、クロームプラグインをインストールすることで互換性を向上させることができます。詳しくはこちらをご覧ください。

ダイナミックヒートマップが機能しない例 #

ダイナミックヒートマップはページ内に要素がないと判断した場合、ヒートマップを描写できません。要素を把握することが難しいケースは下記のような例になりますが、この場合、クリックヒートマップではダイナミック描写の代替として、クリックが発生した座標をもとにヒートマップを描画します（この時、ページ分析ヒートマップでは、要素ごとのクリック数値を見ることができません）。

• 1コンテンツが非常に活発に更新される場合
• 2クリックなどのインタラクション無しで動的に要素が生成される場合
• 3同じページの中で同じID名を重複して利用した場合
  ダイナミックヒートマップは、HTMLのbody内にあるIDを用いて要素を正確に特定しています。IDは原則として、同一ページ内で同じID名を重複して利用することはできませんが、万が一データは同じページの中で同じID名が重複して利用されいた場合、どちらかに集約されてしまいます。