Knowledge base | mouseflow

Exclude or Replace Content on Pages

You can exclude/replace certain parts of the page source from appearing in playback or in heatmaps.

This is critical for personal, financial, or sensitive information that is displayed to a user (not inside of form fields which should be excluded differently).

Excluding Content

You can use our "data-mf-replace" HTML attribute on an individual element to remove it from the HTML (before it's sent to our platform).

Here's an example:

<div>
    <p>Before</p>
    <p data-mf-replace="">
        Content to Exclude
    </p>
    <p>After</p>
</div>

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

<div>
    <p>Before</p>
    <p>After</p>
</div>

Note how the inner content (which we blocked) 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:

<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" HTML attribute.

Here's an example:

<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>