Using Element Attributes in Search & Page Analytics

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 > Team Settings view. 

Jump to section:

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.

Screen_Shot_2020-10-07_at_1.21.02_PM.png

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.

Screen_Shot_2020-10-07_at_1.55.20_PM.png

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.

Allow List

The attributes that we have allow listed 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
 
data-category data-key  
data-index data-e2e  
data-tid data-auto  

 

Block List

We block certain very common attributes (shown in the table below) from being added since attributes are meant to identify important and unique elements around the site.

accept headers oncontextmenu onkeyup onscroll shape
align height oncuechange onload onseeked size
alt href ondblclick onloadeddata onseeking span
archive hreflang ondrag onloadedmetadata onselect src
bgcolor hspace ondragend onloadstart onshow style
border longdesc ondragenter onmousedown onsort tabindex
char marginheight ondragexit onmouseenter onstalled target
charoff marginwidth ondragleave onmouseleave onsubmit type
charset media ondragover onmousemove onsuspend usemap
cite name ondragstart onmouseout ontimeupdate valign
codebase onabort ondrop onmouseover ontoggle value
color onautocomplete ondurationchange onmouseup onvolumechange vspace
cols onautocompleteerror onemptied onmousewheel onwaiting width
colspan onblur onended onpause readonly  
compact oncancel onerror onplay rel  
cords oncanplay onfocus onplaying rev  
datetime oncanplaythrough oninput onprogress rows  
disabled onchange oninvalid onratechange rowspan  
face onclick onkeydown onreset scope  
frameborder onclose onkeypress onresize scrolling  

 

Configure pattern rule lists for attributes 

So you've added key Element Attributes to FullStory for Indexing - great! But maybe your autocomplete results are full of results you don't care about, and your Page Insights results could be more accurate.

We give you the power to help fine-tune FullStory's autocomplete results and page aggregation heuristics by allowlisting and blocklisting pattern rules for specific Element Attributes.

When you edit or create a new Element Attribute list item, 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.

Screen_Shot_2020-10-07_at_1.56.55_PM.png

 

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"

element_attribute_1.png

You will then have the option to search the clicked event by "CSS selector" 

element_attribute_2.png

Begin by searching for engagement on a specific element (w/o using class selectors) 

element_attribute_3.png

Searching for engagement on a specific element, containing specific text

element_attribute_4.png

Note - click the ellipses (...) to add specific text to your search. 

Searching for engagement categories, across multiple elements

element_attribute_5.png

 

Need to get in touch with us?

The FullStory Team awaits your every question.

Contact us