How to hide page elements from CUX

You can hide some page elements from the CUX script. When you do this, the hidden part is ignored and not shown in visit recordings or heatmaps. This is useful when you want to make sure sensitive data provided by your visitors is never recorded. You can hide static and dynamic (loaded by Ajax loader) page elements.

Modify HTML

To hide an element from CUX, you need to modify your page HTML code. You can add the data-cux-exclude attribute to any HTML element. When the CUX script finds an element containing the exclude attribute, it replaces it with an empty DIV element. The styles for the hidden elements are retained. Thanks to this, the page rendered in CUX player or heatmaps won't be destroyed.

Note that the operation of the CUX script affects only the data that goes to our database. The masking operation is transparent to your visitors. They can use and see all the elements freely.

It's good to consider the elements you want to hide carefully. For example, if you're going to protect data from forms, mark the input fields with the data-cux-exclude attribute. In this way, the CUX script can still record form submissions. You can then use these user actions as events to build waterfalls. Unmasked actions also appear on heatmaps.

Example. Hiding a contact form elements

Let's say you have a contact form on your page that consists of 2 fields (name and message) and a button.

Your visitors enter their names and messages there. You don't want either of these to appear in CUX. Add the data-cux-exclude attribute to the name and text area elements. The code sample shows you where to put the exclude parameter.

<div class="container">
  <form action="action_page.php">

    <label for="fname">Name</label>
    <input type="text" id="name" name="name" placeholder="What's your name..." data-cux-exclude>

    <label for="subject">Message</label>
    <textarea id="subject" name="message" placeholder="Tell us something..." style="height:200px" data-cux-exclude></textarea>

    <input type="submit" value="Submit">

  </form>
</div>

Thanks to this name and message fields are hidden, but you cans till track clicks on the "Submit" button.