Using Element Attributes in Search & Page Analytics (Beta)

As mentioned in our introduction to FullStory's Babel React Plugin, websites built in React have dynamically generated classes such as class="Azc44GrPgUQwaMdsxT21g RSzhz6gmPB1iAe-9l8gXJ". Element Attributes is another feature to help you get value out of FullStory, no matter how your site is set up.

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 are constantly changing, you lose this search functionality.

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-08-06_at_11.22.02_AM.png

We added a general list (shown in grey text) of attributes already indexed in search, and you can add your own (shown in blue text).

Screen_Shot_2020-08-06_at_11.26.25_AM.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.

The attributes that we have allow listed by default are listed here.

Allow List:

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  

 

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.

Block List:

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 

 

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