PROBLEM: You want to search your user interactions for people who clicked a specific button or element. You know what you’re supposed to do, it’s simple — get the element’s code and search on that code in FullStory.
So you go to your company’s website and look at the page that contains The Button. You want to segment your users and build a funnel based on who clicked it.
(To demonstrate, we’ll be using an example from our mock site The Fruit Shoppe. As seen below, we’re on the “Market” page and looking at the red “My Cart” button.)
To build your user-interaction-based search, all you need is the specific CSS code for The Button, and you know you can get it if you right-click the element, and hit “Inspect.”
Except right about here things get ugly. That’s because the Inspect tool in your browser (e.g. Google Chrome) is so comprehensive that it reveals all the glorious and/or intimidating code underneath — the HTML, the CSS, the Console.
(In our example, it even triggers the site’s responsive layout to rearrange itself.)
Scanning all this information for the specific element code you want can leave you in a pickle (Or a jam, in the case of our Fruit Shoppe example). It can also be a little ambiguous if the CSS code is long or complicated.
Assuming you find the code you want, you still have to grab just the right bit of text, copy it, and get it over into FullStory.
That’s a lot of steps, so FullStory built-in better way — a way that requires significantly less consternation and zero understanding of CSS.
Use FullStory’s Inspect Mode!
Using Inspect Mode to power search.
FullStory’s Page Insights has a built-in feature called Inspect Mode that lets you hover over elements you’re interested in, click them, and add them to a pre-existing search or start a new search.
You can take advantage of Inspect Mode by activating Page Insights from any session playback. Try it:
Step 1. Start with a session that contains the element in question— start with a session where you know the user visited the page containing the element in question, regardless of whether they clicked it or not. To do this, within FullStory search for the page URL and load any session from the results. Once you’re in playback, simply pause when the element you’re looking for is on-screen (Tip: hit spacebar!). In our example, we’re after the “My Cart” button.
Step 2. Go to Page Insights — it’s at the top right of the screen, next to Playback. Click to switch to the Page Insights view.
Step 3. Activate Inspect Mode! Once Inspect Mode is turned on, mouse over the page where the element you’re after is located. As you mouse, notice how different elements go in and out of focus. Click.
(For our Fruit Shoppe example, we mouse over to “My Cart.”)
You’ll instantly see metrics on that element and have options to search based on it — take a look to see what we mean:
Don’t miss this last bit.
Below the element stats on the right column, you can “Add to search” or “Create new search” — this is exactly what we were looking for. Now, we can either extend the existing search with the precise element info we needed or start from scratch based on this element code.
Both methods are great ways to drill deeper into your users based on what they are clicking.
What next? Go forth and inspect!
Take your segmenting and funnel building to the next level by using Inspect Mode to incorporate element-based user searches into your FullStory toolkit. And if you have a particularly interesting use-case for Inspect Mode, let us know.
Finally, if you’re looking for more ways to use the power of search in FullStory, take a look at our post on the Fastest Funnels on the Web!