> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replo.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Heatmaps
> See where visitors click, how far they scroll, and which page elements lead to sales, drawn on your published pages with Replo heatmaps.
Heatmaps show where visitors click on your pages, how far they scroll, and which elements lead to a sale. Each map is drawn on a picture of the page as visitors saw it, so you can see what works before you change it.
Success looks like this: you open a page, see which button earns the most, see where half your visitors stop scrolling, and know what to move or cut next.
## Before you begin
Heatmaps come from the **Replo pixel**, the same tracking that feeds [Insights](https://docs.replo.app/apps/insights.md). What you need depends on where the page lives:
* **Sites Replo publishes.** Nothing to set up. Replo adds the pixel to your published pages for you. [Publish](https://docs.replo.app/publishing.md) the page and visits start counting.
* **Another website.** Add the Replo pixel. When Heatmaps has no data for your site, it shows **Heatmaps need the Replo pixel**. Select **Set it up now** and pick **Paste it yourself** (paste the code just above `` on every page), **Tag Manager**, or **Developer**. The screen updates on its own when the first visit comes in.
* **Shopify store pages.** Connect Shopify. These pages show a list of clicked elements and their sales, not a drawn map. See [Shopify store pages](#shopify-store-pages).
If cookie consent is on for your site, the pixel loads only after a visitor allows analytics. Visitors who don't allow it aren't in your heatmaps.
## How much traffic you need
Replo has no minimum. A page shows up in Heatmaps once it has a click or scroll in the selected date range, and a map draws from its first recorded session.
One more thing has to happen before a map can draw: Replo needs a picture of the page. It captures one on a visit. Until then, the page shows **No picture of this page yet**. Select **Open the page** to visit it yourself and trigger the capture.
## Open a heatmap
You can open heatmaps from Insights, to compare pages across your site, or from the Site Builder, to see one page while you edit it.
### From Insights
**1. Open Insights**
Open **Insights** in the sidebar, or search for it with Cmd+K (Ctrl+K on Windows).
**2. Go to Heatmaps**
Select **Heatmaps**.
**3. Pick a page**
Choose a page from the list. Pages are ordered by sessions, busiest first, and each row shows its path, domain, sessions, and revenue. Use **Search pages** to find one by path.
**4. Pick a map**
Choose **Revenue**, **Clicks**, or **Scroll** above the page.
Heatmaps opens on your busiest page that has a picture. The list shows up to 100 pages.
### From the Site Builder
**1. Open the page**
Open the page in the [Site Builder](https://docs.replo.app/apps/website-builder.md).
**2. Open the Heatmap panel**
Open **Settings** in the top bar, then under **This page** choose **Heatmap**.
**3. Pick a map**
Choose **Revenue**, **Clicks**, or **Scroll**. The heat draws on the page preview.
The panel follows the preview's own device switch: set the preview to desktop, tablet, or mobile, and the heatmap shows visits from that device.
## Map types
Each map answers a different question. Pick the one that matches the decision you're making.
### Revenue map
Use it to decide **which elements to keep, move up, or copy elsewhere**. Each clicked element gets a tag with the sales made after a click on it. The 3 biggest earners are highlighted. The legend reads **Tags show sales made after a click on each element**.
A page opens on the Revenue map when it has made at least 1 sale in the range. Otherwise it opens on Clicks.
### Click map
Use it to decide **what visitors are trying to do**. Red marks the most clicks, blue the fewest. Look for:
* Heat on things that aren't links, like images or headlines. Visitors expect them to do something.
* A main button with little heat. It may be too low, too small, or easy to miss.
* Clicks spread across many links. The page may be offering too many choices.
### Scroll map
Use it to decide **what order the page should be in**. Red bands are where most sessions reach, blue where few do. Dashed lines mark where 75%, 50%, and 25% of visitors stop, labeled like **50% of visitors reach here**. On every map, a solid line marks **End of the first screen**: the median screen height of your visitors on that device.
If your offer or main button sits below the 50% line, half your visitors never see it. Move it up, or shorten what comes before it.
## Read the numbers
Above the element list, every page shows 4 totals for the selected filters: **Sessions**, **Clicks**, **Conversion rate**, and **Revenue**.
The **Elements** list ranks up to 20 clicked elements. Each row shows clicks, sessions, and **Revenue**: sales in sessions that clicked the element, after the click. In Insights the list is ordered by revenue. In the Site Builder panel it's ordered by revenue on the Revenue map and by clicks on the others. Hover a row to highlight that element on the page.
Select an element, in the list or on the page, to open its card:
| Group | Stat | What it means |
| - | - | - |
| Revenue | **Revenue** | Sales in sessions that clicked this, after the click |
| Revenue | **Per session** | Revenue divided by the sessions that clicked this |
| Revenue | **Avg. order** | Revenue divided by orders placed after the click |
| Conversion | **Conversion** | Sessions that clicked this and then bought |
| Conversion | **Add to cart** | Sessions that clicked this and then added to cart |
| Conversion | **Orders** | Orders placed after clicking this |
| Engagement | **Clicks** | Every click, repeats included |
| Engagement | **Click rate** | Share of the page's sessions that clicked this |
The card also shows rage clicks when there are any.
Revenue is shown in US dollars. Purchases in other currencies are converted at the purchase date.
## Filter a heatmap
### Date range
Choose **Last 7 days**, **Last 30 days**, or **Last 90 days**. Heatmaps open on the last 30 days. If a range has no data, Insights shows **No clicks in the last 30 days** (or 7) with a **Show last 90 days** button.
### Device
In Insights, choose **Desktop**, **Tablet**, or **Mobile** above the page. In the Site Builder, use the preview's device switch. Replo sorts each visit by the visitor's screen width: under 768 pixels is mobile, 768 to 1,023 is tablet, and 1,024 or wider is desktop.
Each device has its own map, so check mobile and desktop separately.
### Page version
Visits are grouped by the published version of the page they saw, so heat from one layout isn't mixed into another.
* **In Insights**, use the version menu above the page. Each option shows the version's date and session count. When a page has more than 1 version, the totals are labeled with the version they cover, like **Numbers for the Oct 28 version only**.
* **In the Site Builder**, use the version track at the top of the panel. It shows one bar per published version, oldest on the left, with **Draft** last. Taller bars had more visits. Select **All** to combine every version's visits.
A version with **No saved page** has no picture of its own, so its heat is drawn on your current draft. Clicks on elements that no longer exist in the draft are counted in a note, not drawn.
### Experiment variant
When a page's visits include 2 or more variants of an [experiment](https://docs.replo.app/features/experiments.md), the Site Builder panel adds a **Variants** table with each variant's **Sessions**, **Purchase rate**, and **Revenue**. Use the menu next to it to switch the map from **All visitors** to one variant, like **Variant B**.
A variant marked **Leads** has a higher purchase rate at 95% confidence. Switch between variants to compare where each one's visitors click and how far they scroll.
The variant split is in the Site Builder panel only. Heatmaps in Insights always show all visitors.
## Shopify store pages
Pages from a connected Shopify store are tagged **Clicks** in the page list (pages with a drawn map are tagged **Heatmap**). They show the page totals and a ranked list of clicked elements, each with the same card stats, but no picture and no scroll map. Links on your own domain are listed by their path. Other elements are listed by type, like **Button**, **Image**, or **Link**.
On a Shopify project with no click data yet, Heatmaps shows **Connect Shopify** until the store is connected.
## Troubleshooting
> [accordion] My page isn't in the list
>
> The page has no clicks or scroll data in the selected range. Select **Show last 90 days**, or check that the page is published and, for another website, that the Replo pixel is on every page.
> [accordion] The panel says there are no visits
>
> The Site Builder panel shows **No visits on mobile in the last 30 days** (with your device and range) when the current device has no sessions. Switch the preview to another device or widen the range.
> [accordion] I see a page list but no map
>
> The page has no picture yet. Select **Open the page** to visit it, then come back.
## Next steps
> [card] [Insights](https://docs.replo.app/apps/insights.md)
>
> Reports on traffic, revenue, and what converts.
> [card] [Act on Your Analytics](https://docs.replo.app/analytics.md)
>
> Which signals to check after a launch.
> [card] [Experiments](https://docs.replo.app/features/experiments.md)
>
> Test 2 versions of a page against each other.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.