You can use HTML attributes in your website's source code to prevent content on your page from being recorded. This is useful if you have personal information displayed on the page after it is entered (e.g. a shipping confirmation page).

The attribute data-mf-replace and can be used in few ways.

Removing an element

<div>

<p>Before</p>

<p data-mf-replace="">

Content to Exclude

</p>

<p>After</p>

</div>

Mouseflow will record the page as if the HTML was as follows

<div>

<p>Before</p>

<p>After</p>

</div>

Note how the third <p> tag (which had the HTML attribute) is no longer present.

It's also possible to exclude only the inner part of an element, using the HTML attribute data-mf-replace-inner instead

Removing inner content

<div>

<p>Before</p>

<p data-mf-replace-inner="">

Content to Exclude

</p>

<p>After</p>

</div>

In this case, the result would be

<div>

<p>Before</p>

<p></p>

<p>After</p>

</div>

Replacing Content

In the examples above, we removed content but didn't replace it with any kind of placeholder. You may want to replace it with something else to indicate that there was originally a value shown. To do this, you can add a value to the data-mf-replace or data-mf-replace-inner HTML attributes.

<div>

<p>Before</p>

<p data-mf-replace="**REMOVED**">

Content to Exclude

</p>

<p>After</p>

</div>

In playback, this HTML code would be shown like this:

<div>

<p>Before</p>

**REMOVED**

<p>After</p>

</div>

Again, it's also possible to replace only the inner part of an element:

<div>

<p>Before</p>

<p data-mf-replace-inner="**REMOVED**">

Content to Exclude

</p>

<p>After</p>

</div>

In this case, the result would be:

<div>

<p>Before</p>

<p>**REMOVED**</p>

<p>After</p>

</div>

Did this answer your question?