Clickmaps

Overview

LogRocket provides clickmaps and heatmaps for each page of your application, accessible in two different ways. These show you the parts of your page that your users are clicking on most frequently. You can view heat maps for most clicked, most rage clicked, and most dead clicked elements.

Session Playback View

LogRocket provides clickmaps and heatmaps as part of session replay. These show you the parts of your page that your users are clicking on most frequently.

To view the click map or heat map for a specific page, you should be in the session playback part of the application. Find the page whose click map you would like to view and pause the playback. In the top-right corner, click the Heatmap tab.

From here, you can select the type of click map you would like to view by clicking on the Most Clicked Elements dropdown. LogRocket offers the ability to view click maps for most clicked elements, as well as most rage-clicked and most dead-clicked.

You will see an overlay showing the most clicked, rage-clicked, or dead-clicked elements on the page.

Filtering sessions

If you would like to drill into a specific click within the clickmap, hit the Add to filter button below the click you want to track. This will add the CSS selector to your existing filter and show sessions where the specific interaction took place.

Metrics View

You can also create a Heatmap within the Metrics tab.

In the 'Add Chart' pane, select 'Heatmap' as the Metric type and then define the URL that you want to see the heatmap for.

After you define the URL and add filters as desired, click 'Save Chart'.

You will be taken to the Heatmap detail view, where you'll see an overlay of the page that you selected alongside metadata about the element with the highest number of clicks. There is also a list of sessions below the heatmap, showing sessions in which a user has visited the page. This allows you to easily pair quantitative data from the heatmap alongside the qualitative data of seeing how users are actually interacting with the page.

Video walkthrough