インタラクティブ要素、非インタラクティブ要素

この記事では、インタラクティブモードおよびインタラクティブ要素の表示・非表示について詳細をご説明します。

インタラクティブ要素とは #

ユーザーがクリックなどの操作をすることができる要素のことを、インタラクティブ要素と呼びます。Ptengineのヒートマップでは、効果的かつ効率的な分析をサポートするために、デフォルト状態では、インタラクティブ要素のみを表示し、その他の要素は隠しています。

インタラクティブ要素の定義

インタラクティブ要素は、HTMLタグの属性で識別しています。下記の要素は、インタラクティブ要素として判断され、その他は非インタラクティブ要素（隠し要素）として識別されます。

"a" "input" "select" "embed" "object" "textarea" "button"

※非インタラクティブ要素の例：ページフレームやコンテンツコンテナなど

あるはずのクリックデータがない #

Ptengineヒートマップでは、デフォルトで非インタラクティブ要素を非表示としていますが、フロントエンドではHTMLの代わりにjsを使用して要素のインタラクションを構築することがあるため、本来はインタラクティブ要素として識別されるべき要素が非インタラクティブ要素として識別されてしまうことがあります。

そのため、クリックデータが見られなかったり、少ないと感じたりした場合は、ヒートマップツールバーの「表示」アイコンから非インタラクティブ要素（隠し要素）にチェックを入れてみてください。

また、インタラクティブ要素をヒートマップで確認する方法は、大きく2つあります。

インタラクティブモードで確認 #

クリックヒートマップとアテンションヒートマップは、ページ上でクリック操作などを行うことができません。そのため、アコーディオンメニューの中身やログインなど操作を要するページをヒートマップで確認したい場合は、インタラクティブモード機能をご利用ください。

画面右上のインタラクティブアイコンをクリックし、ページ上の要素をクリックしたり切り替えたりした後、インタラクティブモードをオフにすると、ヒートマップ画面に戻り、操作内容に応じてページコンテンツが更新されます。

通常、インタラクティブモードを閉じたらページコンテンツが更新されますが、そうでない場合は、インタラクティブモードの右側にある3つの点のアイコンをクリックし、ヒートマップの更新をクリックしてください）

具体的な操作手順はログイン必須ページのヒートマップを見る方法をご覧ください。

Note：インタラクティブモードは、クリックに反応する要素に対してのみ機能し、マウスオーバーには対応しておりません。マウスオーバー時に要素の状態が変化し、マウスオーバーを外すと元の状態に戻る場合は、ページ分析ヒートマップをご利用ください。

ページ分析ヒートマップで確認 #

ページ分析ヒートマップでは、実際のウェブページと同じように、クリックやマウスオーバーの操作に呼応しクリックデータを確認できるので、インタラクティブモードを利用する必要はありません。

ただし、各要素のHTML属性により、デフォルト状態では、クリックを確認したい要素が隠されている場合があります。

クリックがありそうな要素のクリックデータが見られなかったり、少ないと感じたりする場合は、ヒートマップツールバーの「表示」アイコンから非インタラクティブ要素にチェックを入れてみてください。

以下では、インタラクティブ要素またはインタラクティブなページの具体的なヒートマップ確認方法をご紹介します。

Note：前提として、クリックデータが見つからない場合は、非インタラクティブ要素（隠し要素）を有効にすることを忘れないでください。

アコーディオンメニュー

サイトメニューなどによく利用される折りたたみ式のアコーディオンコンテンツは、ページ分析ヒートマップでの確認をおすすめします。ページ分析ヒートマップでは、実際のウェブページを見ているようにページのインタラクションに合わせてコンテンツが自動的に変化し、詳細なデータも確認できます。

アコーディオンメニューをクリックやアテンションヒートマップで確認したい場合は、インタラクティブモードをご利用ください。ツールバーのインタラクティブ機能をクリックし、実際にページ操作をしてコンテンツの状態を変更し、インタラクティブモードを閉じます。

※クリック・アテンションヒートマップは、クリックで状態を維持できる要素にのみ適用され、マウスオーバーには適用されません。マウスオーバーのみに反応するコンテンツを確認したい場合は、ページ分析ヒートマップなどでデータを確認することをおすすめします。

スライド・カルーセル

自動スライドバナーやカルーセルメニューもヒートマップで確認可能です。

ドロップダウンナビゲーション

マウスオーバーをした時のみ表示されるコンテンツは、ページ分析ヒートマップのみで確認することができます。

タブ切り替え

同一ページ内でタブが切り替わるページも確認することができます。

会員限定ページ（ログインが必要なページ）

ログイン操作が必要なページ、また検索やアンケート、ゲームなどを行った後のページについても、URLを変更することなく結果ページを確認することができます。

チャットボックス

チャットボックスは、そのツールの開発仕様に大きく依存します。一般的に、チャットボックスを開くためのクリックは、アイコン自体に付随しており、ページをスクロールすると追従するため、他の要素んクリックと誤認する心配はあまりないと考えられます。

ただし、チャットボックス内のクリックは、Ptengineの解析コードが機能しないiframe要素として埋め込まれている可能性が高く、通常は計測できないことがほとんどです。