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 stored by Hotjar, and this may differ from how selectors appear when copying them from your live site. If you want to use CSS selectors from your site, you'll have better results tracking HTML IDs, which are unique and so are easier to filter. We also currently don't support CSS selectors 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).
- Your site has an Observe Plus subscription: The Events API is available on Plus and the clicked element filter requires a Business or Scale plan.
FAQs for the clicked element filter
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.