What is a zone in Contentsquare?

A zone is a defined area of a webpage or app screen that can be analyzed as a unit. It may represent a single element, such as a button or image, or a larger content area made up of related elements.

How does the zone selector work?

In the visual analysis interface, you choose a single or multi-zone mode, hover over the content, and select the highlighted element or elements. Contentsquare then uses that selection as the scope for the available zone metrics and analysis context.

What is the difference between single-zone and multi-zone selection?

Single-zone selection creates one zone at a time and is useful when you want to inspect one precise component. Multi-zone selection creates several zones together, which can speed up comparisons between similar elements. In the documented mobile workflow, multi-zone mode identifies zones on the same hierarchy level.

Can I use the zone selector from Session Replay?

Yes. Contentsquare documents a workflow for opening Zoning from the Session Replay player, creating single or multi zones, changing the displayed metric, and saving the zoning for a fuller analysis. The replay analysis context is automatically applied to the zoning in that workflow.

Does selecting a zone change the underlying website or app?

No. The selector is an analysis control, not a design or code change. It defines which area Contentsquare should measure; it does not move, resize, rewrite, or otherwise alter the element for visitors.

Can I use a zone selector for mobile apps?

Yes. Contentsquare provides a Zoning workflow for apps as well as web experiences. Because apps use screen and view hierarchies rather than a webpage DOM, the way data is attributed and aggregated can differ, so analysts should follow the app-specific guidance when creating zones.

How should I choose zones for a useful analysis?

Choose a zone that matches the decision you need to make. For a content question, select the content block or CTA; for a navigation question, select the relevant menu or link group; for a form question, select the field or form area. Keep comparable elements at a similar level of detail so the comparison is meaningful.

Is a zone selector the same as a CSS selector?

No. In this Contentsquare context, a zone selector is a visual in-product tool for selecting an area to analyze. A CSS selector is a developer syntax used to target elements in code. They can relate to the same page structure, but they serve different purposes.

What is a zone selector?

Definition

In Contentsquare, the zone selector is the visual part of Zoning Analysis that lets an analyst identify the page or screen area they want to study. A zone can be a button, banner, image, menu, content block, form field, or another interactive or static element. On a web page, Contentsquare uses the page structure to help identify selectable elements.

The selector supports single-zone and multi-zone modes. Single-zone mode is useful when one specific element needs a closer look. Multi-zone mode is useful when an analyst wants to select several comparable elements at once; in the documented app workflow, multi-zone selection identifies zones at the same hierarchy level.

Selecting a zone does not by itself prove that an element caused a conversion or drop-off. It defines the measurement area. The selected zone can then be examined with the metrics and analysis context available in the relevant Contentsquare workflow, including clicks or taps, exposure, conversion-related outcomes, and supporting session evidence.

What does that mean

Think of a web page or app screen as a room. The zone selector lets you draw a clear outline around the part of the room you want to study, such as a door, shelf, or sign, so you can see how people use that part.

Why this matters

Choosing the right zone turns a broad page view into a focused question: which element did people notice, use, ignore, or associate with an outcome? That helps Marketing and Ecommerce teams prioritize content, while Product and UX/UI teams can validate layouts and component decisions with behavioral evidence.

Use cases

Compare page elements before redesigning a page

Relevant for: UX/UI; Marketing

Pages often contain several banners, calls to action, navigation modules, or content blocks, but aggregate page metrics do not show which element deserves attention.

Use the zone selector to isolate comparable elements and review their interaction and outcome metrics side by side. This makes it easier to test whether a module is being seen, clicked, or associated with meaningful downstream behavior.

Teams can focus redesign and content decisions on the elements with the clearest opportunity, rather than changing the whole page based on assumptions.

See it in practice

The Kendra Scott customer story describes how zone-based heatmap analysis revealed that customers used the full page, not only the top or hamburger navigation, to move between categories. The insight informed new navigational components across the homepage and product listing pages.

Investigate a conversion blocker or underperforming call to action

Relevant for: Ecommerce; Product

A key call to action may be present on a page but receive little interaction because it is below the fold, visually unclear, replaced by an unexpected icon, or affected by a technical issue.

Select the call to action or surrounding component as a zone, inspect its relevant metrics, and connect the finding with session evidence when the workflow supports it. The focused view helps separate an element-level problem from a broader traffic or page problem.

Teams can prioritize a targeted fix, validate whether the element improves after the change, and connect the work to conversion or revenue outcomes.

Analyze repeated components across web and app experiences

Relevant for: Product; UX/UI

Responsive pages and mobile screens often repeat similar cards, tabs, controls, or navigation elements. Comparing them can be difficult when each interaction is buried in a larger screen view.

Use single-zone selection for a detailed inspection or multi-zone selection for comparable elements. For apps, take the documented hierarchy and aggregation behavior into account when selecting zones and interpreting the result.

Teams get a more consistent view of which components attract interaction and where a layout, hierarchy, or interaction pattern may need refinement.

How Contentsquare helps.

Heatmaps: Use zone-based heatmaps to see how clicks, taps, hovers, scrolls, exposure, conversion, and revenue outcomes vary across page elements.
Session Replay: Create single or multi zones from a replay workflow and connect an element-level question with what a user actually experienced.
Journeys: Place element behavior in journey context by examining what people do before and after important pages, interactions, or outcomes.

FAQs on zone selector

A zone is a defined area of a webpage or app screen that can be analyzed as a unit. It may represent a single element, such as a button or image, or a larger content area made up of related elements.

Contentsquare x Škoda