What Is the Clicked Element Filter?

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.

Back to top

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.

Whether a click occurred or did not occur

When filtering Trends, Recordings, or Heatmaps, you can choose whether to filter for sessions where the click either did or did not occur.

When filtering Funnels, this option is fixed to occurred.

Button or link text

This filters sessions to include interactions on the visible text specifically on a button (<button>) or link (<a>) element. For example, 'Learn More' or 'Checkout'.

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. 

Page URL

See our How to Use Conditions in URL Filtering article for help using URLs as the filter condition, including using regex.

Click Apply to confirm and filter your session data.

Back to top

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. 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.

When to use the Events API

• • • You're triggering a Survey: The clicked element filter isn't available with Surveys.
    • 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).
    • If you're trying to track interactions on a nested element, you may want to use Events. When using the clicked element filter, Hotjar will only track button and a HTML elements. Since HTML can be nested, if Hotjar doesn't find the element you specified, our algorithm will move up to the next parent element and check there. If it can't be found within the next three parent elements, Hotjar won't be able to collect the data.

Back to top

document.querySelector('#my-button')
	.addEventListener('click', () => hj('event', 'clicked_cta'));

Back to top