A note on element attributes
Admins and Architects are the only team seats that have permissions to add new element attributes. If you are a Standard user, you'll need assistance from one of these team seats in your Settings > Account Management > Users view.
Jump to section:
- When to Use Element Attributes for Indexing
- How Element Attributes work in Fullstory
- Index List
- Do Not Index List
- Configure pattern rule lists for attributes
- Searching using data-attributes
If you want to have Element Attributes available in your mobile application, you can use the API call listed here for the elements you want attributes on.
When to Use Element Attributes for Indexing
You might want to use Fullstory's Element Attributes feature if:
- Your site is built on React, and you have no stable class names to use in search
- Your site uses Fullstory Private by Default obscuring the text on all buttons
- You've implemented Fullstory's Babel React Plugin to automatically decorate selectors on your website with useful attributes
- Your engineering team already uses data-* and aria-* attributes for a testing framework
One of the most powerful experiences in Fullstory is searching for click events on selectors, such as everyone who clicked on CSS selector class="btn btn-sm
btn-primary cta-add-to-cart". If your site is built on React and the class names instead look like class="Azc44GrPgUQwaMdsxT21g
RSzhz6gmPB1iAe-9l8gXJ" and are constantly changing, you lose this search functionality.
However, if your CSS selectors also are styled with some useful data-attributes, like data-component="photo-carousel", aria-label="search", or whatever your engineering team decides to add - you can get access to Fullstory's powerful search functionality again!
How Element Attributes work in Fullstory
The Element Attribute feature allows you to take advantage of more stable attributes on your selectors, even while the class names constantly change. You can select key Element Attributes to index so that you can search for future sessions where users interacted with those elements with the element attribute in question.
We added a general list (shown in grey text) of attributes already indexed in search, such as data-component data-test and aria-labelledby, and you can add your own attributes that are important to your site by clicking "Create attribute".
Note: Element Attributes are not retroactive. When you search for sessions using Element Attributes, you'll see results starting from the time of instrumentation.
We recommend that you define attributes that do not contain solely unique values (like a UUID). In the future Element Attributes will be used for more advanced Page Analytics and attributes with unique values can lead to confusingly low numbers for aggregate click counts.
You should add attributes that are actually useful and meaningful - e.g. data-src may decorate every product on your product detail page, but if the output is a random string that isn't useful, then data-src isn't a good attribute to add for indexing.
Index List
The attributes that we index by default are listed here.
| data-wa-link | data-selector | data-element |
| data-ref | data-test | data-source-file |
| data-test-id | data-auid | aria-label |
| data-testid | data-hook | aria-labelledby |
| data-automation | data-track | aria-describedby |
| data-qa | data-page | role |
| data-component |
data-current-page
|
id |
| data-category | data-key | class |
| data-index | data-e2e | |
| data-tid | data-auto |
The following attributes are conditionally allowed.
| Attribute | Conditionally Allowed Tags |
| type | [“button”, “input”] |
| name | [“button”, “fieldset”, “form”, “input”, “output”, “select”, “textarea”] |
| href | [“a”] |
| for |
[“label”] |
Do Not Index List
We don't index certain very common attributes (shown in the table below) since attributes are meant to identify important and unique elements around the site.
| media | nonce | src |
Configure pattern rule lists for attributes
So you've identified a new Element Attribute that you'd like to add to Fullstory for Indexing - great!
When you edit or create a new Element Attribute, a pattern rule is required to index the attribute value. Click "Add Rule" to input the specific patterns you'd like to include or exclude. You can use wildcard * to specify a greater range of patterns.
-
block*containerandallowmetrics-containerwill not work.-
- The block of the wildcarded term takes precedence over the more specific allowlisted term.
-
-
allow*containerandblockmetrics-containerwill work.
Note: By default, we will not index attributes that include numbers or text not made up exclusively of common English words or abbreviations. Those patterns would have to be additionally allowlisted for that attribute. You can edit our default id Element Attribute with a wildcard to index ids such as lnkExample or exampleCard2.
Searching using data-attributes
Once you've added a few data-attributes, and new sessions have rolled in containing the elements you'd like to search for, you can start building some segments. When searching in Fullstory you'll want to toggle the "Any activity" drop down and select "Clicked." You will then have the option to search the clicked event by "CSS selector" where you can search for engagement on a specific element without using class selectors.
Note: Data attributes are only searchable if they contain a given value. For example, [data-attribute] alone would not be searchable. Rather, you would need to enter [data-attribute="yourvaluehere"] when searching to yield results. If you'd like to explore more operators for data attribute searches, check out this guide for more tips.
Refine your search to find engagement on a specific element containing specific text.
And use data categories to search for engagement categories across multiple elements.