What are the best practices around defining elements?

  • 13 October 2022
  • 2 replies

How to determine what elements should be defined? Is there a faster way to define elements?

2 replies

Userlevel 3

Hey @katief! Thanks so much for reaching out!

Great question! I love that you are looking into managing and defining/naming your data as it helps to create structure and meaning. When it comes to data management, two main processes come to mind which are Named Elements + Defined Events. Named Elements let you assign your own names to complex elements like CSS selectors, where Defined Events let you assign your own names to user behavior events you track in FullStory such as common searches or complex URL’s.

To determine what to define, let’s say you had an ecommerce site that sells furniture and you want to view sessions where users interacted with an Add to Cart button on your “Outdoor Furniture” category. Because the site has multiple Add to Cart buttons, you can’t simply search for Add to Cart, but have to find the Add to Cart URL that includes /outdoor-furniture. With defined events, you can quickly and easily set up a Custom Event for the specific Add to Cart button you want to monitor. You name it “Add to Cart - Outdoor Furniture,” and now you can type that into OmniSearch and see data for that button. There’s more on this example and defined events here!

As for Named Elements, let’s say you want to view sessions where people clicked the sign in button thats located on your homepages header but finding that specific element is really difficult because it’s listed as a complex CSS selector. If you take this element and name it [Header] Sign in Button, similar to Defined Elements, it will make it much easier to locate through search and differentiate between other components of your site. 

You can define these events/elements through your settings or by quickly using inspect mode during a session replay. If you have events setup in other systems like Adobe Analytics, Segment, or Tealium, you can automatically pull those in via out of the box integrations or data layer capture!

I hope this helps @katief! Please let me know if you have any other questions! 😄


Userlevel 1

Hi @katief.  Here’s a general approach I’ve used in the past to name an element:

  1. Create a Metric for Clicked anything events.
  2. Then choose to Group by Element / CSS Selector.
  3. Then click the Dimensionality icon to see an itemized list.

The last step will show you either the CSS Selector or the more user-friendly Named Element.

The above Dashboard Card created from the Metric shows that while the Checkout Button (Cart)” element has been named, the first entry has not (because the raw selector is shown).  Given it’s the most clicked element on the list, it probably should be named.  I would then create a Named Element for button.cta-checkout with the name “Checkout Button (CTA)”.

You can then refine the first step to include a specific Visited URL or Page to locate other unnamed elements using the same approach.