前提

これまでKARTE Liveでは、ユーザーの行動を再現するときに、cssやimg(画像)などページ内でロードしているデータについては、動画生成時に取得せず、再生時にKARTEサーバからクライアント側のサーバに直接アクセスする方法（プロキシ機能）で取得していました。

アップデートの概要

今回、プロキシ機能のアップデートにより、サイト上のCSSや画像などのリソースもKARTE Live側で保存できるようになりました。

これにより、以下のメリットが得られるようになります。

  1. 動画再生時の表示崩れが減り、また再生中の処理が重くなってうまく動かない課題（パフォーマンス課題）が解消されやすくなります

    • 解消率は100%ではありませんが、これまでよりも高い動画再生パフォーマンスが期待されます。

  2. サイトのUI改善を頻繁に行う場合（週毎、月毎など）でも、「サイト改善前」のUI全体をKARTE Live側で保存できるため、「サイト改善後」の時点でLive動画を再生しても「サイト改善前」のUIをそのまま確認できます

    • これまでは「サイト改善後」のタイミングで「サイト改善前」の日時の動画を再生すると、動画が崩れて表示されることが多い仕様でした。「サイト改善前」のCSSや画像などが既にクライアント側のサーバーに保存されていないためです。

2については具体例で説明します。

  • 前提条件
    • KARTE Liveで直近６０日間分の動画データが保存できている
    • 2023/02/01にサイトのリニューアルを行ってUIに大幅な変更があった
    • 2023/02/08にKARTE管理画面からKARTE Liveで1月中に来訪したユーザーの行動動画を再生しようとした
  • プロキシ機能アップデート前のKARTE Live
    • 2023/02/08時点で1月中に来訪したユーザーの行動ユーザー動画再生をすると、１月中の動画データは崩れて表示される
    • 理由: クライアント側のサーバーにリニューアル前のCSSや画像データが既に無く、読み込めないため
  • プロキシ機能アップデート後のKARTE Live
    • 2023/02/08時点で1月中に来訪したユーザーの行動ユーザー動画再生をしても、１月中の動画データは問題なく表示される
    • 理由: KARTE Live側でリニューアル前のCSSや画像データも保存できているため

注意点: 追加対応が必要になるケース

一部のサイトでは、動画取得時点にかかわらず、動画が崩れて表示される（cssやimgは取得できずにページのhtmlのみが表示される）可能性があります。

こちらの事象が確認された場合、下記に記載のAもしくはB、いずれかの対応を行ってください。

A. クライアント様サーバー側での処理を行う
B. KARTE上での通信設定を変更する

A. 企業様サーバー側での処理
システムを担当されている部署や企業様側にてKARTEサーバーからのアクセス疎通処理を行う必要があります。
下記の文章を参考に依頼をお願いします。

KARTEサーバーからの接続を許可する設定をお願いします。
具体的には、KARTEサーバーからのアクセスはUserAgentに「KarteBot」という文字列が含まれるものが対象です。

また、アクセス元のIPアドレスは以下のドキュメントに記載の範囲に固定している為IPアドレスによる制限がある場合は許可リストへの登録をお願いします。
https://developers.karte.io/docs/static-server

B. プロキシを通さずに通信する設定について
システム部門側でのサーバー設定変更対応が難しい場合、
KARTE Live側の設定でプロキシを経由せずにcssやimageの情報を取得することが可能です。

具体的には以下の順序で設定が可能です。

  1. グローバルナビゲーションからすべてのプロダクト > Live > ライブ設定を開く
  2. 「プレイヤー設定」を開く
  3. 「プロキシーを使わない」にチェックして保存する

null

ただし、BのプロキシをOFFにする方法でも必ずしも解消しない・表示崩れが起き続けるケースはあり得ます。
その場合は「企業様側での処理」の対応を行っていただく必要がある点、ご了承ください。

プロキシを通さずに通信する設定については、詳しくはこちらの記事もご参照ください。

FAQ

Q. CSSや画像データが保存できると、サイト上のiFrameで読み込んでいる箇所もKARTE Liveの動画で再生できるようになりますか？
A. アップデート後もiFrame内のデータは引き続き再生できません