【新機能】ヒートマップの全画面表示機能により、ヒートマップを大きく表示・全画面キャプチャが可能に ｜ SiTest (サイテスト) ブログ

SiTest では、管理画面からスクロール解析やタッチアクションなどの各種ヒートマップを確認することができます。
また「スマートレポート」機能により、各種ヒートマップのキャプチャが貼られた Excel ファイルのダウンロードが可能です。
ただ、以前から以下のようなお問い合わせを頂いておりました。

・管理画面の中だけでなく、もっと大きい画面でヒートマップを確認したい
・スマートレポートでヒートマップ画像を取得することができない場合がある

そこで、ヒートマップを全画面（別ウィンドウ）で表示できる機能を追加しました！
これにより、ヒートマップを別ウィンドウの大きな画面で確認することができ、ブラウザの拡張機能を使うことでヒートマップの全画面キャプチャを取得することが可能になります。
（ヒートマップのキャプチャは、もちろん無料でご利用いただけます）
今回は、実際の操作方法をお伝えいたします。

全画面表示できるヒートマップは以下の通りです。

・ スクロール解析
・ マウスグラフィ
・ クリック解析
・ タッチアクション

※「タップ解析」は今後追加予定です。

「スクロール解析」を例にご紹介します。

1. 画面左側のメニューから、「スクロール解析」を選択する

2. 確認したい URL、デバイスを選択する

2-1. レスポンシブ対応のページの場合

URL 選択 BOX から、確認したいページの URL を選択してください。

URL の選択には2つのやり方があります。

確認したいデバイスを、デバイス選択ボタンから選択してください。

2-2. PC 用とモバイル用で URL が異なるページの場合

操作方法は、前述の「2-1」と同様です。

PC 用のページを確認したい場合、 PC 用ページの URL を選択し、デバイス選択ボタンで「パソコン」を選択してください。
モバイル用のページを確認したい場合、モバイル用ページの URL を選択し、デバイス選択欄で「タブレット」または「スマートフォン」を選択してください。

2-3. PC とモバイルで URL は同じだがユーザーエージェントでページを出し分けているページの場合

操作方法は、前述の「2-1」と同様です。

この場合、SiTest でデータを取得するには、カスタムタグを貼っていただく必要があります。
（※参考：ヘルプ：スマートフォンサイト解析の準備）
カスタムタグを設置することで、同じ URL でもユーザーエージェントごとに切り分けてデータを取得することができます。

PC 用に出し分けているページを確認したい場合、対応する URL 名を選択し、デバイス選択欄で「パソコン」を選択してください。
モバイル用に出し分けているページを確認したい場合、対応する URL 名を選択し、デバイス選択欄で「タブレット」または「スマートフォン」を選択してください。

3. 「別ウィンドウで表示する」リンクを選択する

ヒートマップの右上に表示される情報エリアの下にある「別ウィンドウで表示する」リンクをクリックして下さい。

別ウィンドウが表示され、読み込み完了後、対象のヒートマップが表示されます。

※ デバイス選択ボタンで「スマートフォン」を選択した際の注意点

メニュー「スクロール解析」において、デバイス選択ボタンで「スマートフォン」を選択した場合、スクロールのチャートと情報エリアが被さってしまいます。

お手数ですが、スクロールのチャートを下へドラッグしていただき、隠れている情報エリアを見つけてください。

（4. セグメント毎のヒートマップを表示し、比較する）

セグメント毎にヒートマップを表示することができるので、横に並べて比較することが可能です。

「+ セグメント」を選択します。

セグメント設定欄が表示されます。

例として「直帰セッション」と「直帰以外のセッション」を選択します。
選択後、「適用」ボタンを選択します。

管理画面上に「直帰セッション」と「直帰以外のセッション」のセグメントが追加され、それぞれに対応するヒートマップが表示されました。

各ヒートマップ上の「別ウィンドウで表示する」をそれぞれ選択してください。

このように、各セグメント毎のヒートマップを表示して、それぞれ比較することが可能です。

※セグメントは、自由にカスタムすることもできます。詳細は、こちらから（ヘルプ：カスタムセグメントの作成

全画面表示したヒートマップの右上に、そのヒートマップに関する情報が表示されます。
情報が不要な場合、右上の × ボタンを選択してください。

× ボタンを選択すると、再表示用のボタンが表示されます。

再表示用のボタンからフォーカスを外してしばらく下の方にマウスポインタを移動すると、非表示になります。

再表示ボタンは、画面上部までマウスポインタを移動させると表示されます。再度表示したい場合、再表示ボタンを選択してください。

別ウィンドウで表示後、 FireShot をはじめとした、右クリックからキャプチャ取得を選択できるブラウザの拡張機能で全画面のキャプチャを取得することが可能です。

拡張機能によっては右クリックでメニューが表示されないものもあり、普段お使いのツールがそれに当てはまる場合もあるかと思います。
以下では、右クリックで起動できない拡張機能を使ってキャプチャを撮る方法をご紹介します。
※右上に表示される、ヒートマップに関する情報は、表示したままキャプチャを取るといっしょにキャプチャされます。不要な場合は、必ず × ボタンで消してからキャプチャをお撮りください。

方法としては2通りあります。
１．デベロッパー・ツールを使用する
２．別タブで開いた後、ウィンドウサイズを調整する

１． デベロッパー・ツールを使用する

別ウィンドウで表示後、 URL をコピーします。

新規のタブを開き、URL 欄に先程コピーした URL を入力してアクセスします。

タブ内にヒートマップが表示されます。
Windows の場合「F12」キー、 Mac の場合「command + option + i」キーでデベロッパー・ツールが表示されます。

デベロッパー・ツールが表示されましたら、下のアイコンを選択してください。

デバイスモードを切り替えることで、ユーザーエージェントを切り替えたり、表示領域を制御することができます。

タブレット用のページの場合は「iPad」を、スマートフォン用のページの場合は「iPhone6」などを選択してください。

デバイスを選択し、画面を再読込後、お使いの拡張機能で全画面キャプチャを取得してください。

２． 別タブで開いた後、ウィンドウサイズを調整する

新規のタブにヒートマップを表示するところまでは、「１． デベロッパー・ツールを使用する」と同様です。

ヒートマップが表示されたタブを切り離して別ウィンドウにします。

別ウィンドウにした後は、ヒートマップの表示している領域までウィンドウ幅を調整してください。

調整後は、「１． デベロッパー・ツールを使用する」と同様、画面を再読込後、お使いの拡張機能で全画面キャプチャを取得してください。

これまで、管理画面上またはスマートレポート上でのみ確認できたヒートマップを、別ウィンドウでも表示できるようになり、全画面表示の大きな画面でヒートマップを確認できるようになりました。
また、画面キャプチャをかんたんに取得できるようになったことで、レポートに利用したり、いろいろな人と共有したりなど、ご利用になる範囲も広がるかと思います。
ぜひ、日々の業務の中でお役立てください！

SiTest はこれからもお客様の声にお応えし、有用で便利な機能を開発してまいります。
今後とも、SiTest をよろしくお願いいたします。