Enabling and configuring Session Replay 1.0

Enabling

  1. In the Yandex.Metrica interface, go to Settings and open the Tag tab.
  2. Select the Session Replay, scroll map, form analysis 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 signed 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 signed 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.

Recording contents of 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 are automatically masked with asterisks.

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.

You can also prevent individual fields from being recorded by using a CSS class (the class attribute).

  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. Use this class for textarea and input elements.

Session Replay will record all fields except the ones that are marked with the -ym-disable-keys CSS class. Content of fields marked with the ym-disable-keys CSS class will be replaced with asterisks.