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

Available for the following Plan types:

FullStory Enterprise

FullStory Business

FullStory for Mobile Apps

FullStory Free

Available to the following User roles:

Admin

Architect

Standard


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!

Watched Elements help you determine if an element rendered on the page and if it was visible in the user’s viewport.

image4.png

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

 

Implementing Watched Elements

There are two ways to implement Watched Elements on your site:

  1. Create Watched Elements under Settings > Data Management > Elements.
  2. Create Watched Elements using Page Insights.

We’ll explore both methods below. But first, let’s cover a few need-to-knows. 

Important Notes

  • Watched Elements must be instrumented. 
  • Watched Elements are not retroactive. When you search for sessions where a Watched Element rendered or was visible, you’ll see results starting from the time of instrumentation.
  • Instrumenting Watched Elements that load frequently or across many pages can potentially impact site performance. Use Watched Elements judiciously. 
  • FullStory indexes up to 10 Watched Elements per second per page and up to 30 Watched Elements per minute per page. 
  • All events after 10 in a one-second time frame and 30 in a one-minute time frame will not be indexed or searchable. 
  • Watched Elements uses a browser technology called ResizeObserver. While ResizeObserver will catch a great many things, it does have some limitations.

Create Watched Elements Under Settings > Data Management > Elements

Head to Settings > Data Management > Elements to create, edit, and delete Elements in your account. 

To create a new Watched Element:

  1. Go to Settings > Data Management > Elements
  2. Click Create Element. 
  3. Add your element’s information:
  • Element Name: a word or two that describes the selector in language a human would understand. For example, "Error Message."
  • (Optional) Element Description: reasons why a Watched Element was added, an explanation of the chosen selector, or anything else you think might be helpful to include.
  • CSS or Application Element Selector: the selector you’d like to watch.
  • Under Data Capture Options ✅ the Watch this element box
  • Click Save

Screen Shot 2022-06-24 at 4.07.38 PM.png

If you ever need to archive an element for any reason, you can do so by navigating to Settings > Data Management > Elements, clicking the vertical ellipsis at the end of the element row and selecting Archive. When you archive an element, this removes it from the Elements table. It does not, however, prevent the element from being watched.

If at any point you wish to stop watching an element, you can navigate back to Settings > Data Management > Elements, click on the element you defined previously and uncheck the Watch this Element box. Then save your changes.

Create Watched Elements Using Page Insights

If you’re unsure of what specific selector you should use to instrument a Watched Element, creating the element using Page Insights is helpful. Using this method, you can use Inspect Mode to simply point and click on your desired element during session replay.

  1. While watching a session, navigate to Page Insights > Inspect Mode. 
  2. Click on the element you’d like to watch, then click Watch Element.
  3. Fill out the details and click Create Watched Element.
    Screen Recording 2022-06-24 at 04.13.58 PM.gif

Using Watched Elements

After you instrument Watched Elements, you can search for them using OmniSearch and analyze their impact on Conversions. 

Searching for Watched Elements

To find sessions where a Watched Element is rendered during the user’s session, create a search using the “Watched Element” event filter.

Screen Shot 2022-06-24 at 4.16.46 PM.png

This shows you sessions where the element rendered on the page, but may or may not have been visible in the user’s viewpoint. 

 

Time Duration Visible

To get more specific, use the “Refine event by…” icon to scope your search.

refine event by watched element.png

This helps you find sessions where the Watched Element loaded and was visible in the user’s viewport for a specific amount of time. 

 

Time Duration Rendered

Time Duration Rendered is the total time that a Watched Element was rendered on the page. The count starts when the element is inserted into the DOM and stops when it is removed.

Screen Shot 2022-06-24 at 4.19.47 PM.png

For example:

  • Time 0: Watched Element Rendered
  • Time 100: Watched Element Hidden 
  • Time 200: Watched Element Rendered 
  • Time 400: Watched Element Hidden

Now, let's break down the above example. The element is rendered when the page initially loads, at "Time 0". Then, 100 milliseconds later, the element is hidden. This means it is rendered for a total of 100ms at first. Next, at time 200ms after the page initially loaded, it is rendered again. Lastly, it is hidden at time 400ms after the initial page load.

This sequence of events results in two watched element events with a time rendered of 100ms and 200ms respectively.

Analyzing Watched Element Impact on Conversions 

Watched Elements can also be used as a signal for analysis in FullStory’s Conversions product. Learn more about Conversions and how to analyze the impact of Watched Elements here

Watched Element Rate Limits

FullStory limits the number of watched element events we produce to ensure we aren't producing too many per page or single point in time. To see if you've hit a rate limit, look for Watched Element API errors using FullStory search.  

Screen Shot 2022-06-24 at 4.20.26 PM.png

Rate limiting is most often caused by choosing a selector that is too broad, matches too many elements on the page, or gets removed and added to the DOM repeatedly. As such, please check your Watched Element selector rules to make sure they are as precise as possible. 


Need to get in touch with us?

The FullStory Team awaits your every question.

Ask the Community Technical Support