Heatmap Creation (Beta)

Heatmaps allow you to visualize interactions and identify painpoints with a specific webpage

Create a Heatmap

  1. Click + New Study and select New Heatmap
  2. Name your Heatmap and add it to a specific study folder if desired.
  3. Click into Targeting module and add an Event or a URL trigger
    1. (Optional) Add additional filters like user attributes, groups or event history to ensure you are capturing the right users at the right time in their product experience.
  4. (Optional) Add a Replay to capture clips alongside page interaction data
  5. Specify Capture Settings configure how many captures you wish to capture
  6. Update Capture Options to capture each users once, or unlimited times
  7. Click Launch Heatmap!

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

Visualization Overview

  1. Time & Attribute Filters
  2. (Report Metadata) Page Name & URL that matches the backdrop in the report
  3. Visualization Controls: Heatmap, Scrollmap & Clickmap
  4. Change Background & Opacity Slider
  5. Device Toggles: Switch between Desktop & Mobile Web
  6. (Report Metadata) Captures & Clicks contained in the report based on applied filter criteria
  7. Heat Card: See additional data and Replay clips of users that interacted with a particular element on the page
    1. % 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

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 matches https://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 backlash 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.