Comparing Overlays

Comparing two overlays side by side shows how zone behavior differs between pages, segments, or points in time. It's one of the fastest ways to spot outliers and validate whether a change moved the needle.

How to compare

Create and save the two overlays you want to compare, one at a time. Configure the page scope, metric, date range, and segment as part of creating each one.
Open one of the saved overlays.
Click Compare in the top bar.
Select the other overlay to compare against.

Both overlays open side by side. Each panel keeps its own controls, so you can adjust the metric, date range, segment, or screenshot on either side independently.

Set up the right comparison

A comparison only tells you something useful when you set up both sides intentionally. That doesn't always mean identical; sometimes you want a deliberate difference (apples to oranges), but the difference should be the one you're studying, not an accident.

Check these before you trust the numbers:

Set the right segment on each side. If you're comparing desktop to mobile, filter the left panel to desktop users and the right panel to mobile users. If you're comparing logged-in to logged-out, set the segment on each side to match. A mismatched segment is the most common reason a comparison looks off.
Match your screenshot to the segment. Each overlay's screenshot is the visual reference your zones sit on top of. For a mobile comparison, capture the screenshot at mobile width. Resize your browser before taking the screenshot so the layout reflects what mobile users actually saw.
Align your date ranges. Use the same time window on both sides unless you're running a deliberate before/after.
Use the same metric on both panels. Click rate and attractiveness rate tell different stories.

Name overlays for the compare picker

When you click Compare, you see a list of every saved overlay. Good names make it easy to find the right one. A useful pattern:

[Page or page group] - [Variant or detail] - [Device]

Examples:

PDP - SG Standard - Mobile
PDP - Les Paul Standard - Desktop
Checkout - Experiment Variant A
All PDPs - Last 30 days

Avoid generic names like Overlay 4 or Untitled; they make the picker hard to scan.

Common comparison patterns

Each pattern starts the same way: create one overlay for each side, save them, then compare.

Desktop and mobile. Same page, different device segment for each side. Capture each screenshot at the matching browser width.
High-converting and low-converting pages. For example, your best-performing PDP and one that's underperforming.
A/B experiment variants. One overlay for each variant. Filter each panel to users who saw that variant to see why one variant won at the zone level.
Page group and a specific page. Compare all PDPs together (a page group with a contains /product rule) against a single PDP. Useful for spotting whether one page is an outlier compared to the group.
Before and after a launch or redesign. Create one overlay before the change and another after, then compare to see how zone behavior shifted.
New and returning users. Same page, different audience segment for each side.
Paid and organic traffic. Same page, different acquisition segment for each side.
Two landing pages. For example, two campaign pages from the same launch.

You can share a comparison two ways:

Copy the URL from your browser's address bar. The URL reflects exactly what you're looking at, including both overlays.
Click Share on either panel, then choose Copy link to compare view. Same result, accessible from inside the product.

From the Share menu you can also download either panel as a CSV or PNG.

After you spot a difference

A comparison surfaces that something is different. The next step is figuring out why and deciding what to do about it.

Watch replays for the zones with the biggest delta. Click into a zone to open replays of users who interacted with it. Seeing the behavior in motion usually explains the number faster than any chart.
Turn the finding into your next test. A real difference is a hypothesis. Feed it into Web Experiment: change the layout, copy, or interaction on the weaker side, and test whether you can close the gap.

Was this helpful?