Click Map is a tool for measuring and displaying statistics on clicks on your site. The map displays clicks on all page elements (including those that are not links). At the same time, you can see not only the interaction of visitors with one page, but also aggregated statistics for a group of site pages. For example, get statistics for a separate section.

The heat map helps to evaluate the usability of the site, to identify the most clickable elements, to determine which design elements seem to be a link to site visitors, but are not.

Clicks on the map are highlighted in different colors depending on their frequency. The map shows the total number of clicks on the page (group of pages) and the percentage of clicks that fell into the area you currently see.

You can use several map display modes:

"Heat map"- warm colors correspond to frequent clicks, cold colors correspond to rare ones.

• "Monochrome Map"- color density corresponds to the frequency of clicks at a given point.
• Clicks on links and buttons- the map does not display clicks on elements that are not links or buttons.

"Transparency Map"- clickmap is displayed as "foggy mask": The most clickable elements show through the "fog" more clearly.

• "Element Map"- the map displays all the elements of the site page.

Page group statistics

To view statistics for a group of pages, you can use additional characters in the URL field.

Consider an example. You need to get statistics on the pages included in the https://example.com/goods/ directory. To display the data on the map, enter the address https://example.com/goods/* in the field (after entering the same address will be displayed in the drop-down hint). The data will be loaded automatically.

The map will be displayed on the most popular page of the site, the URL of which matches the specified condition. Numerical indicators (number of views, clicks, share of visible clicks) will be combined for all pages that match the condition.

Show data in iframe

If your site is protected from being displayed in an iframe (that is, the X-Frame-Options header is used in the server settings), then the collected data will not be viewable. To view site visit data, you need to add an exception to the server settings for the webvisor.com domain and its subdomains, as well as for your site domain using a regular expression

^https?:\\/\\/([^\\/]+\\.)?(yourdomain\\.com|webvisor\\.com)\\/

If you are using nginx, add the following exceptions to the configuration:

Location / (\n set $frame_options "";\n if ($http_referer !~ "^https?:\\/\\/([^\\/]+\\.)?(yourdomain\\.com| webvisor\\.com)\\/")(\n set $frame_options "SAMEORIGIN";\n )\n add_header X-Frame-Options $frame_options;\n ...\n )

where yourdomain\\.com is the domain name of your site. Use the domain zone of your site (may be different from .com).

Page size limit

To display data on the map, you must observe some limitation on the size of the site pages. Below are the values ​​for displaying the map in different browsers:

Part 3

We reveal the secrets of the site

We continue to get acquainted with the opportunities provided by Yandex Metrica. We have already talked about the "Summary" and "Reports", and today a new section is next in line: Yandex Metrica - Maps.

Yandex Metrica - Maps

I hope that you have read the previous articles (if you have not already done so, then the link is above), so there is no need to talk about exactly where to find the "Maps" section. So let's take a look at exactly what cards we have at our disposal:

As you can see, there are not so many of them - only 4 options:

Link map

Click Map

Scroll Map

Form Analytics

Since the main content of each of the cards is described right there, and you, readers, who are no longer quite beginners, this time we will try to figure out not only what information each of these cards gives us, but also how we can use this information.

But first, the general principles of working with maps.

Here's what the window for working with maps looks like at the initial stage. Pay special attention to the top menu - for a start, we will analyze it:

4 tabs on the left side of the screen allow you to switch between different cards without switching to the main Yandex Metrica screen.

But the most interesting for the buttons are in the right corner of the screen. By clicking on the "Interaction with the site" button, you can switch between the pages of the site, click on buttons, open windows ... In general, work with the site as if it were just opened in your browser. In order to return back to working with the map, click on the same button (now called "View Map") again.

But the most interesting button in the top menu is an inconspicuous arrow in the very corner. For me, to be honest, a mystery: why is the most important button made so inconspicuous? After all, it is she who calls the main menu of the map:

What can we do with its use?

• select the exact address of the page we want to view;
• see the total number of clicks made on the page (as well as what percentage of these clicks we see on the open part of the page);
• choose the time interval that interests us;
• the ability to set up segments, compare them, and so on - however, you have already seen this in Reports, so there is no point in repeating it;
• options for displaying information - we will talk about this setting in more detail a little later.

Link map

This is what our blog link map looks like:

The “warmer” the color, the more clicks on the link with which it is marked were made. You can see the gradation of colors in the top menu:

But the most interesting information can be obtained by clicking on the link itself. Here's what it looks like:

Don't be surprised by the lack of clicks at the beginning and end of the graph - this is the specifics of a blog. The article was published on January 23, so there could not have been clicks earlier. And then she began to gradually leave the top position on the page - and the number of transitions also began to decrease.

What information can we get by using this card? The total number of clicks on each link and the percentage of clicks on each of the links.

That is, we can evaluate how interesting this or that link is to page visitors and work on how to make the links we need more clickable.

By the way, pay attention to the peculiarity of this map: identical links will have the same statistics! That is, if you have 2 different buttons on the page, to which the same link is attached, then they will have common statistics.

And to understand which of the buttons are clicked more often, the following tool will help you:

Click Map

And now an important note. If the link map marked transitions on specific links, then the click map shows specific places on the page that users clicked on. Right on the page!

Let me explain with an example. While I was writing this article, we have a new article on our blog:

As you can see, only 2 people managed to see it. But there are already a lot of clicks on the button, and on the text, and on the photo (and on the title, too, take my word for it). Why? Because the click map shows all clicks made on a specific point of the screen for the selected period. And what kind of article was at this point - the map does not matter.

As you understand, for a blog (or rather, for variables on the main page of a blog), this is not the most useful tool. But for static pages - that's it! Most importantly, remember to clearly mark the dates of the various changes to your page so that you can understand which of the clicks were made before the changes were made, and which after.

By the way, about display modes. The one you see in the picture above is called "Heat Map". The more often they click, the “warmer” the color. There are other options:

How to use the information obtained from the heatmap? See where your website visitors are clicking. If some inactive element gets especially many clicks, it means that visitors expect something from it. You need to either live up to their expectations by adding some kind of pop-up window (following a link, interactive, and so on) or change its design in such a way that visitors do not have a desire to click on it.

In general, a heatmap allows you to make your site more user-friendly, adjust it to their desires (if you want additional information, get it!). The main thing to remember is that one click is an accident, but a lot of it is already a trend, and you should react to it!

The reverse is also true. If you thought that this little button would be clicked regularly, and as a result of clicks - with a gulkin's nose, then your theory did not materialize and you need to change something!

Scroll Map

Is your page being read in its entirety? Or rarely does anyone scroll past the first screen? This tool will help you figure it out.

In order to get general information, just look at the scale in the lower right corner of the page:

As you can see, the bottom third of our blog gets very little attention. And if there is nothing wrong with this for a blog - all articles manage to get their own while they are in the top, most visited part of the page, then for a regular site this would already be a reason to think.

Another useful counter is located at the top left of the page:

It shows the total number of views of a particular part of the screen and the average time that visitors spent viewing it. Please note that its performance depends not only on what is on the screen at the moment, but also on the location of the mouse cursor!

Another feature of the tool is that it only shows data for the last two weeks, so it cannot be used to track any long-term changes.

There are two display modes here - thermal and monochrome maps, both of which are already familiar to you from the click map. In general, the scroll map looks like this:

Why use? I already wrote about the first option - to understand what part of the site your visitors usually study. I must warn you right away: do not be alarmed, it is normal that most of the visitors study the first screen, and get to the basement well if half of the visitors!

But, of course, your task is to increase this percentage. The more people study the page from cover to cover, the better.

The second task of the scroll map is to show which blocks the page visitors pay special attention to. If such a block is located closer to the end of the page, maybe it makes sense to raise it higher, since it is so important for your customers?

Form Analytics

Allows you to evaluate the conversion of various forms of your site. Unfortunately, the data is also stored for the last 2 weeks ...

I’ll make a reservation right away that this is far from the most convenient tool for measuring website conversion. But anyway, let's see how it works. And one of our sites will help us with this:

All basic information about the form is on the right side of the page. here is the sales funnel. The total number of page visits - the number of visitors interacting with the form - the number of those who submitted data from the form ... And the result is the conversion of the form.

You probably noticed the inscription on the left side of the page: "The form on the page was not found." Where did she come from? The fact is that Yandex.Metrica takes into account the actual sending of data. And sending occurs not from the main page, but from a pop-up window. Therefore, we switch to the mode of interaction with the page, open the pop-up ...

And here it is - the same form number 1:

Sometimes it is quite difficult to find the right form on the page.

Why use? To determine the sales funnel for each specific form. These forms can then be tweaked to increase their conversions.

So, this time we figured out what Yandex Metrica Maps are. Next time we will talk about perhaps the most interesting tool of Metrica - the webvisor.

In the meantime, ask questions, write comments. I will be glad to help you.

Greetings to all who seek knowledge! Today, the focus will be on such Internet analytics tools from Yandex.Metrica as heat maps and webvisor.

Everyone involved in Internet marketing uses Internet analytics tools.

The main analytical systems are (NM) and (GA). You can only use GA, which has the ability to download data from Yandex.Direct, but what GA does not have is Webvisor, and this is a very necessary and entertaining thing. But about him a little later.

What are heat maps

"Heat Maps"- so it was customary to call everything Yandex.Metrica click maps, but in fact, in YM there is a “Maps” tab, and in it: Click Map, Link Map, Scroll Map and Form Analytics.

Directly in the "Click Map" there are several map display modes:

• "Heat map" - warm colors correspond to frequent clicks, cold colors correspond to rare ones.
• "Monochrome map" - color density corresponds to the frequency of clicks at a given point.
• "Clicks on links and buttons" - the map does not display clicks on elements that are not links or buttons.
• "Transparency map" - the click map is displayed as a "fog mask": the most clickable elements show through the "fog" more clearly.
• "Map of elements" - the map displays all the elements of the site page.

Rice. 2. Yandex.Metrica maps.

If you see this screen when accessing maps and webvisor,

necessary change counter code settings for Webvisor Here:

Rice. 4. Settings for the Yandex.Metrica counter code.

and overwrite the changed code on all pages of the site.

Let's see heat map of clicks in Yandex for a month. The button on the top right allows you to hide or show the settings panel.

Rice. 5. Heat map of clicks.

The map shows that the largest number of clicks in the fields of the form, which is what we need. BUT, the arrows show that also people click on visually active page elements - a picture of a calendar at the top, flash drives with the inscription "up to 100 words" and a stylized arrow pointing to the form.

These elements are actually draw attention away from the form, and it makes sense with and without these decorative elements to see in which case the form fill conversion will be higher. I dare to suggest that if they are removed or made less noticeable -.

Report on the "Registration" click parameter

In the settings, we can segment by different indicators and save the constructed reports. In this case, let's see how those visitors behaved who left an e-mail in the form on the landing page.

Rice. 6. Heat map of clicks of those who filled out the form.

There are practically no extra clicks. This suggests that a more interested, attentive and purposeful part of the visitors passed the registration successfully. The rest, apparently, need help - to remove unnecessary elements.

You can play around with different click map modes to get the most complete picture of where website visitors are clicking.

Map links

A link map is a tool for measuring click-through statistics on links on your website or landing page. Links in the map are highlighted in different colors depending on their popularity.

• the number of clicks on the link;
• percentage of clicks relative to other links on the page.

Rice. 7. Map of links.

Form Analytics

Shows form interaction funnel: came - saw - filled. It's also a necessary thing.

Rice. 7. Form analytics.

In this example, the form has a high conversion rate of 19.57%.

What the form conversion depends on is the topic of a separate article, but in a nutshell - the form should be noticeable, understandable, simple. The number of fields to fill out greatly affects the conversion. In this case -

just one field. It would be nice to add "ghost text" to show what exactly needs to be entered, as some people try to enter a name or phone number instead of an e-mail, or vice versa. Of particular interest are the 75 visitors who interacted with the form but did not submit data.

The following example has ghost text, 3 fields, and a conversion rate of 2.81%. It is not correct to compare form conversions of different sites, as completely different offers, audience, design, location, etc. are used. I'm including this picture as an example of how forms work differently.

Using the Form Analytics tool, you can test different variations of forms to achieve high conversions.

Rice. 8. Form analytics.

Note (applies to all NM maps):

• The map is displayed only on those pages of the site,

We analyze user behavior on the site with click-map tools from Yandex Metrika. Usability analytics, web page popularity and traffic sources.

We have already learned how to install on any site in the last article. Today we will consider the possibilities of analysis using a heat map of clicks and links, as well as the user's movement on the site.

Yandex Metrica gives the webmaster all the collected statistics on user behavior on the following maps: a map of site paths, links, clicks and scrolling. You can also see how your visitors behave on the site with the help of tools: webvisor and form analytics.

It will be very useful to use heatmap data. The main difference from the link map is that you will see all the popular elements of the site, regardless of whether they are links or not.

Link map in Yandex Metrica

By the link map you will find out what topics the visitor is most interested in. It always makes sense to write on the most popular topics, attracting the maximum number of users. If no one is interested, then you should not waste your energy on these sections.

Links will be highlighted in the same way as on the heat map, with colors depending on the number of clicks. The maximum values ​​are in warm color, the minimum values ​​are in cold color. For each link, you can see the specific number of transitions.

Heat map of Yandex metrics clicks

The Yandex Metrics click map is used to select the optimal place for advertising. When analyzing the usability of the site, it is also used. It is possible to detect non-working elements of the site. For example, there are a lot of clicks, and zero conversion may mean a non-working form for filling in data on the site. Also detect where the visitor is confused by mistaking a non-clickable element for a link.

From here it will be logical not to make headings clickable. Especially since the title is in the tag

or

. And the link in this case will refer to spam. But, it is quite possible that for another site the picture will be different, and people will click on the title of the article more often. Each site needs to be approached individually.

The report on this map can be viewed thanks to webvisor technology. It must be enabled to generate a report.

This map will show how far down the visitor scrolls down the web page. When analyzing a site, we need to pay attention to the number of views, the time spent in a given area of ​​the page, and how the warmth of the color is distributed. The redder the better; the bluer the worse.

Thanks to the information on scrolling, we will resolve our doubts about the length of the web page. Everyone knows that the optimal length is the first screen, i.e. page without scrolling. But this is not possible for every resource.

You can even list the types of sites with a short page. These are business cards, landing pages, only services with a phone number. The rest, with a lot of content, such a shortened version will not work. Yandex metric helps to make sure that everything is in order with you and the visitor moves down the text.

An example of scrolling at the top of the blog (first screen) from bright red to bright orange:

An example of a scroll map in the blog footer area from green-yellow to blue, which indicates that advertising at the very bottom of the page will be ineffective. And important information should not be posted there. Readers won't screw up.

At the bottom, under the map, the number and time of views in a given place on the page are shown.

The top of the web page is red:

Closer to the bottom of the web page is green:

From this data, we can conclude that people not only go down the page less often, but they stay there for less time.

Setting up a Yandex heatmap

In order to collect click map statistics, you need to select the checkbox "Click map" on the "Counter code" tab. It is enabled by default.

For Yandex metric maps, there is a quick way for quick access. You just need to go to the toolbar, and by clicking, drag the "Quick Access" link to the bookmarks bar. Or add a bookmarklet to your browser bookmarks, this link will turn on the map.

You can read about how to add maps of links, clicks, scrolling to different browsers in the help of Yandex metrics: help.yandex.ru/metrika/qanda/reports-qanda.xml

Yandex metrics path map

Its scale can be adjusted by the slider in the direction of minus or plus.

How much data do you want to see, i.e. the scale of coverage - with the "details" slider. Accordingly, unnecessary checkboxes can be removed.

What kind of information can be extracted from the site path maps? Here you can see which pages and from where they visit more often. What topics are of interest to the user on the internal pages of the site.

The paths are divided into types of transitions: advertising, external and internal, from search engines, from social. networks, mailing lists, etc. Each type has its own color. Therefore, despite the apparent confusion of the arrows, it is easy to track traffic sources. Moreover, at any time you can turn off an unnecessary type of transition and the chart will become simpler and clearer.

Scheme of working with the site path map report.

At the bottom of the reporting web page, it's easy to switch to any metric map and set the required parameters.

To analyze user behavior and usability of an Internet resource, Yandex metrics maps are the best Russian-language tool.

For the same purposes, the technology "Webvisor" and "Analytics of Forms" is used. How to configure and use them, we will consider next time.

We have released a new book, "Social Media Content Marketing: How to get into the head of subscribers and make them fall in love with your brand."

Thermal in "Metrika" of "Yandex" is a useful and convenient tool for analyzing user behavior on the site. If you want to know what elements of the page distract attention from the cherished buttons “buy” and “leave a request”, what Moscow women are looking for on the site and how users who have switched from social networks behave, then you are here. In the article: basic concepts, a brief overview of the functions and scenarios for using the service. 10 tricks for increasing conversion, wandering from article to article will not be here.

In articles about the Yandex click map, they basically list its modes of operation, give a couple, and round off on this. They don’t explain how to apply it at all, apparently they think that everyone is born web analysts and everyone already knows. I will not do this, but instead I will give a couple of examples of how to use this tool to analyze user behavior and improve the site. But first things first, so let's start with the base.

What it is?

Clicks is a visualization of statistics on the most clicked elements on the site. It helps to understand what users pay the most attention to and what design fragments are mistaken for buttons and active links. A site click map is available in Yandex.Metrica and in most paid web analytics services. You can choose any, but we will talk about the Yandex tool, because it is our own, dear and beloved.

How does the Yandex click map work?

There are four options for visualizing reports in Metrica:

• Heat map of clicksis the default option. In this case, relatively frequently clicked page elements are highlighted with warm colors (red, orange, yellow) and less popular ones with cool colors (green, blue, purple).
• monochrome. The same, only the only red color is used. The brighter the area, the more clicks on it, and the dimmer, the less.

• Map of clicks on links and buttons.In this case, all user interactions with the site are divided into two types: clicks on links and a button and ordinary ones. The former are marked in red or orange, and the latter in blue.

• Transparent.The same principle works here, the only difference is in the way of visualization. The more often an element is clicked, the more transparent the dark “mask” superimposed on the site is in its area. It is immediately clear what visitors are looking at.

• Element map.In this mode, not specific areas are highlighted, but entire elements. This mode can be turned on just to give yourself aesthetic pleasure (you will understand what I mean).

What can the Yandex click map do?

Customize the audience segment you want to get information about. Let's break it down point by point.

1. Setting viewing options. You can only take into account those in which the visitor visited a certain URL, clicked on any heading, and so on.
2. Setting the parameters of the visit. Here you can filter users by geography, device type, behavior, referral source, and browsing history.
3. Additional customization of the user profile. You can filter by gender, age, geography and other parameters.
4. Period selection. Everything is simple here: from one day to a year.
5. Comparison of two segments. If you want to compare user behavior in this and the previous month, or two different audience segments, select this option.

As an example, I chose men who came from the search, who followed the link to the blog. I won't show the number of clicks.

How to use a heat map of clicks in Yandex.Metrica?

Trite, but for tests and analytics. In the simplest scenario, you can see what the site visitor is interested in: product catalog, service description, contact page or blog. Based on this information, you can adjust the user's path on the site so that he lives easier and more fun. For example, push a popular link to a blog higher and more to the left. The click heat map mode, which is the default, is suitable for this.

The second option is to look at what design elements people mistake for buttons and clickable links. This will help clear the page of things that draw attention to themselves. Let's say you have some kind of plate on the main page, very similar to a form to fill out. And you don’t even suspect about it, because you have never opened a heatmap. And people click on the plate, but they get frustrated because nothing happens. You don't have to be a UX specialist to understand that this is bad. These false-active elements divert the user's attention from the real buttons, make them spend more time navigating, and reduce the usability of the site. To find them, the easiest way is to enable a click map for buttons and links.

The third option is to evaluate how linking works on the page or what menu items people most often choose. This is where the element click map can help. In general, this is a very useful mode because it is more visual than the default mode and never misleading like the active links mode. Let me explain. In the previous screenshot, several areas look almost the same orange, so it's quite difficult to understand which link is more popular. With the help of the element click map, we get rid of the problem easily and elegantly - all colors turn out to be as different as possible.

Finally, you can see where a particular segment of the audience clicks most often. For example, people who came from social networks or search, residents of Kazan or schoolchildren with iPhones (no). To do this, you need to use the panel, which I talked about above.

Summarizing

Heat map of clicks helps to improve the usability of sites, build the best path for the client to the target action and analyze the behavior of different user groups.

What should I do if the heatmap in Metrica doesn't work?

This happens if the site is protected from being displayed in an iframe or you are using nginx. Detailed instructions on how to proceed in this case gave Yandex itself, but just in case, we repeat.

If you have an iframe, you need to add the "Webvisor" domain (webvisor.com), its subdomains and your own domain to the exceptions. You can do this with a regular expression:

^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/

In the case of nginx, the additional code with exceptions looks like this:

location / (
set $frame_options "";
if ($http_referer !~ "^https?:\/\/([^\/]+\.)?(yourdomain\.com|webvisor\.com)\/")(
set $frame_options "SAMEORIGIN";
}
add_header X-Frame-Options $frame_options;
...
}

Are there other tools?

Yes, there are many click heatmaps, some offered as part of other web analytics tools, and some standalone or as a CMS plugin. In principle, they all do about the same thing, they differ only in the details of the data. Examples:

• clickheat:
• mouseflow:
• CrazyEgg:
• open web analytics.

The first three are paid services, and OWA can be downloaded just like that.

What is the result?

The Yandex click map helps you monitor user behavior, optimize their path to the target action, evaluate the effectiveness of different page elements, and get a bunch of other useful information. If you do everything right and take into account the data that this metric provides, you can inadvertently increase the conversion and improve the convenience of the site. If that doesn't scare you, then go ahead and do it.