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

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 (Beta) 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 (Beta) is currently available to customers on the FullStory Enterprise Edition. If you are interested in getting access to Watched Elements please reach out to support@fullstory.com.

NOTE: Watched Elements is a feature only accessible to Administrators on the FullStory account.

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.
  • As Watched Elements is in beta, the UX / UI has yet to be fully optimized.

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 (it’s probably at the very bottom)

image3.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 to the list simply paste the selector on its own line and click “Save Watched Elements.”
  • To remove a selector, simply delete it from the list and click “Save Watched Elements.”
  • To edit a CSS selector simply add or remove the necessary characters from the selector and click “Save Watched Elements.”

Be sure that all CSS selectors begin on their own line and that you click ”Save Watched Elements!”

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:

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. In the OmniSearch box click “More…” under the Engagement subheading
  2. Select “Saw Element” to add a “Has seen” event filter to your search criteria
  3. 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
    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