KARTE Liveでは、録画用スクリプトの読み込みと実行をするための接客サービスを配信します。
こちらの記事ではその機能詳細について記載しております。

前提:ユーザー行動録画の方法について

概要

録画用スクリプト(JavaScript)をエンドユーザーのブラウザ上で実行すると、HTMLの変更やマウスのイベントを検知してその情報が保存用のサーバーに送信されるようになります。再生する際にはその情報を元に、管理画面上の再生画面で同じHTMLを生成し再現します。

従って、現状の仕様では外部リソース(htmlからリンクで呼んでいるもの)は保存していないため、元のリンクが切れたら表示がなされません。リンク画像がなくなったり、リンクされているcssに変更があるとスタイルが崩れる可能性があります。

※仕様の詳細・個別シーンについてご質問がある場合には担当者までお問合せください。

録画の対象

前述の通り、KARTE Liveでは接客サービスとしてスクリプト配信(以下KARTE Live用スクリプト)を行います。
従って、通常の接客サービスと同様にセグメントや配信トリガーを指定することで、特定のページや特定のユーザーのみを録画の対象とすることができます。

録画の保存期間

録画は現行の仕様では過去4週間(28日)分のみ保存されます。4週間を超えると録画が実行されていても再生ができなくなりますので、ご注意ください。

設定方法

お申し込み後、接客サービスの設定画面においてKARTE Live用のスクリプトをテンプレートから選択できるようになります。

接客サービス > 新規作成 > 「スクリプトを実行する」より、「KARTE Live用スクリプト」というテンプレートを選択し、設定を開始してください。

録画の対象者を限定したい場合は、通常の接客サービス同様に、KARTEで作成したユーザーセグメントで対象者を絞りこむことや、録画用スクリプトの配信トリガーを指定することで特定の条件下のユーザー行動のみをLiveで確認することができるようになります。

対象ユーザーの設定についてはこちらを、配信トリガーの設定についてはこちらをご確認ください。

「マスキング」を特定の箇所に任意で設定する場合は、先にKARTE検証環境用プロジェクトにて試す・本番環境プロジェクトでも「自分に配信」などテスト配信の手順を取って試すことを推奨いたします。
マスキング設定の詳細についてはこちらをご確認ください。

設定時の注意点

  • 対象イベントの設定時に「アクセス毎」を選択しなかった場合、そのセッションの最初のアクセスページしかスクリプトが配信されず、以降のページ遷移時は録画されません。
  • オプション設定時に「同時配信」を有効にしなかった場合、ほかの接客サービスと重複して配信されない場合があるため、必ず有効にしてください。

マスキングについて

前提

KARTE Liveでは個人情報保護の観点からページ情報をマスキングすることが可能です。
また、マスキングの箇所を部分的に解除することも可能です。
仕様として、お客様任意で設定いただく箇所とデフォルトでマスキングがかかる箇所があります。

ページ情報のマスキング(お客様任意で設定の箇所)

マスキングの設定方法

読み込んだKARTE Live用スクリプトを実行する際にマスキング用のCSSセレクタを1つ設定します。
具体的にはスクリプトのhiddenSelector: '', 部分にCSSセレクタを記述します。
※複数セレクタを指定したい場合はカンマ区切りのセレクタを使用することになります。

マスキングの内部動作

KARTE Live用スクリプト内部で、セレクタにマッチする要素の中身(子要素含む)と、その要素のvalue, checked, src, data, alt属性の値をサーバに送信しない、というロジックとなっています。

推奨する方法

マスキング対象を明示的にするため、マスキング用のclassを1つ決め、隠したい要素に対してそのclassを指定し、KARTE Live用スクリプトにそのclassだけ設定することを推奨しています。
:nth-child(n)(n番目の要素)など、サイトの構造を変更したときにずれてしまう可能性があるようなセレクタは非推奨としています。)

ページ情報のマスキング(デフォルトで設定の箇所)

該当箇所

ユーザーのセキュリティ保護の観点からフォームへの入力情報(input[type=”xx”]の大部分がデフォルトのマスキングの対象となります。

具体的には下記のセレクタに該当するものが対象です。

'input[type="password"]',
'input[type="text"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="url"]',
'input[type="email"]',
'input[type="hidden"]',
'textarea',
'[autocomplete="cc-name"]',
'[autocomplete="cc-given-name"]',
'[autocomplete="cc-additional-name"]',
'[autocomplete="cc-family-name"]',
'[autocomplete="cc-number"]',
'[autocomplete="cc-exp"]',
'[autocomplete="cc-exp-month"]',
'[autocomplete="cc-exp-year"]',
'[autocomplete="cc-csc"]',
'[autocomplete="cc-type"]'

※従って、ユーザーがフォームに入力する情報(パスワード/クレジットカード情報等)であっても、上記のセレクタにマッチしない場合はマスキング対象とはなりませんのでご注意ください。
防止策としては、対象のセレクタ自体をマスキングの対象として任意で指定いただく、対象の情報が含まれるページを配信対象外とする、などの方法があります。

ページ情報のマスキング解除

マスキングがかかるフォーム入力情報の箇所のユーザー行動をKARTE Liveで見たい場合、マスキングを解除することが可能です。

具体的にはKARTE Live用スクリプトのunhiddenSelector: '', 部分にマスキングを解除したいCSSセレクタを記述します。
※複数セレクタを指定したい場合は任意の箇所にマスキングを設定する時と同様に、カンマ区切りのセレクタを使用することになります。

関連ドキュメント