Screenshots in Zoning Analysis

A screenshot is a static image of your website or app at a specific point in time. In Zoning Analysis, screenshots act as the visual foundation for your heatmaps. They let you see exactly what your page looked like when users interacted with it, and overlay behavioral data on top.

Your Screenshot Library stores all the screenshots captured for your site, so you can reuse them across different Zonings and compare different page versions over time.
Capture a new screenshot.png

What is a screenshot?

A screenshot captures your live website or app at a given moment and stores it in your Screenshot Library. When you open a Zoning in Contentsquare, the screenshot recreates how your page looked at that time so you can analyze user behavior in context.

Within a single Zoning, you can work with multiple screenshots, for example, to compare different versions of a page, or to analyze dynamic elements like an open menu or an expanded search bar.

How to capture a screenshot?

There are 3 ways to capture a screenshot in Contentsquare.

From a live page (Live Capture)

Use this option to capture your current, live website, including dynamic elements like open menus or active search bars.

In an existing Zoning:

Click the screenshot icon in the top-right corner of your Zoning.
Click Add a new screenshot.
Click Add a new screenshot, then Take a new screenshot.
Your live page opens in a new window.
Click the capture button (or use the keyboard shortcut) to take the screenshot.
Click Save to Contentsquare.

Your new screenshot is automatically applied to your Zoning. You can now create zones and analyze the content within it.

To capture a dynamic element (like an open dropdown menu), make sure you activate it on the page before clicking the capture button.

From a past version of your page (Retroactive screenshot)

Want to analyze how your page looked last month, or even further back? Retroactive screenshots pull a snapshot from a past version of your site using Session Replay data, so you don't need to have taken a screenshot at the time.

They are particularly useful when comparing old and new page designs, or when running A/B tests on historical data. The number of days you can go back depends on your Session Replay data retention period.

To create a Zoning using a retroactive screenshot:

In an existing Zoning:

Click the screenshot icon in the top-right corner of your Zoning.
Select Add a new screenshot.
Click View more screenshots to open the Screenshot Library.

In a new Zoning:

From the main menu, click New Zoning, then Select a page or page group.
Select the page you want to analyze, set your date range, and click Apply.
On the next screen, click View more screenshots to open the Screenshot Library.

Once you're in the library, the steps are the same either way (continue with the shared steps below).

Browse the library. Hover over a thumbnail and click Select to choose it.
Click Continue to use that screenshot in your analysis.
Click Save analysis.

Filtering screenshots in the library: You can narrow down your search by:

Adjusting your date range, device, or segment
Changing the scroll level:useful if your page loads content as you scroll down (for example, images that only appear when you reach them)
Searching by page URL

Can't find a retroactive screenshot? Try changing the page scroll level from Full page scrolled to Any scroll level. This will return more results.

change screenshot scroll level.png

From a Session Replay

Requires Pro or Enterprise plans. Don't see the camera icon? This feature made need to be enabled on your project. Please contact your Customer Success Manager.

In Session Replay, open the replay you want to work with.
Hover over the replay timeline and click the camera icon (Take a new screenshot).
In the side panel that opens, click Save Snapshot.
Choose where to save it:
- New Zoning: name your Zoning and click Save.
- Existing Zoning: select the Zoning from the dropdown and click Save.
A new tab will open, taking you directly to your Zoning with the screenshot applied.

How to use the Screenshot library

Your Screenshot Library is the central place to view, manage, and reuse screenshots across your Zonings.

From inside a Zoning, click the screenshot icon to:

Browse all screenshots available for that Zoning
Switch the screenshot you're currently analyzing
Rename or delete screenshots you no longer need

Rename a screenshot.png

Note

Deleting a screenshot: If a screenshot is used in multiple Zonings, deleting it will remove it from all of them. Contentsquare will let you know if this is the case before you confirm.

How to choose the right screenshot

For accurate Zoning results, the screenshot you use should match the version of your page over the period you're analyzing.

Why this matters: Changes to your website, even ones that aren't visible to your visitors, can affect how zones are mapped and lead to misleading results. For example:

Visible change: a new banner is added to the top of the page
Invisible change: an element's name is updated in the page code behind the scenes

Best practice

Always make sure your screenshot date matches the date range you've set for your analysis (sometimes called the Analysis Context). This is the time period Contentsquare uses to calculate the behavioral data shown in your Zoning.

Contentsquare automatically detects mismatches. If your screenshot was taken outside your analysis date range, you'll see a small colored dot next the screenshot date. Click on the screenshot to see the mismatch message.

Message when screenshot date does not match.png

If you see a mismatch, you can either:

Change the date range in your analysis settings to match the screenshot, or
Select a different screenshot that aligns with the date range you want to analyze.

How screenshot assets are stored and displayed

When Contentsquare captures a screenshot of your page, it also saves the visual elements that make up that page, such as images and styling , in a secure cache. These saved assets are what you see when you open a screenshot in Zoning Analysis.

Here's how it works when you open a screenshot:

Contentsquare looks for the page's visual assets in its cache.
If the assets are found, they load immediately and the screenshot displays as expected.
If the assets are no longer in the cache (because the 390-day storage period has passed), Contentsquare tries to reload them from your live website.
If those assets have since been deleted or renamed on your live website, they can no longer be retrieved, and the screenshot will display with missing visual elements.

How long are assets stored? Contentsquare stores your screenshot's visual assets for 390 days from the date the screenshot was captured.

Seeing missing images in an older screenshot? If your screenshot is more than 390 days old, this is likely why. After 390 days, Contentsquare tries to reload your page's visuals from your live website. If those files have since been removed or renamed on your site, they won't display in the screenshot — and unfortunately can't be recovered. If this is affecting your analysis, the best fix is to capture a fresh screenshot of the current page.

For important Zonings, consider refreshing the screenshot before the 390-day period expires to keep it looking accurate.

help center results

technical documentation

Articles in this section