Tips for Choosing CSS Selectors

Who can use this feature?
- Available with all plans.
- Requires an admin or architect role. 

This guide is intended to help you select the best CSS selector to use in Fullstory.

CSS selectors allow developers to define the look and feel of a website and can help you pinpoint an element you'd like to analyze. You can think of elements as the nouns of your site, like a button or a search field.

When analyzing an element, the first question to answer is whether it is for short-term use or needs to be implemented for long-term use. 

  • Choosing a selector for short-term use can be helpful for quick analysis or for elements that aren't clicked as often.
  • Typically, it's best to name the element for long-term use if you are going to be performing analyses more frequently. Additionally, the named element will appear as a more readable name when viewing  a Heatmap, Journey or Session Replay, rather than the technical selector.

Instructions

Short-Term Use

First, open up a session:

  1. Create a Metric that contains the element you are interested in. (e.g. Clicked text is Checkout)
  2. Watch a session from the Session Playlist.
  3. Get to a spot where the element is on the screen and pause the replay.

Then, find the selector:

  1. Click Page Insights.
  2. Click Inspect Mode.
  3. Click on the element you are interested in.
  4. Click Copy Selector.
  5. Paste the CSS selector into your analysis. (e.g. Clicked CSS selector is ...)

Note: The Optimized Selector, while more specfic than the Full Selector, will still typically be brittle. You can check out this help article to learn more about the differences between the Optimized Selector and the Full Selector. 

CSS Inspect Mode3.png

Long-Term Use

For long-term use, it's best to name an element and choose the most stable and shortest selector. Developers will change the site over time, and selectors can break easily if they're not stable. We have tools to make this easy for you.

  1. Go to Settings > Data Management - Elements to open Data Studio.
  2. Click Create Element.
  3. You can either paste the optimized selector you found in session replay or find the element using the search features in the top right. (e.g. by URL, text, etc.)
  4. Select the element you want to name.
  5. AI trim automatically chooses the most stable selector.
  6. Click the drop-down to view the 7-day volume and validate this is the correct selector.
  7. Enter a Name for the element.
  8. Click Save.

Was this article helpful?

Got Questions?

Get in touch with a Fullstory rep, ask the community or check out our developer documentation.