This article will take you through everything you need to know to set up your Zoning for your apps.
How Zoning creation works
A zoning is a collection of static screenshots of your app. A screenshot capture your live app at a given time and saves it to your Screenshot Library. This allows you to analyze past versions that are not longer live, or dynamic elements on a screen like a drop-down menu.
A zoning is created by using new screenshots or using existing ones from your Library. Once you've created a zoning, you then create "zones" – also known as colorful data overlays, to analyze how users interact with your content.
How to create a zoning
Before you start
Make sure in-app features are activated, otherwise, you won't be able to capture screenshots. See how to enable in-app feature in this article.
Create a zoning
1. From the Zoning Analysis section, click '+ New Zoning',
2. Then click 'Select screen' and define which screen you want to analyze, and click 'Apply'.
You can choose between:
- 'Screen group on the fly': analyze data from a specific screen or multiple screens with specific conditions,
- or 'All screen groups': analyze a screen group from an existing mapping.
3. Refine your Zoning Analysis by choosing which segment you want to analyze, then click 'Continue'.
Note
If any zoning already exist for the screen or screen group you selected, these will be listed for you to analyze from directly (depending on your permissions).
4. You can now choose from existing screenshots taken from your app (select one of the following, and the analysis will automatically open) or choose new screenshots by clicking on 'View more screenshots', see the following article if you want to add new screenshots to your Zoning.
5. You are redirected to your Analysis where you can start your analysis.
How to create and edit zones
Zones on your analysis are the colorful data shown on your screen.
The number shown on a zone represents the metric result for the content inside, e.g. 'Tap rate'.
Here are the steps to follow to create new zones:
- If you need to activate edit mode during your analysis, you can do so by clicking the 'Edit zones' button.
- Select your zoning creation mode from the drop-down menu. You can create either one or multiple zones at a time.
- Single zone mode: Click on the 'Single' button, then hover over the content where you want to create a zone. Click inside the colored frame that appears. Your zone will be created.
- Multi-zone mode: Click on the 'Multi' button and hover over your content. Click inside the colored frame that appears and your zones will be created.
Note
Multi-zone mode only identifies zones on the same hierarchy level. Also note that when using the Multi-zone selector, this is based on the Dom-hierarchy (instead of the surfaced based method).
- Top zones (ex Smart Zone): Click on the 'Top zones' button in the right side panel to discover which zones are the most clicked on your page. Please note that Top Zones are shown only with 'Tap rate (pageview level)' and 'Tap recurrence'.
How to erase zones
You can either erase one zone or all zones at once:
Erase one zone:
- Enable edit mode and hover over the zones you want to erase. Then, click on the eye icon. You can enable the zone again by clicking on the same icon again.
- Enable edit mode and click on 'View all zones' from the dropdown menu. A menu will open allowing you to see a list of all the zones from your current Zoning. You can delete the zones you want from the list by clicking on the menu on the right, then hit 'Delete zone'.
Erase all zones:
- Enable edit mode and click on the dropdown menu, then select 'Delete all zones'.
- In the pop-up that appears, confirm your choice by clicking on 'Delete 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. To ensure clarity in data aggregation between parent and child zones, the surface-based method applies a zone coverage threshold. This threshold defines whether a child element is visually nested within a parent zone based on coverage.
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.
Surface 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 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.
Note
It's impossible to aggregate all screen elements in a single zone if the screen contains both sticky and scrollable elements.
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
Note
If two zones share the accessibility-identifier then targets are generated based on the TargetViewPath.
How to find and view an existing zoning or recover a deleted one
Accessing existing Zonings
- From the Zoning Analysis menu, click on the 'My Zonings' tab,
- Sort your Zonings by name or last updated date. You can also search for a specific Zoning in the search bar.
Accessing deleted Zonings
- Click on the menu button at the right of the Zoning page,
- Then click 'Recover Zonings',
- Check the box next to the zoning(s) you want to recover,
- And click on 'Recover'.
How to manage Zoning's editing rights
There are different levels of edit rights depending on if you have created a zoning or not:
- Owner: you created this Zoning and can choose which other users can edit and view it.
- Edit: you are not the owner of the Zoning but have the right to edit it. For example: create new zones.
- View: you can see the Zoning and already created zones but you can't create new or delete existing zones.
Note
A console admin can edit and give edit rights to all zonings, irrelevant of if they're the original owner.
Enable edit rights
You can enable edits rights to your Zoning for other users by either accepting their editing request or adding them as editor to a Zoning.
Accepting editor requests
- Click on the menu button next to the 'Shared with' section of the Zoning you are interested in and select 'Manage permissions',
- Navigate to the 'Editor requests' section and accept the edit request.
Adding users as editor
- Click on the menu button next to the 'Share with' section of the Zoning you are interested in and select 'Manage permissions',
- Navigate to the 'Editors' section and begin writing the name inside the field. Select the correct user from the options that appear.
- Select the user and click 'Add',
- And select the editing rights you want to provide ('Can view' or 'Can Edit'), and click 'Save'.
Good to know
You can manage permissions directly from the Zoning Analysis you're currently viewing. Click on the 'Share' button at the top right corner of your Zoning page and follow steps 2-4.
To delete an editor you invited: follow the exact steps above and select the bin icon next to the user's name.
How to analyze a zoning
Analyzing your zoning will allow you to make the most of your screens and improve them if needed.
-
- Select an existing zoning – or create a new one,
- Define your segment and time period inside the Analysis Context,
- Create zones on the content you want to analyze,
- Then select which metric you want to use in the dropdown menu. You can change your metrics as many times as you like during your analysis.
- Take note of the data shown inside your zones and to go further, use the comparison mode.
How to use comparison mode
Comparison mode helps you compare screens, metrics, segments and time periods side-by-side.
- I want to compare acquisition segment A with acquisition segment B.
- I want to analyze the Tap rate on the homepage banner before and after it was revamped.
- I want to understand which campaign banner has the highest conversion rate.
Then, follow these instructions:
1. Click the 'Compare' button next to the Analysis Context button,
2. Define your Analysis Context on both left and right side based on your analysis goal. In the image example below, the same metric is being compared (Tap distribution) but during two different months:
You can compare two metrics, two screens, two segments or two time periods.
It is however, impossible two compare two different devices in the same zoning.
3. Analyze and take notes on the results of your comparison. If you are analyzing the whole screen, toggle on 'Synchronized vertical scrolling' (at the top right corner) and scroll both sides at the same time.