This article discusses the exclusion of elements from recording via FullStory's traditional element blocklist approach. For information on leveraging our newer allowlist approach to managing recording rules please reference this document on Private by Default.
The privacy of your customer data is of utmost importance to FullStory and is a shared responsibility. FullStory ensures that your customer data is securely stored and accessible only to you. In addition, we provide you several tools to exclude sensitive customer information at scale throughout your site or app in perpetuity as it grows and changes. When data is excluded, it is never recorded and never leaves the user’s browser.
What follows are recommended best practices to ensure your company uses FullStory in compliance with our Acceptable Use Policy and with a privacy-first stance toward your end users.
There are two primary methods of excluding data from FullStory recording:
In addition to our primary means of excluding certain data from FullStory recording, this document also covers the following topics related to element exclusion:
- Record only with user consent
- Quick exclusion via Inspect Mode
- What do we exclude by default?
- Additional Details
- Technically, how do exclusions really work?
As a best practice solution to excluding data from recording, FullStory provides a simple CSS class name
.fs-exclude that can be appended to any class in your element library ensuring as your site grows and changes, the correct data is always excluded moving forward. Elements containing the
.fs-exclude class will be excluded from FullStory recordings.
Add the .fs-exclude class name to any element you want to exclude.
<input class="ccnum fs-exclude">
Now, in FullStory playback, this element would appear like this:
This means FullStory ignored the inner elements that appeared in this element at the time of recording and that data was never collected and never sent to FullStory. For a precise list of exactly which HTML attributes are excluded, see “A few details about Excluded Elements” below.
These exclusions include any child elements, so you can do things like this to block all data gathered by a group of form fields:
<form class="fs-exclude" id="payment"> <input class="ccnum"> <!-- etc --> </form>
Note: An older version of this functionality used the CSS class .fs-block instead of .fs-exclude. While .fs-block is no longer recommended, it is still supported and its functionality is the same as fs-exclude.
.fs-exclude directly into your element libraries is preferable, we also provide an in-app approach to data exclusion.
To manage these settings navigate to Settings > Privacy > Element Recording Rules. From here you can add CSS selectors to the recording rules list to block data from those HTML elements from ever being captured. Essentially, FullStory dynamically blocks data whenever someone visits a page containing a blocked element in much the same way
.fs-exclude is treated when FullStory encounters it on an element.
Input the CSS selector and optionally leave yourself a note to remember why this exclude rule is important.
To exclude a new element from being recorded simply click the "Create Rule" button shown here:
Clicking the "Create Rule" button will prompt you with the "Add excluded element" modal where you can define the element to be excluded. Adding the CSS selector to be excluded is the only requirement here, however, optionally you can add a Note describing why you are creating this rule as well as check the box for "Record with user consent."
The “Record with user consent” checkbox works together with the FS.consent() API (discussed further below) allowing you to record this element only after a user has given explicit consent (these are known as “consent-required elements”).
After you click "Save excluded element," your new rule will be displayed in the Element Recording Rules list pictured above.
Supported CSS Selectors
The following formats are supported for CSS selectors used in excluded elements:
#idselectors .classselectors parent>child
descendant combinator (Read more about descendants from MDN) tagname tagname[attribute] tagname[attribute=foo] tagname[attribute*=value] tagname[attribute^=value] tagname[attribute$=value] tagname[attribute~=value]
Respect the consent of your users with FS.consent
Is there a subset of data that you wish to share with FullStory, but only upon receiving consent from the end user? If so, we give you the power to respect the consent of users when determining what data should be sent to FullStory.
Quick exclusion via inspect mode
If you ever see something that should have been excluded, quick remediation is a top priority. It may not be feasible to make a code change to your site or add the element to your exclusion list quickly. In that case, admins have the ability to use Inspect Mode to select the element in the playback and click Modify recording rules to add the selected element to your Exclusion list in Settings.
If you ever have a need to remove a session or all sessions in a FullStory segment, please follow our instructions here.
We pre-populate the exclusions list with industry standard HTML. You'll want to double check how your company has coded these sensitive fields. If your input fields have different CSS naming conventions, you'll need to add them to the exclusions list.
If you're using the industry standards, we'll block the following default exclusions:
- Passwords with
- All credit card data with
- Credit card number
- Expiration date
- Security code
- Card type
- Hidden inputs with
You can find the exclusions list by clicking on Settings > Privacy.
Additional details about excluded content
When you encounter a field that’s been excluded while viewing a recording, you’ll see a gray box with cross-hatches over the field indicating it’s blocked, like in the image above.
Only the inner contents and some attributes (value, checked, src, data, alt) of excluded elements will be excluded. Any HTML attributes—except those listed above—of the excluded elements will still be recorded (though they won't be visible in the FullStory UI during playback). Take for example the following:
<div class="fs-exclude" data-secret="abracadabra" value=”abra”>Your secret is abracadabra</div>
In this example, the text Your secret is abracadabra will not be recorded. However, the text
<div class="fs-exclude" data-secret="abracadabra">will be recorded.
If you are storing sensitive data within HTML element attributes, you'll need to exclude the parent of the element to be excluded. (Note that there is not a way in pure CSS to specify the parent node of a selector).
How does excluding elements work? What are the technical details?
FullStory records the user interface (UI). The only method FullStory uses for recording the UI is by tracking the DOM structure and any changes to it. This means the recording script sends changes to the DOM structure to FullStory's servers, along with raw input events and metadata.
Element exclusion, therefore, operates at the DOM level. This means:
Excluded elements never leave your users' browsers or touch FullStory's servers.
All excluded elements are processed locally in the user's browser. When changes to the DOM structure are sent to FullStory's servers, excluded elements are left out.
Relatedly, some raw input events (e.g., key and click events) are also redacted when they relate to an excluded element.