Enabling and configuring Session Replay 1.0

Enabling

  1. In the Yandex.Metrica interface, go to Settings (Tag).
  2. Select the Session Replay, scroll map, form analytics option.
  3. Save your changes.
  4. Install the updated code snippet on all the site's pages.

Configuring

Recording page contents

By default, Session Replay records only user actions on the page, not the page content.

If recording page content isn't turned on, the current versions of site pages are used during playback. They may differ from the versions seen by the user.

There are two ways to record page content: by the browser while the user is viewing a page, or by a Yandex.Metrica robot. In both cases, only the HTML code of pages is saved (images, CSS, and JavaScript are not saved). In addition, the size of the page's code must not exceed 185 KB.

During playback, data may be transmitted via the Yandex proxy server (*.mtproxy.yandex.net). If your site checks the domain name, add an exception, such as using the regular expression

/^(.*\.)?mtproxy\.yandex\.net$/i

Example:

if (/^(.*\.)?mtproxy\.yandex\.net$/.test(document.domain)) {   [user_code]}
Recording pages during viewing

The tag records both the user's actions and the content of pages with URLs that match the pattern set in List of pages to save. Playback is guaranteed to show the version of the page that the user's browser loaded. This option is recommended for pages with content that is unique to each user, such as the “Basket” section.

There are two ways to get the page content:

  • From the browser. The HTML code corresponds to the current representation of the page in the DOM model of the user's browser. This is the most accurate representation of the page. It takes into account any manipulations that were made with a page included in it using JavaScript code.
  • Using a separate request. The HTML code of the representation exactly matches the HTML code of the page at the moment of loading. However, the results of executing JavaScript are not taken into account.

The list of pages to save is defined using conditions on individual strings. A condition may be a full page URL or part of one (a substring), or a regular expression. In the last case, use the regexp: prefix.

Examples:

  • /path?query — Record pages containing the string /path?query.
  • regexp:http://example.com/.* — Record pages like http://example.com/abc and http://example.com/ab/cd.
  • regexp:.* — Record all pages.

Loading pages in the player

When playing back a user's actions, either a saved copy or the current version of the page is loaded. The page representations have the following priority (from highest to lowest): a copy of the page saved from the browser, a copy recorded by the robot, the current page on the website.

The current page on the website is loaded to the player using an iframe. If your site is protected from being shown in an iframe (the X-Frame-Options header is used in the server settings), the collected data won't be available for viewing. To view the site's session data, you must change the server settings and add an exception for the webvisor.com domain and subdomains, as well as for your site's domain. Use the regular expression

^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/

If you use nginx, add the following exceptions to your configuration:

location / {
        set $frame_options '';
        if ($http_referer !~ '^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/'){
            set $frame_options 'SAMEORIGIN';
        }
        add_header X-Frame-Options $frame_options;
        ...
    }

where yourdomain\.com is the site's domain name. Use your site's domain zone (it may differ from .com).

Regardless of which page representation is used, the page can be loaded as follows:

  • As you — the player loads the same page that you would see if you visited the site yourself.

    If you are logged in on the site, this username will also be used in the player. If there is a shopping basket on the site and you put products in it, you will see the contents of your own basket during playback, and not the basket of the user whose session you are viewing.

  • As an anonymous user — the player loads the page that a first-time user would see on the site. If the site has user login, the player loads the version of the page that is seen by users who are not logged in.

    We recommend using this method if playing back users' actions results in undesired effects, such as adding new products to your own shopping basket each time.

Configuring recording form fields

Session Replay records the actions of site users, including filling in form fields. The contents of fields where the user enters sensitive information (such as name or credit card information) are automatically masked with “asterisks”. If a field is mistakenly identified as confidential, you can fix this: mark the field with the ym-record-keys CSS class.

If you don't want Session Replay to record any fields, disable the Record all fields option on the Session Replay tab in Settings.

Customizing recording of individual fields

Enable recording individual fields
  1. Disable the Record all fields option.
  2. Set the CSS class -ym-record-keys for the fields that you want to record the contents of.

Session Replay will only record those fields that are marked with the -ym-record-keys CSS class.

Disable recording individual fields
  1. Enable the Record all fields option.
  2. Set the CSS class -ym-disable-keys for the fields 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-disable-keys CSS class. The contents of fields that Yandex.Metrica determines to contain sensitive information (such as name or credit card information) are automatically masked with “asterisks”.