Prevent elements from being classified as Rage or Dead Clicks via Fullstory Settings or via code

Sometimes the results returned from Fullstory frustration signals like Rage Clicks or Dead Clicks can represent false positives. For example, you may have a calendar widget that requires a user to rapidly click through the months which results in the top two Rage Clicked being “next” and “previous”. Now Fullstory provides an easy, in-app option to ignore Rage Click and Dead Click elements from being classified as such, giving you more accurate data to take action on and removing noise from your search results.

In this article, you’ll find two ways to prevent elements from being registered as Rage or Dead Clicks.

• In Fullstory the app; without the help and time of your dev team!
  • Settings
  • Inspect Mode via Page Insights
• A code first approach
  • The code first approach will also allow you to disable tracking on Form Abandonment.

In-app options to ignore Rage and Dead Clicks

Please Note: Only Admins and Architects can configure Frustration Signal Settings 

Frustration signals can be configured in two different places in Fullstory; In Settings and using Inspect Mode via Page Insights. 

Configure In Settings

To update this in Settings, click on your company's name in the top left corner, click Settings, and navigate to Data Management > Elements.

Click on the element triggering false positives and check the appropriate boxes to prevent this element from being classified as a rage click or dead click. Note: If you don't see the element, click Add Element to set it up from scratch. 

Please note: Configuring these settings will only affect future sessions; it will not retroactively exclude elements from Fullstory sessions.

Once configured, moving forward this element and its descendants will no longer be captured as Rage Clicks or Dead Clicks. 

For example; 

Rage Clicks will be ignored on the main <div> element and all of its children, including:

• the <div> element;
• the <span> element;
• the text node("Peaches");
• the <p> element and its child <a> element.

<div class="fs-ignore-rage-clicks">

 <span>Mangocados</span>

 Peaches

 <p>Copyright 2017 <a href="/">The Fruit Shoppe</a></p>

</div>

Reconfiguring an element

If you'd like to change your settings at any time, uncheck the Rage Click and Dead Click settings on your element. Fullstory will start registering frustration signals for your element again at this time. 

Configuring using Inspect Mode

If you don’t already know the element you’d like to exclude, you can rely on Inspect Mode via Page Insights. Click on the element you'd like to exclude, then click Create or Edit Element to prevent it from being classified as a rage or dead click. 

→ Read more about Error Clicks & Dead Clicks in our Guide to Online Frustration »

Code first approach to ignoring Rage Clicks and Dead Clicks on an element

Adding the class fs-ignore-rage-clicks or fs-ignore-dead-clicks on an element will make Fullstory ignore Rage Clicks or Dead Clicks respectively on the element and the element's descendants. In the examples below, you’ll see a demonstration of  fs-ignore-rage-clicks . The same method will work for fs-ignore-dead-clicks.

Example 1

Rage Clicks will be ignored on this <div> element.

<div class="fs-ignore-rage-clicks"></div>

Example 2

Rage Clicks will be ignored on the main <div> element and all of its children, including:

• the <div> element;
• the <span> element;
• the text node("Peaches");
• the <p> element and its child <a> element.

<div class="fs-ignore-rage-clicks">

 <span>Mangocados</span>

 Peaches

 <p>Copyright 2017 <a href="/">The Fruit Shoppe</a></p>

</div>

Example 3

Rage Clicks on the <div> element containing the text ("Peaches") will be ignored. However, Rage Clicks on the <article> element, the two <p> elements, and the text inside the <p> elements won't be ignored. 

<article>

 <p>This is a true story.</p>

 <p>The events depicted took place in Minnesota in 2006.</p>

 <div class="fs-ignore-rage-clicks">Peaches</div>

</article>

Notes

• You can use fs-ignore-rage-clicks multiple times in the same HTML document to ignore multiple elements.
• It is case-sensitive, so FS-Ignore-Rage-Clicks will not have the desired effect.
• All of the above is true for fs-ignore-dead-clicks as well.

You can use the class together with other classes on the same element. In other words, the following combination of foo, fs-ignore-rage-clicks, and bar is okay to do:

<div class="foo fs-ignore-rage-clicks bar"></div>

It is okay to nest fs-ignore-rage-clicks classes, like in the following snippet. The overall effect is that Rage Clicks on the <article> element and its descendants will be ignored.

<article class="fs-ignore-rage-clicks">

 <div class="fs-ignore-rage-clicks">Peaches</div>

 <p>Dragon Fruit</p> 

</article>

Clicks on the <p> as well as clicks on the text "Peaches" will be ignored. (Though the fs-ignore-rage-clicks isn't required for Fullstory to ignore “Peaches” since it is nested inside the already excluded <article>).

Using fs-ignore-rage-clicks will only affect future sessions; it will not retroactively exclude elements from Rage Clicks in your Fullstory sessions.

Ignoring Form Abandon for a form

Adding the class fs-ignore-formabandon to a <form> element will disable tracking form abandonments on that form. 

Example 1

In the example below, adding the class on a form disables tracking form abandonment only for that particular form. Other forms on the page will continue to be tracked for form abandonment.

<form action="" method="post" class="fs-ignore-formabandon">

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

</form>

Example 2

In the example below, the code won't disable form abandonment for either of the two forms because the class is not directly on the <form> elements.

<body class="fs-ignore-formabandon">

 <form action="" method="post">

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

 </form>

 <form action="" method="post">

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

 </form>

</body>

Notes

• You can use fs-ignore-formabandon on multiple forms in the same HTML document to ignore multiple forms.
• It is case-sensitive, so FS-Ignore-FormAbandon will not have the desired effect.
• You can use the class with other classes on a form. In other words, the following is okay to do:

<form class="foo fs-ignore-formabandon bar"></form>

Using fs-ignore-formabandon will only affect future sessions; it will not retroactively exclude elements from Form Abandon in your Fullstory sessions.

Important note about using JavaScript

If you're not able to include the fs-ignore classes in the HTML itself, it's possible to run JavaScript on the page in order to include them when the page loads for the user. However, there's a caveat: it's possible the user could abandon the form or Rage Click before the JS fires and the class is added in which case Fullstory would still capture these as frustration events.

Because of this, the best practice is to add fs-ignore-formabandon and fs-ignore-rage-click directly to the element in the HTML to ensure the respective interactions are not captured as frustration events.