Heatmaps, Scrollmaps and Confetti in WordPress

Heatmaps, scrollmaps, and confetti are visual representations of the interaction of visitors on a web page as they navigate through it. Find out which areas are the most attractive and which are the most ignored and use this information to improve your WordPress.

These types of tests will help you better understand your visitors, since you will see what captures their interest. Create your first heatmap test after you have installed, activated, and configured Nelio A/B Testing.

Instructions for Collecting Heatmaps

Once you have installed, activated, and configured Nelio A/B Testing, follow these instructions to collect heatmap data.

Create a New Heatmap

1. Under the Nelio A/B Testing menu, click on Tests to view and manage your tests.
2. Click the Add Test button at the top of the screen.
3. A pop-up window will open with all the types of tests you can create. Each of them has a name and an icon.
   • Click on Heatmap.

Name and Define Your Heatmap

First of all, give a descriptive Name to the test you want to create to help you identify it in the future. Also, on the right sidebar, you’ll find two additional tabs:

• Status & Management, where you see the status your test is currently in (Draft, Ready, or Scheduled) and options on when it should start and end,
• Description of the test, where you can indicate what you are testing and what you intend to achieve with it.

Select the Page You Want to Test

First, select the content on which you want to take the test. To do this, you must first choose the type of content from the list that appears by default (for example, Page). Next, select the specific content of that type you want to try (a specific page, in our example).

To do this, you either choose it from the list of options that appears by default, or check the box Track heatmap of page specified using its URL and indicate the URL of the page you want to test.

How to Start the Test

Once you have fully defined your test, you will see that the status of the test will have passed from Draft to Ready. At that point, you can Start it so that Nelio A/B Testing can start tracking their actions and generate the heatmap, scrollmap, and confetti visual representations of their interactions.

Start your test

To start a test, check that it is Ready and, if it is, click the Start… button in the upper right corner. If it is not Ready, you can place your cursor over the information icon next to the Status to see why your test is still in Draft.

If you do not want to start the test directly, but want to leave it scheduled for a specific date, specify it using the Start field in the Status & Management section.

Once the test has started, the plugin will show you its results page and you will see that the status changes to Running.

When Do You Want Your Test to End?

You can also define when you want the execution to end, indicating the End Mode of the test:

• Manual: the test will stop when you click on the Stop test button, on the test list or on its results page.
• Duration: The test will stop automatically after the indicated time.
• Page Views: the test will stop automatically after reaching the total number of visits you have specified.

How to See the Results of a Heatmap

In the menu option Tests you can see the list of the tests created, the status they are in and the date of their last update. At any time you can see the results of a test that is started or that has already ended by clicking on the View Results link below its name.

Summary of Results

On the right sidebar of the results page you will find three tabs that indicate the type of display map:

• Heatmap: shows which areas of your page generate more interest.
• Scrollmap: shows through horizontal stripes of color, how far visitors scroll and the areas they interact with the most.
• Confetti: shows all the clicks of your visitors. Filter them using the available filters.

For each tab, you will find additionally:

• Settings specific to the type of display being viewed.
• Some metadata about your test. In particular, you can see the status of the test, how long it has been running, when it started, and the end mode.
• It also includes the description.

Heatmap

A heatmap is a graphic representation that allows you to identify the hot spots of your website. That is, the areas that most attract attention to users. In this way we can improve the usability of it.

If we know the behavior of visitors within the web in relation to images, links, videos, etc., we can improve the appearance of it so that the visitor feels more comfortable and thus enhance the conversion.

Information Shown

When viewing a heatmap, you can setup:

• Level of opacity of the page being displayed. The more opacity, the more the heatmap stands out.
• Heat intensity: to see the warm colors with the desired degree of intensity.
• Resolution: select if you want to see the heatmap of visits made from computer screens, tablets, or mobile phones.

Scrollmaps

Scrollmaps are mainly used on pages that have a lot of scrolling in order to be able to detect the depth level of the scroll. That is, how far the user goes when scrolling and what is the limit under which there is no navigation.

Information Shown

When viewing a scrollmap, you can setup:

• Level of opacity of the page being displayed. The more opacity, the more the heatmap stands out.
• Resolution: select if you want to see the heatmap of visits made from computer screens, tablets or mobile phones.
• Scrollmap Legend: the popularity associated with each color is indicated.

Confetti

The confetti shows the clicks that have been carried out in the selected page broken down according to the chosen filter. In this way we can see not only where the visitors clicked, but also when, who, how, etc. It is a key report to solve some doubts beyond the volume of clicks.

Information Shown

When viewing a confetti map, you can setup:

• Level of opacity of the page being displayed. The more opacity, the more the heatmap stands out.
• Filter, which includes:
  • Type of Browser used.
  • Country from which it is accessed.
  • Day of the week on which the click was made.
  • Type of device used.
  • Operating system used.
  • Time of day the click was made.
  • Time elapsed since the page was loaded until clicking.
  • Window width.