How to create Heatmaps and Zonings

This article will take you through how to create new Heatmaps and Zonings from scratch or by using the available templates.

Heatmaps enable you to get a broad overview of user engagement across your site's pages. They display a visualization of user interactions - such as clicks, movements, and scroll actions - with the data represented on a colored temperature scale.

Zonings (Growth, Pro, and Enterprise plans) allow you to perform a similar analysis of user engagement on your site's pages, but with more detailed metrics and your pages arranged into defined zones. Each of your page's zones is represented by a color, with easily visualized data overlays.

Before you begin

• Before you can create a Heatmap or Zoning, it's important to have captured at least one session on the URL(s) you want to analyze.
• Heatmaps: If you're not seeing any data in the desktop view of a Heatmap, it might be worth checking the tablet and mobile views. Users may not have accessed the URL(s) from a desktop device.
• Heatmaps: If a heatmap isn't available, ensure your session capture settings aren't limited to a specific page or reliant on an event, as this may exclude the URL(s) you wish to analyse.

Create a new Heatmap or Zoning

Note: Depending on your plan, you will either see the Heatmaps menu (Free plan) or the Zoning Analysis menu (Growth, Pro, or Enterprise plans). If you have Zoning Analysis, note that a Heatmap is created for you when you create a Zoning.

1. From the main menu, go to 'Heatmaps' / 'Zoning Analysis'.
2. Select 'Start from scratch' or click '+ New heatmap' / '+ New Zoning'.
3. Define your analysis as below. Then, click 'Continue'.

• Select your page or page group to define which page you want to analyze, then click 'Apply'.
  • Zonings: When creating a Zoning, you will have the option to choose between:
    • 'Page group on the fly': analyze data from a specific URL or multiple URLs with specific conditions
    • 'All page groups': analyze a page group from an existing mapping.

• Filter your analysis
  • Select the device, date range, and segment you want to analyze.
  • Define the screenshot URL using the dropdown menu.

4. Select a screenshot using one of the following options:

• Select one of the suggested screenshots

• Click 'Take new screenshot (from your live site). 

  

  • On the window that opens your site, select 'Capture screenshot', followed by 'Save to Contentsquare'. Tip: You can also use your keyboard shortcut to capture the screenshot (typically, Mac = CMD+S, or Windows = Ctrl+S).

    

• View more screenshots (requires Pro or Enterprise) from your screenshot library.

If you can't take a screenshot, your ad-blocker may be blocking Contentsquare. Click your ad-blocker icon (in your browser toolbar) and select "Disable on this site," then refresh the page and try again.

Next steps with your Heatmap or Zoning

After creating a Heatmap or Zoning, you can:

• Refine and explore your data by selecting a different device, time period, or segment.
• View session replays of the Heatmap/Zoning URL with your applied filters by clicking ‘View replays’.
• Change the Heatmap type to focus on Clicks, Moves, Scroll, or Attention.

Zonings and zone creation (Growth, Pro, and Enterprise plans)

Once your Zoning has been created, you'll have the option to jump between the Zoning and Heatmap, enabling you to perform a more in-depth analysis.

How to create specific zones

Zones are colorful data overlays that use the HTML structure of your site to identify where the elements on the page are. They are used inside a Zoning to analyze a screenshot of your site's page. You can either create new zones or erase them.

1. To create zones, ensure you're in 'Edit mode', which is enabled by default on your analysis.
   1. If you need to activate edit mode during your analysis, you can do so by clicking the 'Edit zones' button.
2. 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 in your HTML structure.
• Top zones (formerly Smart Zone): Click on the 'Top zones' button in the right side panel to discover which zones are the most clicked on your page. Note that Top Zones are only displayed for 'Click rate (pageview level)', 'Click recurrence', and 'Revenue' metrics.

Pre-created zoning with AI

Pre created zonings are generated on new projects and who have accepted the AI service schedule.

To help you get started with page analysis, these Zonings are automatically generated for you using AI. To generate these, the AI will:

• Identify key page types from your High-level mapping
• Capture screenshots of representative pages
• Define zones based on common page layouts
• Assign zone names for each area of interest

Once generated, Zonings will be available in your Zoning Analysis list, marked with the Sense icon, for you to edit and refine, or begin using in your analyses right away.

These Zonings help you:

• Analyze page engagement immediately without manual setup
• Understand which areas of your pages attract the most attention
• Compare user behavior across different page types
• Identify optimization opportunities

Note: If you delete a pre-created Zoning with AI, it cannot be regenerated. You will need to create a new Zoning manually. ff
 

Create a Heatmap or Zoning from a template

Note: The templates available are dependent on your plan.

Instead of creating a Heatmap or Zoning from scratch, select from one of the available templates and simply follow the on-screen steps.

Create an A/B test from the template

Create and analyze A/B tests through your integrated testing platforms with a streamlined workflow, included in your Contentsquare interface. 

Follow the steps below to create and analyze an A/B Test: 

1. Select the ‘A/B Test’ button to get started.
2. Select the page(s) or page groups you want to test, followed by one of the experiments from the list that you want to test, then click ‘Analyze’.
3. Contentsquare will automatically determine the most accurate screenshot for each variant and open one Heatmap or Zoning for each, with a side-by-side comparison of each. Note, if you have more than two variants, you are able to easily switch Heatmaps/Zonings while in the compare mode.

Tip: Once your Heatmap/Zoning is opened in compare mode, you can still change the screenshots, date range, segments, and device as described above. Even after this step, you’ll still have the option to manually capture new screenshots if needed.

Analyzing your A/B test

Once your A/B test has been created, you can:

• Compare variant performance at the zone level
• Analyze click rates, exposure rates, and engagement metrics
• Identify which elements drive conversion differences
• Monitor user behavior patterns across variants

Create a Zoning based on personalized segments

Why create a Zoning based on personalized segments?

• Create personalized campaigns with different content for customer segments.
• Get traffic source variations with different page structures.
• See the Daily content changes impacting different segments
• Get hyper-personalized experiences with multiple variants.

Prerequisites

This template is available for Pro and Enterprise plans only. You must have a personalization integration installed or segments already created in Contentsquare for the audiences you want to compare. Read more about segments in this article.

Please note that only Admin users can add integrations to a project. Learn more about integrations in our integrations section.

Analyze personalized experiences and compare how different audience segments interact with your content through this template.

Follow the steps below to create and analyze your personalized Zoning:

1. Select the “Personalization” template button to get started.
2. Select the page(s) or page groups you want to analyze, then click ‘Continue’.
3. Choose your segments from the different tabs:
   1. If you have a personalization integration, select an experiment from the available list. Note: Only experiments with at least one pageview in the last two weeks are displayed in the list.
   2. If you don’t have an integration installed, select the Contentsquare segments you want to compare.
4. Click ‘Analyze’.

Contentsquare will automatically capture screenshots from Session Replay for each segment and open a Zoning for each, with a side-by-side comparison. Note: If you have more than two segments, you can easily switch between Zonings while in Compare mode.

List of the third-party integrations

Third-party integrations are the same as your existing A/B Testing & Personalization integrations available in your catalog. Please read more about integrations in this section of the Help Center.

Analyzing your Personalization campaign

Once your Personalization analysis has been created, you can:

• Compare segment performance at the zone level.
• Analyze click rates, exposure rates, and engagement metrics.
• Identify which personalized elements resonate with each audience.
• Monitor user behavior patterns across segments.

Related articles

• Zonings: How to manage Zoning permissions and deletion
• Zonings: How to use shortcuts in Zoning Analysis
• Heatmaps: Types of Heatmaps