Heatmap Creation & Analysis (Beta)
Heatmaps allow you to visualize interactions and identify painpoints with a specific webpage
This section outlines:
Creating Heatmaps
1. Create a Heatmap
- Click + New Study and select New Heatmap
- Name your Heatmap and add it to a specific study folder if desired.
Now, you can customize your Heatmap across three areas: targeting, replay, and capture settings.
2. Targeting
Determine when the Heatmap should be triggered by specifying a no-code event or URL. Additionally, you can segment by attributes, groups, or events and add filters such as waiting until a user visits the site multiple times.
- Click into Targeting module and add an Event or a URL trigger
- (Optional) Add additional filters to the "If user..." section like user attributes, groups or event history to ensure you are capturing the right users at the right time in their product experience.
3. Attaching a Replay
Record optional Sprig Replay clips with your study. Adding on Replay clips enables you to capture both breadth and depth of user behavior by seeing the aggregate view within the Heatmap and observing individual user sessions through Replays.
- (Optional) Add a Replay to capture clips alongside page interaction data
3. Configure Capture Settings
Capture Settings: Choose to capture data continuously until a certain number of page visits or a specific date.
- Specify Capture Settings configure how many captures you wish to capture
- Update Capture Options to capture each users once, or unlimited times
4. Launch
- Click Launch Heatmap to start collecting data instantly!
Heatmap Visualization
After the Heatmap collects data from at least one capture, it will display a visualization. Visualizations will be constructed from the most recent 5000 captures that match your filter criteria.
- Heatmaps aggregate clicks into color-coded engagement zones.
- Clickmaps show individual clicks.
- Scrollmaps show max scroll depth for a user session
Hover or click on elements to see the total number of clicks on that element and relevant Replay clips, if enabled. For example, if you want to know why users click the Help button, clicking on that area within the Heatmap and observing the attached Replays will help you uncover why users are seeking help.
Tip: Toggle across mobile web and desktop web to see interactions with responsive webpages on mobile device
Visualization Overview
- Time & Attribute Filters
- (Report Metadata) Page Name & URL that matches the backdrop in the report
- Visualization Controls: Heatmap, Scrollmap & Clickmap
- Change Background & Opacity Slider
- Device Toggles: Switch between Desktop & Mobile Web
- (Report Metadata) Captures & Clicks contained in the report based on applied filter criteria
- Heat Card: See additional data and Replay clips of users that interacted with a particular element on the page
- % of clicks & captures are calculated as a percent of the data represented in the report
Changing a Background
Not seeing a representative backdrop for your Heatmap? Change with the ⚙️ icon.
The change backdrop modal will render a few different representations of webpages that are captured in the Heatmap report suggested by Sprig's algorithm.
Note: Changing a backdrop will save the backdrop for all Sprig team members
AI Analysis for Results
At the top of the Heatmaps page, you'll find:
- Study Goal: Adding the goal for your Heatmap improves Sprig AI Analysis results by focusing your specific product question.
- AI Summary: Sprig AI automatically summarizes user behavior and highlights popular and "buried" areas of the heatmap for your review.
Product Feedback
For any bugs encountered or feature ideas for the Beta release of Heatmaps, please use the Intercom Bubble at the bottom right of your Sprig environment.
URL Targeting Tips
Wildcards (*) are supported in all URL targeting options where * is equivalent to “zero or more characters.” For example, exactly matching www.example.com/*/dashboard will include any URL that has zero or more characters in place of * but will not include www.example.com
Additional use cases include:
- Landing page targeting:
Exactly matches:www.example.com/products/heatmaps - URL parameter targeting:
Exactly matcheshttps://example.com/?utm_source=*
Contains:www.example.com/landing - Platform Observation
Product ‘logged in’ dashboard example
Exactly matches:www.example.com/*/welcome
Note: If you’d like to use a literal asterisk instead of a wildcard in URL targeting, please select “use regex” and add a backslash before the asterisk like so: "\*"
FAQs
Why do I see a different number of clicks and captures from one background to another?
Sprig builds Heatmaps based on interactions with HTML elements that are represented in the selected background.
For example, if the same button spans across two different background, then the same number of clicks for that particular button will display on both versions of the Heatmap. Conversely, if a particular button appears on one background but not the other, those clicks will not count towards the total.
Updated 13 days ago
