【新機能】ヒートマップ全画面表示機能で、A/Bテストパターンも表示が可能に ｜ SiTest (サイテスト) ブログ

SiTest では、管理画面からスクロール解析やタッチアクションなど、各種ヒートマップを管理画面上で確認することができます。

また、「スマートレポート」機能により、各種ヒートマップのキャプチャが貼られた Excel ファイルのダウンロードが可能です。
しかしながら、スマートレポートはプランによって出力可能回数が制限されており、またページが極端に長い場合など、ヒートマップ画像が正しくキャプチャされずエラーとなることもあります。
そのため、回数に縛られずに、ご自身で別ウィンドウにヒートマップを開き、Google Chrome の拡張機能を用いてキャプチャを取ることができる機能を、昨年の８月にリリースいたしました。
（参考：【新機能】ヒートマップの全画面表示機能により、ヒートマップを大きく表示・全画面キャプチャが可能に）

今までは、全画面（別ウィンドウ）での表示は、オリジナルパターンの背景しか取得できませんでした。
そのため、SiTest 管理画面内では見ることができる、A/B テストパターンの背景を用いたヒートマップを、全画面表示してキャプチャすることができませんでした。

この度、A/B テストパターンの背景を用いたヒートマップを、全画面表示してキャプチャすることができるようになりました！
今回は、実際の操作方法をお伝えいたします。

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

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

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. セグメントで「A/Bテストパターン」を選択する

ヒートマップの上部にある「＋セグメント」をクリックしてください。

すると、セグメント一覧が表示されます。テストパターンを見る場合は、ここで新しくセグメントを作成します。
「＋新規セグメント」をクリックしてください。

このセグメント作成画面で、テストパターンのデータが見られるよう設定します。

「決定」ボタンを押すと、再度セグメント一覧が表示され、一覧の一番下に、作成したセグメントが追加されています。
そのセグメントを使用したいので、チェックボックスにチェックを入れてください。

「適用」ボタンを押すと、新たにテストパターンが並んで表示されます。

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

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

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

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

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

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

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

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

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

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

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

その他の拡張機能によってキャプチャを撮る方法

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

方法としては2通りあります。

1. ディベロッパー・ツールを使用する

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

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

タブ内にヒートマップが表示されます。
Windows の場合「F12」キー、
Mac の場合「command + option + i」キーでディベロッパー・ツールが表示されます。
デベロッパー・ツールが表示されましたら、下のアイコンを選択してください。

デバイスモードを切り替えることで、ユーザーエージェントを切り替えたり、表示領域を制御することができます。
タブレット用のページの場合は「iPad」を、スマートフォン用のページの場合は「iPhone8」などを選択してください。

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

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

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

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

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

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

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

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