Adding session replay

Table of contents

1. Installing the replay code
2. Privacy
   1. Mask text inside any element
   2. Block elements from being recorded
   3. Ignore activity events on inputs

Installing the replay code

This replay code will record interactions on the page so that you will be able to watch recordings of your tracked sessions. This code can be added into the same tag as the form tracking tag, a new tag, or pasted into the source code.

 <script src="https://assets.zuko.io/replay/v1/record.min.js"></script>
 <script>
   ZukoReplay
      .recordForm({slug:'caba1457c8fa6b78'})
 </script>

Privacy

Session replay will record interactions on the page such as clicks, mouse movements, scrolls and elements being added/removed. This is so that the video can be reconstructed to show what visitors did when interacting with your form.

By default, all input text is masked, and instead you will see visitors entering simply ****.

If there is personal information on your form that displays in a different type of element, such as a <div> or <h1> you will want to mask or block that element. For example, on a multi-step form, the name entered on step 1 may display on step 2. You could therefore:

1. mask this element and see only *******, or
2. block this element and see a blank area

Mask text inside any element

Text inside an element can be masked by adding the CSS class name zuko-mask to the element. The replay will then show a * for each character of text inside that element.

  <h1 class="zuko-mask">Your Details: Mr Smith</h1>

Note: If you have previously added masking CSS class names when using another replay tool, then you might not need to add Zuko’s. Here is the list of class names we mask: rr-mask, fs-mask, sentry-mask, highlight-mask.

Block elements from being recorded

An element or whole section can be blocked from being recorded by adding the CSS class name zuko-block to it. The replay will then show an empty box with the same dimensions.

  <section class="zuko-block"><p>Sensitive section that we do not want to record at all.</p></section>

Note: If you have previously added blocking CSS class names when using another replay tool, then you might not need to add Zuko’s. Here is the list of class names we block: rr-block, fs-exclude, sentry-block, highlight-block, data-hj-suppress, ph-no-capture.

Ignore activity events on inputs

Input events on an element can be ignored by adding the CSS class name zuko-ignore to the element. The replay will then not show any keypresses happening in this input.

  <label for="sensitive-text">Enter sensitive info:</label>
  <input class="zuko-ignore" type="text" id="sensitive-text"/>