Enabling and configuring Session Replay 2.0 β
Connecting
- In Yandex Metrica, go to Settings and open the Tag tab.
- Select the Session Replay, scroll map, form analysis option.
- On the Session Replay tab, set the Session Replay option to On.
- Save your changes.
- Install the updated code snippet on all the site's pages.
Configuring the recording of site content
You can manage the recording of site content through:
- Input fields via the Yandex Metrica interface and using CSS classes
- Other site elements using CSS classes.
Configuring the recording of input fields
Session Replay records user actions on a site, including filling in fields, such as the act of filling out a form. However, Yandex Metrica recognizes fields where users might enter confidential information such as their first and last name. The contents of these fields will not be recorded. Asterisks will be seen instead of showing the data that the user entered into such fields in Session Replay recordings.
If you don't want Session Replay to record the content of any fields, disable the Record all fields option in the Session Replay tab in Settings. After this, the contents of all fields will be replaced with asterisks.
You can also control how fields are recorded using CSS classes (the class attribute).
| CSS class name | Description |
|---|---|
| ym-record-keys | Allows you to record the contents of a field. Use this class for textarea and input elements. |
| ym-disable-keys | Allows you to prohibit the recording of a field's contents. Use this class for textarea and input elements. The contents of this field will be replaced with asterisks. |
| CSS class name | Description |
|---|---|
| ym-record-keys | Allows you to record the contents of a field. Use this class for textarea and input elements. |
| ym-disable-keys | Allows you to prohibit the recording of a field's contents. Use this class for textarea and input elements. The contents of this field will be replaced with asterisks. |
- How to allow the recording of individual fields
-
- Disable the Record all fields option.
- Set the CSS class -ym-record-keys for the fields that you want to record the contents of.
Session Replay will record fields marked with the ym-record-keys CSS class, except for password fields. The contents of fields that are not marked with the ym-record-keys CSS class will be replaced with asterisks.
- How to prohibit the recording of individual fields
-
- Enable the Record all fields option.
- Set the CSS class -ym-disable-keys for the fields that you don't want to record the contents of.
The content of fields marked with the ym-disable-keys CSS class will be replaced with asterisks.
If Yandex Metrica has mistakenly identified a field as confidential, you can fix this by marking the field with the ym-record-keys CSS class.
In addition, you can configure the recording of the contents of the fields inside the hidden elements of the site.
Configuring the recording of other site elements
By default, Session Replay records all the content of site pages, except for fields where users can enter confidential information, such as first and last names. You can control the recording of website content using CSS classes (the class attribute). For example, you can prohibit the recording of the contents of a chat window. The rules defined for a class are triggered for the element itself and all child elements unless otherwise specified.
| CSS class name | Description |
|---|---|
| ym-hide-content | Allows you to prohibit the recording of an arbitrary site element. The image element will be grayed out, while the text will be replaced with a random set of characters that are blurred out. |
| ym-show-content | Allows you to record an arbitrary element of the site. This class can only be used for elements that are located within elements marked with the ym-hide-content CSS class. |
| CSS class name | Description |
|---|---|
| ym-hide-content | Allows you to prohibit the recording of an arbitrary site element. The image element will be grayed out, while the text will be replaced with a random set of characters that are blurred out. |
| ym-show-content | Allows you to record an arbitrary element of the site. This class can only be used for elements that are located within elements marked with the ym-hide-content CSS class. |
- How to prohibit the recording of a separate element
-
Set the CSS class ym-hide-content for the element that you don't want to record the contents of.
Session Replay will record all fields except the ones that are marked with the ym-hide-content CSS class. If an image block is marked with the CSS class, it will be replaced with a gray block. If it is text, then it will be replaced with a random set of characters that are blurred out.
- How to allow the recording of a separate element placed inside an element that is hidden using the ym-hide-content CSS class
For example, you can control the recording of a block containing reviews on your site, such as hiding the names of users and avatars, but recording the text of the review. As a result, the avatar will be replaced with a gray block, the user's name will be replaced with an random set of characters that are blurred out, and the review text will be recorded as seen by its user during the session.
If you want to allow the recording of an arbitrary element that is not an input field inside a hidden element, follow these steps:- Recording an input field inside an element that is hidden using the ym-hide-content CSS class
-
For example, the ym-hide-content CSS class is set for a block of reviews, and within this block is a form for entering a review. In this case, Session Replay will not record the block of reviews, and the contents of the fields will be replaced with asterisks.
In order for Session Replay to record the content of the field, set the ym-show-content CSS class for it. If, during the recording of the session, Yandex Metrica identifies the field as confidential, then its contents will be replaced with asterisks.
If you set the ym-record-keys CSS class for fields located inside a hidden element, then the field content will be replaced with asterisks.
