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

In order to update this in Settings, click on your company's name in the top right corner, click Settings and click to the Recording tab on the left side panel.  

Scroll down to find Frustration Signal Settings. You’ll see all of the current elements that are configured to ignore Rage Clicks, Dead Clicks, or both. 

Getting_to_settings.png

settings.pngFrustration_signal_settings.png

 

Click Add Element to open the dialogue box in order to configure the following; 

  1. CSS or Application Element Selector which you’d like to be ignored
  2. Select if you’d like to prevent this from being recorded as a Rage Click, Dead Click, or both
  3. Provide a short description of what the element is or reason to ignore as a future reminder to your team

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

updated_ignore_.png

 

Once configured, moving forward this element and its descendants will no longer be recorded 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>

 

Removing an Existing Element Rule 

If you need to remove an existing element exclusion rule, you can click back into the element rule and click Remove Element. This element will now be recorded as a Dead or Rage Click moving forward.

Remove_Element.png

 

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. Grab the CSS for a selector you’d like to exclude and click Ignore in frustration signals

Ignore_in_Frustration_Signals.png

The CSS will be automatically filled in for you and you will need to complete the following:

  • Select if you’d like to prevent this from being recorded as a Rage Click, Dead Click, or both
  • Provide a short description of what the element is or reason to ignore.

Now that you have these settings configured, you can rely on more accurate data to determine areas of frustration on your site. 

→ 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 session recordings; 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 session recordings; 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 record 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 recorded as frustration events.

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us