# セッションリプレイの設定

## 設定画面へのアクセス <a href="#access" id="access"></a>

1. 左メニュー上部のプロジェクト名をクリック
2. 開いたポップアップメニュー内のプロジェクト名の右にある歯車マークをクリック
3. 遷移した設定画面内の「セッションリプレイ」をクリック

{% hint style="warning" %}
設定の変更にはオーナー権限が必要です。
{% endhint %}

## 有効化/無効化 <a href="#enable-disable" id="enable-disable"></a>

`セッションリプレイを有効化` のチェックを切り替えることで機能利用のOn/Offを切り替えることができます。実際に反映されるまで最大数分程度のタイムラグが生じる場合があります。

Offにしている場合は計測タグによるセッションリプレイデータ生成処理自体が行われなくなります。

{% hint style="danger" %}
Offにした場合、過去に遡及してデータを生成しなおすことはできません。
{% endhint %}

## プライバシー保護設定 <a href="#privacy" id="privacy"></a>

### デフォルトマスキング <a href="#default-masking" id="default-masking"></a>

個人情報保護の観点から、フォームへの入力情報(`input[type="xx"]`)がデフォルトでマスキングされます。

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

```css
"input:not([type='submit']):not([type='button'])",
'textarea',
'select',
```

{% hint style="info" %}
`input:not([type='submit']):not([type='button'])` は input要素でもsubmitやbutton typeのものは除いていることを示しています。
{% endhint %}

{% hint style="warning" %}
ユーザーがフォームに入力する情報（パスワード/クレジットカード情報等）であっても、input要素にマッチしない場合はマスキング対象とはなりませんのでご注意ください。

事前のテスト配信による挙動確認を行ってください。マスキングされない場合の対処としては、対象のセレクタ自体をマスキングの対象として指定する、全テキストマスキングを設定する、対象の情報が含まれるページ自体を配信対象外とする、などの方法があります。
{% endhint %}

### 全テキストマスキング <a href="#full-text-masking" id="full-text-masking"></a>

この設定を行うと、セッションリプレイで保存されるページのテキストデータが自動でマスキングされます。機微情報が保存される懸念がある場合に利用を推奨いたします。

{% hint style="info" %}
この設定はデフォルトでOnになっています。
{% endhint %}

テキストの変換ルールは以下の通りです。

<table><thead><tr><th width="321">種類</th><th>マスキング後の表示</th></tr></thead><tbody><tr><td>半角英字</td><td>小文字: x 大文字: X</td></tr><tr><td>全角文字（半角日本語含む）</td><td>Ｘ (全角エックス)</td></tr><tr><td>数字</td><td>半角: 0 全角: ０</td></tr><tr><td>上記以外（記号や絵文字など）</td><td>変換せずそのまま表示します</td></tr></tbody></table>

#### マスキングのイメージ

<figure><img src="https://1516189518-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FhDtk9aBzYOvC8RRWtKCd%2Fuploads%2F0WzLLclJc4lBqTBxsZAI%2Fimage.png?alt=media&#x26;token=17342267-f06a-465e-8ef8-3e6636f42fde" alt=""><figcaption></figcaption></figure>

### 個別にマスキング/非マスキングを設定する <a href="#custom-masking" id="custom-masking"></a>

Webサイト上の特定要素について、マスキングの設定・解除を行うことができます。

#### マスキング対象セレクター

CSSセレクタを指定して、マスキングを追加できます。マスキングをかけたいセレクタが複数ある場合は改行区切りで設定可能です。

#### 非マスキング対象セレクター

CSSセレクタを指定して、マスキングを除外できます。サイト内の検索バーや登録フォーム等の入力情報までを動画でみたい場合に活用できます。マスキングを除外したいセレクタが複数ある場合は改行区切りで設定可能です。

{% hint style="warning" %}
同一の要素に対してマスキングと非マスキングの両方の指定がある場合は、安全性を優先してマスキングが適用されます。
{% endhint %}

<details>

<summary>CSSセレクタの指定方法がわからない場合</summary>

1. 対象のページを開きます
2. ページ内から、CSSセレクタを取得したい要素を見つけます
3. 要素の上で右クリックし`検証`を選択すると Chromeデベロッパーツール が開きます
4. Elementsタブの中で、該当の要素に対応するHTMLタグがハイライトされます
5. ハイライトされたHTMLタグを右クリックし、`Copy > Copy selector`を選択すると、クリップボードにその要素を指定するCSSセレクタがコピーされます

</details>

## セッションリプレイを取得するページを指定する <a href="#page-filter" id="page-filter"></a>

### URL 条件 <a href="#url-conditions" id="url-conditions"></a>

動画を取得するページ、もしくは除外するページを指定できます。

条件は以下の項目で設定します。

| 項目   | 説明           | 例                      |
| ---- | ------------ | ---------------------- |
| パス   | URLのパス部分     | `/questions`           |
| URL  | 完全なURL       | `https://example.com/` |
| クエリ  | URLのクエリパラメータ | `?page=1`              |
| アンカー | URLのアンカー     | `#section1`            |

比較方法として「等しい」「含む」「前方一致」「後方一致」「含まない」を選択でき、正規表現も利用可能です。

複数の条件を組み合わせる場合、AND条件（すべて一致）とOR条件（いずれか一致）を設定できます。条件は合わせて10個まで設定可能です。

### SPA 除外条件 <a href="#spa-exclusion" id="spa-exclusion"></a>

SPAサイトにおいてセッションリプレイを行いたくないページを除外できます。

{% hint style="warning" %}
SPA除外条件はURL条件で指定されているページの範囲内でのみ有効です。除外ページもURL条件の対象に含まれるよう設定してください。
{% endhint %}

## 意図せず保存されてしまったデータの削除 <a href="#delete-data" id="delete-data"></a>

意図しないデータが保存されてしまった場合はデータの削除も可能です。その場合はサポートまでご連絡ください。

## トラブルシューティング <a href="#troubleshoot" id="troubleshoot"></a>

[troubleshooting-sessionreplay](https://docs.wicle.io/other/troubleshoot/troubleshooting-sessionreplay "mention")