Watch Elements in Fullstory

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!

Watching elements in Fullstory helps you determine if an element was rendered on the page and if it was visible in the user’s viewport.

Implementation

There are two ways to start watching elements on your site:

1. Via Settings > Data Management > Elements.
2. Via Page Insights.
   

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

Important Notes

• This function is only compatible with SDK version 1.31.0+.
• These elements must be instrumented. 
• These elements are not retroactive. When you search for sessions where this type of element is rendered or was visible, you’ll see results starting from the time of instrumentation.
• Instrumenting these types of elements that load frequently or across many pages can potentially impact site performance. Use them judiciously. 
• Fullstory indexes up to 10 elements you've chosen to watch per second per page and up to 30 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. 
• These elements use a browser technology called ResizeObserver. While ResizeObserver will catch a great many things, it does have some limitations.

Watch Elements via Settings

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

To start watching an element:

1. Go to Settings > Data Management > Elements
2. Click Create Element. 
3. Use Data Studio to configure your element. Be sure to select Watch this Element under Capture Options before you save. 

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. Archiving an element removes it from the Elements table; however, it does not prevent the element from being watched.

If 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.

Watch Elements Using Page Insights

If you're using a Fullstory Enterprise or Advanced plan, you can also create elements using Page Insights. 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 Edit Element.
3. Fill out the details and check the Watch this Element box.
4. Save your Element.
   

Application

After watching elements, you can search for them using OmniSearch and analyze their impact on Conversions. 

Search

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

Tip: You can also type "saw" into the event filter to locate this more easily.

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.

This helps you find sessions where the element you are watching 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 an element you are watching was rendered on the page. The count starts when the element is inserted into the DOM and stops when it is removed.

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.

Analysis and 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. 

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. Our current rate limits are 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.

To see if you've hit a rate limit, look for Watched Element API errors using Fullstory search.  

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. 

Another thing to keep in mind is that rate limits are counted against when the element is rendered on the page, regardless of whether or not the element is actually visible. 

FAQ

Will the platform option be visible for all Fullstory accounts, regardless if an account is using Fullstory for Mobile Apps?

Yes. All platform checkbox options (Web, iOS, and Android) will be visible in the element definition for any Fullstory account.

Are all Fullstory for Mobile Apps SDK versions capable of watching an element?

This function is only compatible with SDK version 1.31.0+.

Will existing elements have the platform element selected?

For accounts with Fullstory for Mobile Apps, Fullstory will not pre-select Web, iOS, or Android checkboxes. The checkboxes will be unselected and an Admin will be prompted to select the Web, iOS, or Android once opening the element definition.

For accounts without Fullstory for Mobile Apps, the web checkbox will be selected by default. iOS and Android checkboxes will also be displayed, but aren’t selectable or active.

If I have two independent legacy elements for web and iOS, will those get combined into one element to manage?

No. For legacy elements, Fullstory will not combine the two element definitions into one. The element definitions will remain separate.

Can I combine two separate elements into one existing element definition or one new element definition?

Yes. An Admin can combine two element definitions into one. If two element definitions are combined into one existing definition, the new selector added to the existing element definition will be considered “new” and will not be retroactive.

An example of this would be having one existing web element definition and one existing iOS element definition that you want to combine into one element definition. If you add the iOS element definition to the existing web element definition, the iOS selector added is considered a “new” definition and is not retroactive.

Is there a limit on the amount of elements being watched you can define?

There is no limit. However, the more you define, the more negative performance impact fs.js will have on your page.