Naming Elements in FullStory

Naming Elements lets you assign your own names to complex elements like CSS selectors. This helps make your FullStory data more meaningful and easy to understand. After you name an element, you can search for it by name when analyzing your data. 

Getting Started with Naming Elements

There are two places you can name an element in FullStory: Inspect Mode and Settings

Inspect Mode

1. While watching a session, go to Page Insights > Inspect Mode. 
2. Click on the element you'd like to name, then click Create Element.
   • For Elements that have already been created and defined, when clicking on these you will be presented with the Edit Element option.
3. Name your element and add a description. 
4. Choose which platform(s) you'd like to monitor the element selector on (Web, iOS and/or Android)
5. Click "or" to assign the same name to multiple selectors.
6. Select any Element Capture Options that you'd like to apply to this element.
7. Save your Element.

Settings

1. Go to Settings > Data Management > Elements.
2. Click "Create Element." 
3. Name your element and add a description. 
4. Add the selector you'd like to name.
   • Choose which platform(s) you'd like to monitor the element selector on (Web, iOS or Android)
5. Click "or" to assign the same name to multiple selectors.
6. Select any Element Capture Options that you'd like to apply to this element
   • "Watch this Element" helps you determine if an element rendered on the page and if it was visible in the user’s viewport. Click here to learn more about Watched Elements.
   • If you'd like this element to be excluded from being classified as a Rage Click or Dead Click, check those boxes accordingly.
7. Click "Save."

Search

After you name your element, you can search for it when building segments, funnels, metrics, journeys and dashboards. Use an Element filter to see a list of all elements in your account. 

FAQ

Are Elements that have been named retroactive?
Yes! After you create or update an element, you can use it to search through all past and future FullStory data. However, elements that have been named are not retroactive in Heatmaps, Journeys, Segments, Dimensionality Cards or Data Quality Monitoring. While searches for elements that have been named apply to sessions retroactively, the event log within those sessions is not updated in sessions that were captured prior to the element being created.

Are Watched Elements retroactive?
No. Read more on this here.

Will FullStory let me know if my site's CSS changes and my element no longer makes sense?
Yes - Data Quality Monitoring helps you identify data objects that may have configuration issues.

Do elements that have been named work with webhooks?
No, elements that have been named don't work with FullStory webhooks or other webhook-based integrations like Zapier. Please use custom events defined via the FullStory JavaScript API for those integrations. 

What's the difference between defining events and naming elements?
Naming elements apply to CSS selectors only whereas defining events allow you to assign a name to specific user behavior. You can reference an element when defining an event (for example, clicked element “Add to Cart” when the Visited URL starts with /category-listing”). 

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.

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.

How do I group elements together that have slightly varying CSS Selectors?

You can accomplish this by naming an element. When you name an element, it will take precedence for aggregations in Page Insights/Heatmaps. This creates an accurate count insight of the heatmap for all clicks on the elements you are interested in tracking.