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!
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.
How to get Watched Elements
Watched Elements is currently available to customers on the FullStory Enterprise Edition. If you are interested in getting access to Watched Elements please reach out to email@example.com.
Note: Watched Elements is a feature that can only be added to or modified by Administrators on the FullStory account. Watched Elements can only be searched on by Standard users.
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.
- 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:
- Navigate to Settings > Recording
- Scroll down to the Watched Elements section (it’s probably at the very bottom)
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
- 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 here:
From Inspect Mode you can add elements to your Watched Elements list by point and click:
- Click on the element you want to add to your list
- Check the related selectors below the list to find the selector best matching your needs
- Click “Watch Element”
- 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.”
- 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).
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:
- In the OmniSearch box click “More…” under the Engagement subheading
- Select “Saw Element” to add a “Has seen” event filter to your search criteria
- With this filter you can choose to search by “Anything,” “Text is exactly,” or “CSS selector”
- “Anything” will match any Watched Elements
- “Text is exactly” will allow you to search for the exact text that appeared within the Watched Element
- “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.