As many of our customers begin to use FullStory, we often hear this kind of question:

Okay, so I have FullStory running on our site, but there’s a button in our UI that I’d love to understand more about. I’d like to know who clicks it, how often it has been clicked, and what the user experience looked like ahead of and following the click event. Is this possible?

I’ll be honest: This is a question we love… because getting to answer it makes us feel, well, like a hero! Okay. Let’s get into a simple example…

In the screenshot below, you’ll notice a blue arrow that I’ve called out with a circle. See it? Great. That’s the button we want to understand more about.

As you might have guessed, it’s a button that site visitors often click as part of FullStory’s signup process. And as a key moment in the life of a new customer, I’d like to know everything I can about the experience that led a visitor to click that button. FullStory helps you find events like this by automatically connecting events to the relevant elements via their CSS selectors. In other words, there’s no need for handwritten code to record events; it’s automatic. So what we need is the CSS selector that’s associated with the button.

In three simple steps, here’s how you can determine what that is:

  1. Navigate to the page where the button you care about is located.
  2. Right click on that button and select “Inspect Element”.[1]
  3. The associated CSS selector should be right in front of us at this point. Note what it’s labeled — in this case, it’s .signup-arrow.

Now, the fun begins as you use FullStory to instantly find people and sessions that match exactly what you’re looking for. In FullStory, click the magnifying glass icon, then Event Scope > Clicked. Finally, enter [2017 update] start typing the CSS selector we found earlier (.signup-arrow) into the OmniSearch bar and you’ll see the list of visitors shrink to those who match.[2]

2017 Update: this screenshot is what it looked like once upon a time—the gist is still the same today as it was in 2015 when this post was originally written (though it's much easier to do!).

Hit the play button on a user, lean back, and let FullStory help you get a more complete picture of your app’s user experience. If you want to save the search for later, just save it as a segment and instantly it will be made available for the rest of your team.

So that’s how to make CSS selectors work for you. Of course, after writing this up I can’t help but notice the many ways we can make this process a lot easier. We could do so much more! So while you give this a try, I’m going to draw up some improvements …

  1. All modern browsers have a native Inspect Element tool. Firefox and Chrome require no special setup. In Safari, go to Preferences and enable the Show Develop Menu in the Advanced tab. In Internet Explorer, simply press F12 to activate Developer Tools. Once Inspect Element has been enabled, you can hover your mouse over the element you want to examine and right-click to see the Inspect Element option. ↩︎

  2. Pro-tip: More often than not, you can just start typing and let FullStory’s autocomplete guide you directly to the CSS selector you’re looking for. ↩︎