Available on Observe or plans.
The clicked element filter refines your session data based on where users have clicked on your site, such as buttons or links, without needing to manually set up Hotjar Events in your code. You can refine this filter by specifying conditions such as the text of a clicked button or link, the CSS selector, or the page URL that the element exists on.
This article will cover:
- Common use cases for the clicked element filter
- How to use the clicked element filter
- When to use the clicked element filter instead of Events
- FAQs for the clicked element filter
Common use cases for the clicked element filter
The following are some example use cases for the clicked element filter:
Check the performance of different call-to-actions (CTAs) as part of an A/B test.
Apply the clicked element filter on Trends, with the button or link text condition being the text for each button variant. Then compare the number of sessions for each variant and click through to related recordings and heatmaps for further analysis of user behavior after having clicked a particular CTA.
Find reasons why users aren't completing their purchase.
From the Recordings page, apply the clicked element filter with three conditions: clicked did not occur, where button or link text contains Checkout, and where page URL contains /checkout. Watch some filtered recordings to understand what might be preventing users from checking out. Then view a heatmap with the same clicked element filter applied to the checkout page to identify what users are missing and what's capturing their attention instead.
Uncover opportunities to improve an onboarding flow.
To find ideas for encouraging new users to also invite colleagues, apply a clicked element filter on the Recordings page. Select the conditions: clicked did not occur, where page URL contains /onboarding, and where button or link text contains Invite team members. Watch recordings to understand why users are not inviting colleagues and generate some improvement ideas.
Make more informed decisions for a redesign.
Decisions to redesign a website and increase the number of demos booked can be informed by applying a clicked element filter to your collected session data. Add the conditions: clicked did not occur, where the button or link text contains Book a demo. Watch recordings to reveal what could be preventing users from moving forward with booking a demo. Apply the same clicked element filter to a scroll heatmap to understand how many users are not seeing the Book a demo CTA at the bottom of the page.
How to use the clicked element filter
Click the Add filter dropdown menu and select Clicked element.
Add any conditions to further refine the filter.
You can refine the clicked element filter by applying multiple conditions based on:
- Whether a click occurred or did not occur.
- The button or link text.
- The CSS selector - we only support CSS selectors as they appear when stored by Hotjar. This may differ from how CSS selectors appear when copying them from your live site. Because of this, when using the CSS selector filter, we recommend tracking HTML IDs, which are unique and contained within the CSS selector rather than the complete CSS selector.
- For example, rather than using the filter: CSS selector is x, we recommend using the filter CSS selector contains y (where 'y' would equal a unique HTML ID).
- We don't support CSS selector values that include whitespace. As a workaround, you can remove the whitespace using this Delete All Whitespace Characters website.
- The page URL - See our How to Use Conditions in URL Filtering article for help using URLs as the filter condition, including using regex.
What are CSS selectors?
CSS selectors define which elements on a page will receive a specific set of CSS rules (or styles). For example, the CSS selector .button will match any element on a page that has a class attribute of button.
Click Apply to confirm and filter your session data.
When to use the clicked element filter instead of Events
Hotjar's Events API enables you to send click events to Hotjar which can be used to filter session data or to target Surveys and Feedback widgets. The following points can help guide you on when to use the clicked element filter or the Events API with user clicks:
When to use the clicked element filter
- A/B testing that has a clear focus on whether an element is clicked or not (for example: button positioning or wording).
- Quickly validating an assumption or identifying possible issues relating to an element being clicked or not, without needing extra code or developer time.
- To inform redesigns or site improvements where the objective is to increase clicks on an element.
- Your site has an Observe Business or Scale plan.
When to use the Events API
- You're triggering a Survey or Feedback widget: The clicked element filter isn't available with Surveys and Feedback.
- More in-depth A/B testing that goes beyond only looking at whether a specific element is clicked or not (for example: user scrolling, time on page, shown an error, or if the A/B variant loads on the same URL as the control).
How come clicked element data is only available from July 5, 2022?
Tracking of clicked element filter data started on July 5, 2022 meaning that data prior to that date will not be included in your results when applying this filter. You can find more details about using the relative and custom date filter in our How Do I Filter Session Data article.
Does the clicked element filter work with Feedback and Surveys?
Currently, the filter is not available with Feedback and Surveys. You can let us know how the filter would be useful to have with Feedback and Surveys by clicking on the Contact us button below.
Our site is available in multiple languages, can we include all language variations within an applied filter?
We're unable to include multiple language variations in an applied filter. You can let us know how having this option would be beneficial by clicking on the Contact us button below.
Why am I not seeing any results based on my button/link text filter?
Your Site's suppression settings may be preventing Hotjar from seeing the text referenced in your filter. For example, if Hotjar is suppressing the button/link text, this means that Hotjar can't recognize the text because we are storing asterisks (****) instead of the button/link text itself.
A workaround for this is to use Hotjar Events to send click events to Hotjar, making them available in Hotjar's tools for filtering or triggering. Setting this up in your site's code could look similar to the example below:
document.querySelector('#my-button') .addEventListener('click', () => hj('event', 'clicked_cta'));
For more details on using Events to track click events, see our articles on What are Events, How to Set Up Events, and the Events API Reference.