Watched Elements - Can I search for CSS elements without a click event?

This feature is only available to Admin or Architect users on our FullStory Enterprise plans. Please contact your Account Executive or reach out to Support to learn more about FullStory Enterprise.

Have you ever wanted to search for sessions where a particular element has been displayed to a user, but they may not have interacted with it in any way? Now you can do just that!

image4.png

Error dialogs like these are great candidates for becoming watched elements.

 

FullStory’s Watched Elements allows you to instrument any element on your site or app (via its CSS selector) to be searchable as a result of having loaded on page. 

Note: An element having loaded on page doesn’t necessarily mean that it has ever entered the viewport.

Implementing Watched Elements

There are two ways to implement Watched Elements on your site using FullStory. The first, text-based, method of implementing Watched Elements is handled in Settings. The second, point-and-click, method is contained within FullStory’s Page Insights. We will explore both methods of implementing Watched Elements below, but first, let’s cover a few need-to-knows.

Important Notes

  • Only elements that have had their CSS selectors added to Watched Elements will be searchable for having loaded on page.
  • Implementing Watched Elements is not retroactive. So, past occurrences of elements loading on page do not become searchable when they are added to Watched Elements.
  • “Watching” elements that load frequently / on many pages can potentially impact site performance so please use Watched Elements judiciously.
  • Watched Elements uses a browser technology called ResizeObserver. While ResizeObserver will catch a great many things, it does have some limitations as documented here: https://drafts.csswg.org/resize-observer/#intro
  • Among them, note that it will not watch inlined elements, like span tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

Watched Elements via Settings

The main place to access information related to Watched Elements on your digital property is in Settings. Here you are able to view what elements were previously watched using this feature, delete previously watched elements’ CSS selectors or add new CSS selectors to be watched moving forward.

Navigating to Watched Elements

To find the Watched Elements area in settings:

  1. Navigate to Settings > Recording
  2. Scroll down to the Watched Elements section

Watched_Elements_screenshot.png

Adding or Removing Watched Elements

From the Watched Elements list in Settings, you can easily add or remove or edit CSS selectors:

  • To add a new selector click 'Create Watched Element'
    -   [Required] CSS or Application Element Selector: The selector you want FullStory to watch.
    -   [Optional] Label: A word or two that describes what the selector is that a human would
         understand. This can be something like 'Error Message'.
    -   [Optional] Notes: This can be reasons why something was added, extra documentation
        on 
    what the selector is, or anything else you think would be helpful for someone viewing the
        selector.
  • To remove a selector, simply click on the table row containing the element and click 'Remove Watched Element'.
  • To edit a Watched Element simply click into the element you wish to edit, make the desired changes in the modal, and click “Save Watched Element.”

Watched Elements via Page Insights

The second place that you can add CSS selectors to your list of Watched Elements is in Page Insights, using Inspect Mode. To access Inspect mode, first locate a user session containing the element(s) you want to add to Watched Elements. From session replay toggle into Page Insights using the button at the top of the page, then toggle into Inspect Mode using the button over to the right of the page. You can see both of these buttons highlighted in red below:

image2.png

From Inspect Mode you can add elements to your Watched Elements list by point and click:

  1. Click on the element you want to add to your list
  2. Check the related selectors below the list to find the selector best matching your needs
  3. Click “Watch Element”
  4. A browser pop up will warn you: “This will add ‘CSS Selector’ to the Watched Elements list in FullStory > Settings, so you can search for occurrences of it in the future.” 
  5. Click “OK”

In the example below, we are adding the CSS selector (marked by the red box) for the “MANGOCADOS” button by clicking the “Watch element” button (marked by the blue box).

image1.png

Using Watched Elements

Once you have Watched Elements instrumented on your site you will be able to search for these elements via OmniSearch as well as use them as a Signal for analysis in the FullStory Conversions product.

Searching for Watched Elements

To search for a Watched Element:

  1. Under Event Filters, select 'Watched elements' from the dropdown menu.
  2. With this filter you can choose to search by “Anything,” “Text is exactly,” or “CSS selector.”
    1. “Anything” will match any Watched Elements.
    2. “Text is exactly” will allow you to search for the exact text that appeared within the Watched Element. Please note: This is a case-sensitive search.
    3. “CSS Selector” will allow you to search by the selector of the Watched Element, regardless of its text content.

As a reminder, search results will not be retroactive. You’ll have to wait for new sessions where the selector has been seen by users before you are able to find matching search results. 

Watched Elements in Conversions

As mentioned above, Watched Elements can be used as a signal for analysis in FullStory’s Conversions product. To learn more about Conversions and how it works with Watched Elements, please check out this series on Conversions.

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us