本ページではKARTE Liveで動画を再生する際の画面(※プレイヤー画面とします)関連について記載します。

  1. プレイヤー画面の操作方法について
  2. 動画再生の導線について
  3. プレイヤー画面上の再生詳細について

1. プレイヤー画面の操作方法

null

①動画・ユーザー基本情報表示

開いている動画の発生開始時刻(日本時間)、ユーザーの名前とアイコン、ユーザーの閲覧開始時の詳細UA(デバイス, OS, バージョン)が表示されます。

ユーザーの名前、アイコンをクリックすることで該当ユーザーでライブストリームでの絞り込みを行う・ストーリー画面ヘ遷移し詳細行動をイベント軸で見ていくことができます。

②その他の動作

「・・・」ボタンをクリックすると、「ユーザーストーリーを確認する」というリンクが表示されます。リンクをクリックすると、該当ユーザーのストーリー画面へ遷移します。
※該当時間帯のイベントまで直接遷移することは現状ではまだできません。

動画を見る際にそのユーザーの詳細ステータスや行動を把握することなどに活用できます。

③最小化/最大化/閉じる

画面の最小化/最大化表示を選択することができます。最小化した場合は、ドラッグでKARTE画面上でプレーヤー画面を移動させることができます。最小化ウインドウは、ストリーム画面の他動画探索中やストーリー画面・トーク画面での状況確認と並行して使う際に主に活用できます。
また、右上の✕ボタンを押すとプレイヤー画面を閉じることができます。

④プレイヤーウインドウ

実際のユーザー行動が再生されます。画面上をクリックすることで動画の停止・再生を行うことができます。

⑤動画の再生/停止/スキップ関連動作

左下の各アイコンから動画の再生操作をすることができます。

  • 再生する/停止する: 動画の再生・一時停止を切り替えることができます。
  • 15秒戻る:動画の再生時刻を15秒戻すことができます。
  • 15秒進む: 動画の再生時刻を15秒進めることができます。
  • 最初に戻る: 動画を0:00の開始時点に戻して始めから見直すことができます。

15秒バック・スキップは該当のシーンを探すうえで細かく再生時刻を変える時などに活用できます。

⑥シークバー

録画再生中、バーをクリックすることで任意の時点から再生させることができます。リアルタイム再生中は利用できません。
左端の時間は絶対時間表記での【現在の再生時刻 / 該当動画の総再生時間】を表しています。

シークバー横の数字(1,2,3...)について

シークバーの縦軸はユーザーがブラウザで開くタブ毎にID(1,2,3...)が付与されます。
「1」と左端に書かれているシークバーでは「1」のタブのなかでのページ遷移行動が表示され、
更にユーザーが別タブでページを開くと「2」のタブでのページ遷移行動が表示されます。

シークバー上のマウスホバー挙動について

シークバー上にマウスを合わせるとそのタイミングの詳細情報が表示されます。
下記のような種類が存在します。

  • 緑色付きの直線バー: ユーザーがアクティブに閲覧している時間です。ホバーすると該当時間、閲覧ページタイトル、閲覧ページのURLパスが吹き出しで表示されます。
  • 緑色付きの点線バー: ユーザーがマウス操作なくページ閲覧している時間です。ホバーすると該当時間と共に「操作なし」と表示されます。
  • グレー色付きの点線バー: ユーザーが該当タブ自体を閲覧していない時間です。ホバーすると該当時間と共に「閲覧なし」と表示されます。

⑦閲覧中のURL

プレイヤーで現在再生中の閲覧ページのURLが表示されます。従って動画内のページ遷移にしたがって表示されるURLは次々変わります。
表示URL横のアイコンをクリックするとURLをコピーすることができます。
Liveで動画を見ながら、実際のWebサイト画面を確認するときになど活用できます。

⑧動画の再生ステータス管理

歯車アイコンから動画の再生ステータス設定を変更することができます。
大きく下記2つが可能です。

  • 活動がない時間をスキップ:録画再生中、ユーザーの行動に一切動きがない時間を、スキップすることができます(デフォルト設定ではONになっています)。
    ※活動時間がない時間 = サイト上で操作がない時間 + タブ自体オフラインの時間が対象となります
  • 再生速度:再生速度を遅くしたり、速くする設定ができます。通常の速度に加え、0.5倍速/2倍速/4倍速/8倍速があります。

また、歯車アイコンの横では現在の動画のスキップ設定・再生速度が表示されます。

※ユーザー情報・ユーザータイムライン表示をしていたユーザーパネルは2019/7のアップデートで廃止しています。

⑨動画共有

動画を再生するための共有用URLを発行することができます。

  • 動画のURLをコピー:そのセッションの最初から録画を再生させることができます。
  • 現時点の動画のURLをコピー:現在閲覧している時点から録画を再生させることができます。

2. 動画再生の導線

動画再生は大きく3つの動線から行うことができます。

  • ライブストリーム画面からの再生
  • ユーザーストーリー画面(ユーザー行動詳細)からの再生
  • トーク画面(ウェブチャット)からの再生

ライブストリーム画面からの再生

過去のユーザー閲覧行動ごとに、その時点での録画を再生することができます。
ライブストリームでは複数の条件を元に閲覧したい動画を検索することができます。ライブストリーム画面の詳細についてはこちらの記事をご確認ください。

ユーザーストーリー画面(ユーザー行動詳細)からの再生

null

2-1. リアルタイム再生

そのユーザーがサイトへ来訪中の場合は、リアルタイム再生用のボタンが表示されます。クリックすると、プレイヤー画面のウインドウが表示され現在ユーザーが取っている行動をそのまま再生させることができます。

2-2. 録画再生

過去のユーザー閲覧行動ごとに、その時点での録画を再生することができます。再生ボタンは_live_record_startという自動イベントにのみ表示され、ボタンと共に下記いずれかの情報が付随されます。
なお、このイベントは基本的に閲覧イベントと一緒に発生します。

  • 録画ができている: そのPVの再生可能時間(xx時間xx分xx秒)を表示します。クリックすると、①同様にプレイヤー画面のウインドウが表示されます。
  • 録画ができていない: ボタンがグレーアウト状態になり、クリックすることができません。マウスオーバーすると詳細のステータスを確認できます。
    • 表記「動画ファイルがありません(作成中の可能性があります)」: 該当のPVがLiveスクリプトの配信対象条件に入っていない、またはLiveスクリプト配信の直後でまだ録画データを保存し続けている状態です。
    • 表記「録画対象外、もしくは録画に失敗しています」: 該当のPVがLiveスクリプトの配信対象条件に入っていない、またはLiveスクリプトの配信エラー・録画データ保存時のサーバーエラーが起きている状態です。
    • 表記「ページ内遷移なので録画無し」: SPAページでページ遷移なしに閲覧イベントが変化した状態です。
録画ができていない状態のステータス管理についてはより正確に把握できるよう開発検討中です。

対象とするイベントの絞り込み、検索方法についてはイベント表示設定をご参照ください。

トーク(ウェブチャット)画面からの再生

null

2-3. リアルタイム再生

そのユーザーがサイトへ来訪中の場合は、リアルタイム再生用のボタンが表示されます。クリックすると、プレイヤー画面のウインドウが表示され現在ユーザーが取っている行動をそのまま再生させることができます。

2-4. 録画再生

過去のトーク履歴のタイミングごとに、その時点の動画を再生することができます。再生ボタンの仕様・表示内容については「ストーリー画面からの再生」と同様です。

3. プレイヤー画面のユーザー行動再生について

KARTE Liveではユーザーのページ上の行動の流れを見ることができます。
具体的にはデバイスごとに下記のような表示が行われます。

  • PC:
    • ページスクロール
    • ユーザーのマウスカーソルの移動(カーソルアイコンが表示され続けます)
    • クリック(クリック可能箇所・未反応クリック共にユーザーのクリック時には円のポインターが表示されます)
  • スマホ/タブレット:
    • ページスクロール
    • タップ(タップ可能箇所・未反応タップ共にユーザーのタップ時には「クリック」同様円のポインターが表示されます)

関連ドキュメント