A zone is a colorful data overlay used inside a zoning to analyze how users interact with your content. The Zoning Analysis uses the HTML structure of your site to identify your page's content, making it possible for you to create zones during your analysis. Want to know more about zones?
The number shown on a zone represents the metric result for the content inside, e.g. 'Click rate'.
How to create zones
1. To create new zones, or edit existing ones, click on the 'Edit zones' button:
2. Select the zone creation option fitting your use case:
- Single zone mode: Creates one zone at a time. Click on the 'Single' button
- Multi-zone mode: Creates multiple zones at a time.
- Smart Zone Selector: Identifies and creates zones for you based on a selected use case.
The smart zone selector helps you identify and prioritize zones on your screen. It highlights which zones have the highest amount of a certain metric, e.g. Tap rate or Revenue.
1. Select the use case that best matches your analysis needs
- Top tap rate (screenview Level): Identify which of your zones have the highest session level tap rate
- Top tap recurrence: Surface which of your zones have the highest tap recurrence.
- Top Revenue: See which zones are generating the most revenue.
2. Create your zones
Once you have selected your use case, the results appear in a list view inside the side panel, naming the zones matching the use case in falling order. The zones will be automatically highlighted inside your zoning. You can either create all identified zones at once or one at a time, to analyze them further in your zoning:
3. Hover over the content where you want to create a zone/ zones. Click inside the yellow frame that appears, and your zone(s) will be created.
How to delete a zone
You can either remove one zone at a time, or all zones at once:
- One at a time: Hover the zone you want to remove and click the 'eye' icon
- All zones at once: Use the more menu next to the compare button, and click 'Erase all zones'.
How data is aggregated in the zoning
Inside the Zoning Analysis, a zone can be either a parent or a child. A child zone is a zone that doesn’t have any other zone nested inside itself, e.g. a menu entry. A parent zone is a zone that does have zones nested within it, e.g. a drop-down menu.
The Zoning Analysis uses a surface-based method. This means that parent and child elements are identified via what visually appears as the parent and child element inside the zoning.
When a parent zone is analyzed, the data from all of its child zones is aggregated and displayed as the total metric result of the parent zone.
Example: First the four child zones are analyzed, and later the parent zone with the child zones nested inside. When analyzing the parent zones, the data of the four child zones is aggregated.
Surfaced based aggregation method
The surface-based aggregation method connects a parent and child zone by its visual hierarchy. This means that a zone is considered a child zone if it visually appears to be nested inside another zone inside your zoning, e.g. a menu entry inside a menu.
Surface-based method vs View hierarchy method
Previously, the aggregation of data via parent and child zones was done based on the code structure of your site: the ‘View hierarchy’. This hierarchy can be described using boxes: Your screen’s elements are built as ‘boxes’ and ‘boxes within boxes’ inside the code. Using this hierarchy, the Zoning Analysis identified the parent and child elements based on their hierarchy, and whether a box was nested inside another box.
However, the hierarchy of an app’s code may not always correspond to what the visual hierarchy looks like. This means that two elements that did not visually appear as linked were child/parent zones and vice versa, making the analysis more complicated.
The goal is to simplify the analysis process with the new surface-based method, by relying on the visual hierarchy.
How data is attributed to the correct zone
Contentsquare attributes user interactions, such as taps, with the correct screen element using targets. Targets are generated for each element based on that element’s HTML path (called Target Element View Path in Contentsquare), making each one unique.
These unique targets act as a link between user interaction data (e.g. taps) and a site element (e.g. a banner).
Example:
- A banner has a target generated from its HTML path.
- A user taps on that banner.
- The tap and the banner are associated via the target.
- Contentsquare displays accurate tap rates for the banner.
Note: It is possible that two or more zones share the same target, meaning the data displays the same for each. Therefore, if you find two or more zones where the data appears duplicated, this is due to their targets not being unique.
Reliable targets
Reliable targets are used to attach events, and can be moved within the view. (You can move the element anywhere on the screen, if it has this reliable target it will take all the event)
You will need to implement at least one of the three following identifiers on your key zones.
- accessibilityIdentifier
- restorationIdentifier
- Tags