Тепловая карта кликов, несмотря на свое название, не имеет никакого отношения к температуре. Это схема, отражающая частоту кликов пользователей по разным местам страницы. Чем активнее посетители кликают по ссылке, кнопке или картинке, тем «горячее» будет отображать это место карта кликов.

Тепловая карта – что это?

С помощью карты кликов можно визуализировать статистику кликов на вашем сайте. Она отображает клики по всем типам расположенных на странице элементов (даже не являющихся ссылками). С ее помощью можно оценить юзабилити вебресурса и выявить:

• элементы, которыми пользователи интересуются чаще других
• элементы дизайна, принимаемые пользователями за ссылки

→ Все статьи про Веб аналитику смотрите тут —

Частота кликов на карте отображается разными цветами. В нижней части страницы находится панель с общей статистикой и с индикатором доли кликов, зафиксированных в текущей видимой вам области.

Карта кликов может отображаться в нескольких режимах:

• «Тепловая карта» – местам с частыми кликами будут соответствовать теплые цвета, с редкими – холодные.
• «Монохромная карта» – большей частоте кликов будет соответствовать большая плотность цвета.
• «Клики по кнопкам и ссылкам» – будут отображены только клики по элементам, являющимся кнопками или ссылками.
• «Карта прозрачности» – вывод карты в виде «туманной маски»: сквозь размытие («туман») наиболее отчетливо проступят самые кликабельные места.
• «Карта элементов» – все присутствующие на странице элементы будут показаны на карте.

7 фактов об увеличении конверсии с помощью тепловой карты сайта

Ниже приводится семь фактов о важности анализа тепловых карт для увеличения конверсии сайта (выводы сделаны на основании исследований агентства ConversionXL, проведшего более 750 экспериментов в этой области).

1. 80% времени посетители уделяют просмотру первого экрана

По итогам тестов, 80,3% общего времени просмотра страницы пользователи тратят на первый экран. Вывод: все элементы, мотивирующие посетителя к целевым действиям, размещайте выше «линии сгиба».

2. Большая часть внимания приходится на левую часть страницы

Человеческий мозг имеет одну особенность – он привык визуальную информацию воспринимать слева направо. Поэтому большинство посетителей после загрузки страницы в браузере начинают просматривать ее с левой стороны. Рекомендация от экспертов ConversionXL: разместите слева ваши буллеты (список выгод). Вообще, на опубликованный в левой части контент приходится около 69% времени посещения.

3. Пользователи изучают текст страницы сайтов по F -образной траектории

Было замечено, что основная масса людей сканирует текстовые документы схожим образом: соединенные горячие точки их кликов образуют букву «F».

Советы:

• Суть опубликованной на странице информации изложите в двух первых абзацах текста, потому что они наиболее конверсионные. В остальной части материала «расшифруйте» и дополните основную мысль.
• Важную информацию (особенно перечень преимуществ) публикуйте в виде маркированных списков – внимание сильнее цепляется за символьное обозначение.

4. Баннерная слепота уменьшает конверсию

Баннерная слепота – это игнорирование посетителями контента, напоминающего рекламные баннеры. В наш цифровой век мозг человека научился «не видеть» коммерческую информацию (особенно агрессивно представленную). Совет: оформляя контент, не используйте рекламный стиль.

5. Важность направления взгляда

Наверняка вы слышали о приеме «визуальная подводка». Это когда взгляд изображенного на рисунке или фотографии героя указывает на какой-либо объект (лид-форму, продукт, оффер и т.п.). Конечно, подводка сама по себе не гарантирует прирост конверсии, но с ее помощью вы легче привлечете внимание к важному элементу страницы. Конвертировать же нужно призывом к действию и грамотным оффером.

6. Анонсы статей имеют большую конверсию, чем сами статьи

Цепляющие анонсы на главной странице хорошего корпоративного блога конвертируют посетителя в читателя сильнее «полной версии» текста. Вывод: пять привлекательных анонсов имеют больше шансов задержать пользователя на странице, чем одна статья-«портянка».

7. Мелкий шрифт тоже читают

Звучит странно, но посетители много времени тратят именно на чтение информации, опубликованной мелким шрифтом. Объяснить это можно тем, что «крупный текст» они исследуют «по диагонали», почти не останавливаясь. А вот в «мелкобуквенный» текст гостям сайта приходится вчитываться. Совет: используйте небольшой шрифт только в коротких фрагментах текста (например, в пояснениях).

Где взять тепловую карту кликов?

Тепловую карту можно раздобыть на следующих сервисах:

• Яндекс.Метрика. Интегрируйте код счетчика от Яндекса и получите в придачу много полезных seo-инструментов, включая и тепловую карту. Этот способ реализуется просто и является самым популярным.
• Google Analytics. Тепловой карты в «привычном» виде сервис веб-аналитики от Гугл не предоставляет. Однако его инструменты позволяют узнать соотношение кликов по определенному элементу к общему числу кликов на сайте. Результат тот же – правда, наглядности нет.
• Скрипт Clickheat. Установите данный скрипт в корневую директорию сайта и у вас появится собственный сервис статистики. Отличный способ, но не для вебмастеров-новичков.

Цены платных сервисов тепловых карт

Некоторые платные seo-сервисы на бесплатных тарифах не предоставляют доступ к тепловым картам. Ниже я привожу самые недорогие тарифные планы, функционал которых включает и «хот-мапы» (хотя некоторые «бесплатности» есть и у этих тарифов):

• Clicky – от 14,99 $ в месяц (тариф Pro Plus). Первые три недели все инструменты сервиса можно использовать бесплатно.
• Reinvigorate – от 10 $ в месяц (тариф Starter). Две недели пробного периода (включая доступ к тепловой карте).
• Crazy Egg – от 9 $ в месяц (тариф Basic; оплата производится раз в год). Пробный период – месяц (только для десяти страниц).
• SessionCam – 10 $ в месяц за три сайта. Один сайт – бесплатно.

Вместо заключения

Тепловая карта кликов и ее анализ – это настоящая обратная связь с посетителями. В сочетании с другими seo-инструментами (например, сплит-тестами) она незаменима в деле повышения конверсии.

Хороших вам продаж!

→ Всем аналитикам внимание —

Визуализация данных ,

Яндекс API

Иногда бывает полезным нанесение каких-то количественных показателей на географическую карту, как в случае отображения зон покрытия мобильной связи/интернета у МТС:

Именно такие кейсы и призван решать модуль тепловых карт, который мы создали. Перед тем как я перейду к описанию самого процесса создания модуля, я хотел бы сказать еще пару слов о том, что из себя представляет наша модульная система, и как вы можете ей воспользоваться.

Модульная система

В версии 2.1 мы открыли доступ пользователям к нашей модульной системе , которая написана на основе YModules , разработанной нашим коллегой . Эта модульная система имеет много разных приятных фич, таких как асинхронный resolve зависимостей, переопределение модулей, etc. Она была уже достаточно подробно , так что если интересно, можете почитать.

Открытие модульной системы принесло нам приятный бонус - возможность для внешних разработчиков создавать собственные модули. Вроде бы и ничего архиважного, но благодаря этому наши пользователи теперь могут:

• самостоятельно писать новую функциональность для API Яндекс.Карт и делиться им в удобном виде с другими разработчиками;
• использовать нашу модульную систему как основную, если приложение целиком и полностью завязано на картах.

В качестве примера первого мы и создали тепловые карты.

Поскольку написать свои тепловые карты не было самоцелью данной затеи (главной задачей было сделать готовое решения для API Яндекс.Карт), перед тем как начать писать код и думать над алгоритмом работы, естественно, я полез на github искать какие-то готовые решения. Вполне ожидаемо было то, что разных реализаций тепловых карт было там чуть больше, чем достаточно (почти две с половиной сотни).

Немного изучив исходники разных проектов, я остановил свое внимание на библиотеке simpleheat авторства . У нее было два ключевых преимущества:

• код всего проекта занимал около сотни строчек;
• тепловая карта хорошо держала 10к точек без напряга при отрисовках (при большем количестве данных тестировать уже как-то бессмысленно, поскольку отдавать такие объемы данных только для отрисовки картинки на клиент крайне неразумно).

В конечном итоге мне, конечно, пришлось переписать значительную ее часть, но все равно, мне кажется, что это был лучший выбор. Все остальные решения были куда более громоздкими, но особых плюшек не предоставляли.

Алгоритм отрисовки тепловых карт

Пообщавшись с коллегами, я понял, что все видели тепловые карты, все знают, зачем и что это. Но почти никто не знал, как они отрисовываются. Именно поэтому я постараюсь описать эту часть более детально.

API Яндекс.Карт предоставляет возможность для отображения собственной подложки для карты, реализуется это с помощью специального класса Layer . На вход ему необходимо передать функцию, которая по номеру тайла и уровню масштабирования вернет url для загрузки тайла. Кто еще не знаком с тайлами и тайловой графикой можете немного почитать о них в википедии и у нас в документации .

Написание функции генератора url"ов для получения тайлов - это фактически и есть вся задача создания тепловой карты для нашего API.

Когда мы определились с тем, что от нас нужно, мы начали думать над тем, как это сделать. Есть два принципиально различных метода для задания тепловой карты:

• с помощью двухмерного скалярного (плоского) поля (фактически это функция двух переменных);
• с помощью набора простых или взвешенных точек (каждой точке в соответствие ставится какое-то положительное число - ее вес).

Первый метод является более универсальным и включает в себя второй, но в тоже время он очень неудобен для использовании на практике (как часто вам предоставляют данные в виде функций нескольких переменных?), да и выглядит странно и непонятно для неподготовленных пользователей. Поэтому без лишних угрызений совести мы приняли решение, что будем использовать именно второй метод.

Для удобства работы пользователей мы решили, что будем поддерживать все самые популярные форматы входных данных, которые используются в API (Number, IGeoObject, IGeoObject, ICollection, ICollection, GeoQueryResult, JSON), из-за этого нам пришлось наложить не сильно приятное ограничение на программный интерфейс теплокарт. Теплокарте можно задавать только набор данных и нельзя удалять или добавлять точки из этого набора. Таким образом, для работы с данными мы предоставляем всего лишь два метода: getData() и setData().

После того, как мы получили данные, мы приводим их к единому формату и переводим в глобальные пиксельные координаты . С такими данными уже относительно просто работать, поскольку для каждого тайла можно легко сказать, какие точки в него попадают, а какие нет.

После того, как данные были предподготовлены можно начать их отрисовывать. Как отрисовывать вопроса, вроде, не стоит (Canvas - наше все, тем более, у него есть замечательная функциональность getDataURL, особенно необходимый в нашем случае, поскольку именно url тайла мы должны предоставить API).

Для отрисовки каждой отдельной точки будем использовать кисть (рисунок слева), которая представляет из себя черно-белый градиент и рисуется на canvas"е весьма просто:

Var brush = document.createElement("canvas"), context = brush.getContext("2d"), radius = 20, gradient = context.createRadialGradient(radius, radius, 0, radius, radius, radius); gradient.addColorStop(0, "rgba(0,0,0,1)"); gradient.addColorStop(1, "rgba(0,0,0,0)"); context.fillStyle = gradient; context.fillRect(0, 0, 2 * radius, 2 * radius);
Вес точки будет определять, с какой прозрачностью кисть будет «рисовать» точку на тайле. После того, как мы отрисуем все точки тайла, у нас получится такой себе негатив нашего тайла тепловой карты.

var canvas = document.createElement("canvas"), context = canvas.getContext("2d"), maxOfWeights = 1, radius = 20; context.clearRect(0, 0, 256, 256); for (var i = 0, length = points.length; i < length; i++) { context.globalAlpha = Math.min(points[i].weight / maxOfWeights, 1); context.drawImage(brush, points[i].coords - radius, points[i].coords - radius); }
После чего тайл будет раскрашен установлением цвета каждому пикселю из градиента (options.gradient) в соответствии со значением его прозрачности. Прозрачность же каждого пикселя тайла будет равна общей прозрачности тепловой карты (options.opacity).

// Создаем градиент. var canvas = document.createElement("canvas"), context = canvas.getContext("2d"), gradient = context.createLinearGradient(0, 0, 0, 256), gradientOption = { 0.1: "rgba(128, 255, 0, 0.7)", 0.2: "rgba(255, 255, 0, 0.8)", 0.7: "rgba(234, 72, 58, 0.9)", 1.0: "rgba(162, 36, 25, 1)" }; canvas.width = 1; canvas.height = 256; for (var i in gradientOption) { if (gradientOption.hasOwnProperty(i)) { gradient.addColorStop(i, gradientOption[i]); } } context.fillStyle = gradient; context.fillRect(0, 0, 1, 256); // Раскрашиваем пиксели тайла. var gradientData = context.getImageData(0, 0, 1, 256).data; var opacity = 0.5 for (var i = 3, length = pixels.length, j; i < length; i += 4) { if (pixels[i]) { j = 4 * pixels[i]; pixels = gradientData[j]; pixels = gradientData; pixels = gradientData; pixels[i] = opacity * (gradientData || 255); } }
Вроде как и все, но нет. Всегда найдутся какие-то исключительные ситуации, которые придется обработать дополнительно. И в нашем случае возможность задания неограниченного сверху веса точки может привести к тому, что одна точка «погасит» все остальные. Так, например, если добавить на карту несколько сотен точек с весом один и одну точку с весом тысяча, то видна будет только последняя (рисунок слева).

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Тепловая в «Метрике» «Яндекса» – это полезный, и удобный инструмент анализа поведения пользователей на сайте. Если хотите знать, какие элементы страницы отвлекают внимание от заветных кнопок «купить» и «оставить заявку», что ищут на сайте московские женщины и как ведут себя пользователи, перешедшие из соц.сетей, то вам сюда. В статье: базовые понятия, краткий обзор функций и сценариев применения сервиса. 10-ти приемов для повышение конверсии, кочующих из статьи в статью здесь не будет.

В статьях про карту кликов «Яндекса» в основном перечисляют режимы ее работы, дают пару и на этом закругляются. Как ее применять вообще не объясняют, видимо думают, что все рождаются веб-аналитиками и все и так знают. Я не буду так делать, а вместо этого приведу пару примеров того, как с помощью этого инструмента анализировать поведение пользователей и совершенствовать сайта. Но обо всем по порядку, поэтому начнем с базы.

Что это такое?

Кликов – это визуализация статистики по самым закликиваемым элементам на сайте. Она помогает понять, на что пользователи обращают больше всего внимания и какие фрагменты дизайна принимают за кнопки и активные ссылки. Карта кликов сайта доступна в «Яндекс.Метрике» и в большинстве платных сервисов веб-аналитики. Выбирать можно любую, но мы расскажем об инструменте «Яндекса», потому что свое, родное и любимое.

Как работает карта кликов «Яндекса»?

В «Метрике» есть четыре варианта визуализации отчетов:

• Тепловая карта кликов – вариант по умолчанию. В этом случае элементы страницы, по которым кликают относительно часто, подсвечиваются теплыми цветами (красный, оранжевый, желтый), а менее популярные – холодными (зеленый, синий, фиолетовый).
• Монохромная . То же самое, только используется единственный красный цвет. Чем ярче область, тем больше по ней кликают, а чем тусклее, тем меньше.

• Карта кликов по ссылкам и кнопкам. В этом случае все взаимодействия пользователей с сайтом делятся на два вида: клики по ссылкам и кнопка и обычные. Первые отмечаются красным или ранжевым, а вторые – синим.

• Прозрачная. Здесь работает все тот же принцип, единственное отличие в способе визуализации. Чем чаще нажимают на элемент, тем прозрачней в его области темная «маска», наложенная на сайт. Сразу понятно, на что смотрят посетители.

• Карта элементов. В этом режиме подсвечиваются не конкретные области, а элементы целиком. Этот режим можно включать просто чтобы доставить себе эстетическое удовольствие (вы поймете, о чем я).

Что умеет карта кликов «Яндекса»?

Настраивать сегмент аудитории, о котором вы хотите получить информацию. Разбираем по пунктам.

1. Настройка параметров просмотра. Можно учитывать только те, в которых посетитель заходил определенный URL, кликал по какому-либо заголовку и так далее.
2. Настройка параметров визита. Здесь можно отфильтровать пользователей по географии, типу устройства, поведению, источнику перехода и истории посещений.
3. Дополнительная настройка профиля пользователя. Можно отфильтровать по полу, возрасту, географии и другим параметрам.
4. Выбор периода. Здесь все просто: от одного дня до года.
5. Сравнение двух сегментов. Если хотите сравнить поведение пользователей в этом и предыдущем месяце или двух разных сегментов аудитории, выбирайте этот пункт.

В качестве примера я выбрал пришедших из поиска мужчин, которые переходили по ссылке на блог. Количество кликов не покажу.

Как применять тепловую карту кликов в «Яндекс.Метрике»?

Банально, но для тестов и аналитики. В самом простом сценарии можно посмотреть, что интересно посетителю сайта: каталог товаров, описание услуг, страница контактов или блог. Исходя из этой информации можно скорректировать путь пользователя на сайте, чтобы ему жилось проще и веселее. Например, запихнуть популярную ссылку на блог повыше и полевее. Для этого подойдет режим тепловой карты кликов, стоящий по умолчанию.

Второй вариант – посмотреть, какие элементы дизайна люди ошибочно принимают за кнопки и активные ссылки. Это поможет очистить страницу от вещей, которые перетягивают на себя внимание. Допустим, у вас на главной есть какая-то плашка, очень похожая на форму для заполнения. Причем вы об этом и не подозреваете, потому что ни разу не открывали карту кликов. А люди кликают по плашке но их постигает разочарование, потому что ничего не происходит. Не надо быть специалистом по UX, чтобы понять, что это плохо. Такие ложно-активные элементы отвлекают внимание пользователя от настоящих кнопок, заставляют его тратить больше времени на навигацию и снижают удобство сайта. Чтобы их найти, проще всего включить карту кликов по кнопкам и ссылкам.

Третий вариант – оценить, как работает перелинковка на странице или какие пункты меню чаще всего выбирают люди. Здесь поможет карта кликов по элементам. Вообще, это очень полезный режим, потому что он нагляднее, чем режим по умолчанию и никогда не вводит в заблуждение, как режим с активными ссылками. Поясню. НА предыдущем скриншоте несколько областей выглядят почти одинаково оранжево, поэтому понять, какая ссылка популярней, довольно сложно. С помощью карты кликов по элементам мы избавляемся от проблемы легко и изящно – все цвета получаются максимально разными.

Наконец, можно посмотреть, куда чаще всего клацает какой-то конкретный сегмент аудитории. Например, люди пришедшие из соцсетей или поиска, жители Казани или школьники с айфонами (нет). Для этого нужно воспользоваться панелькой, о которой я рассказывал выше.

Резюмируем

Тепловая карта кликов помогает улучшать юзабилити сайтов, выстраивать для клиента оптимальный путь к целевому действию и анализировать поведение разных групп пользователей.

Что делать, если карта кликов в «Метрике» не работает?

Такое бывает, если сайт защищен от показа в iframe или вы используете nginx. Подробную инструкцию, как действовать в этом случае дал сам «Яндекс», но на всякий случай повторим.

Если у вас стоит iframe, нужно добавить в исключения домен «Вебвизора» (webvisor.com), его поддомены и ваш собственный домен. Сделать это можно через регулярное выражение:

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

В случае с nginx, дополнительный код с исключениями выглядит вот так:

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

А есть другие инструменты?

Да, тепловых карт кликов много, некоторые предлагаются в составе других инструментов веб-аналитики, а некоторые отдельно или в виде плагина для CMS. В принципе, все они делают примерно одно и то же, отличаются только детализацией данных. Примеры:

• ClickHeat:
• Mouseflow:
• CrazyEgg:
• OpenWebAnalytics.

Первые три – платные сервисы, а OWA можно скачать просто так.

Что в итоге?

Карта кликов «Яндекса» помогает следить за поведением пользователя, оптимизировать его путь до целевого действия, оценивать эффективность разных элементов страницы и получать еще кучу полезной информации. Если делать все правильно и учитывать данные, которые дает эта метрика, можно ненароком увеличить конверсию и повысить удобство сайта. Если это вас не пугает, то вперед, делайте.

Карта кликов - инструмент для измерения и отображения статистики по кликам на вашем сайте. Карта отображает клики по всем элементам страницы (в том числе по тем, которые не являются ссылками). При этом можно увидеть не только взаимодействие посетителей с одной страницей, но и агрегированную статистику по группе страниц сайта . Например, получить статистику по отдельному разделу.

Карта кликов помогает оценивать юзабилити сайта, выявлять наиболее кликабельные элементы, определять, какие элементы дизайна кажутся посетителям сайта ссылкой, но таковой не являются.

Клики на карте подсвечиваются разными цветами в зависимости от их частоты. На карте указано общее количество кликов на странице (группе страниц) и доля кликов, попавших в текущую видимую вам область.

Вы можете использовать несколько режимов отображения карты:

«Тепловая карта» - теплые цвета соответствуют частым кликам, холодные - редким.

• «Монохромная карта» - плотность цвета соответствует частоте кликов в данной точке.
• «Клики по ссылкам и кнопкам» - на карте не отображаются клики по элементам, не являющимся ссылками или кнопками.

«Карта прозрачности» - карта кликов отображается как «туманная маска» : наиболее кликабельные элементы более четко проступают сквозь «туман» .

• «Карта элементов» - на карте отображаются все элементы страницы сайта.

Статистика по группе страниц

Для просмотра статистики по группе страниц можно использовать дополнительные символы в поле для ввода URL.

Символ	Описание	Пример
*
~		регулярному выражению

Символы, используемые при отображении статистики

Символ	Описание	Пример
*	Соответствует любому количеству любых символов	Отобразить данные по всем страницам, URL которых начинается с https://example.com/goods/, включая указанную страницу: https://example.com/goods/* . Если ввести в поле адрес без символов, Метрика предложит вам в выпадающей подсказке строку с символом *
~	Условие является регулярным выражением	Отобразить данные по страницам, URL которых удовлетворяет регулярному выражению . Например, ~http://example.com/.*

Рассмотрим пример. Необходимо получить статистику по страницам, входящим в каталог https://example.com/goods/. Чтобы данные отобразились на карте, введем в поле адрес https://example.com/goods/* (после ввода этот же адрес отобразится в выпадающей подсказке). Данные загрузятся автоматически.

Карта будет отображена на наиболее популярной странице сайта, URL которой соответствует указанному условию. Числовые показатели (количество просмотров, кликов, доля видимых кликов) будут являться объединенными для всех страниц, соответствующих условию.

Показ данных в iframe

Если ваш сайт защищен от показа в iframe (то есть в настройках сервера используется заголовок X-Frame-Options), то собранные данные будут недоступны для просмотра. Чтобы просмотреть данные о посещении сайта, необходимо добавить в настройки сервера исключение для домена webvisor.com и его поддоменов, а также для домена вашего сайта с помощью регулярного выражения

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

Если вы используете nginx, добавьте следующие исключения в конфигурацию:

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 }

где yourdomain\\.com - имя домена вашего сайта. Используйте доменную зону вашего сайта (может отличаться от.com).

Ограничение размера страниц

Для отображения данных на карте необходимо соблюдать некоторое ограничение размера страниц сайта. Ниже указаны значения для отображения карты в разных браузерах:

Браузер	Максимальная высота/ширина страницы (в пикселах)	Максимальное количество пикселей
Mozilla Firefox	32 767	472 907 776 (22 528 x 20 992)
Chrome	32 767	268 435 456 (16 384 x 16 384)
Internet Explorer	8 192	67 108 864 (8 192 x 8 192)

Показывающий статистику по кликам на сайте. Важно не путать карту кликов с картой ссылок: последняя отображает только клики по ссылкам, а карта кликов – клики по всем элементам страницы. При этом клики привязываются к DOM-элементам страницы, то есть, если меняются размеры элемента или его положение на экране, то клик меняется аналогичным образом.

Необходимость

Карта кликов показывает наиболее кликабельные, то есть привлекательные для пользователя элементы. Благодаря этому можно оценить юзабилити и дизайн сайта: пользователь нажимает на некую иконку, которая кажется ему ссылкой. Следовательно, иконка либо схожа с гиперссылкой внешне либо по логике пользователя должна вести на другую страницу, увеличиваться (если это картинка) или активизироваться каким-то иным способом.

Другой случай: сайт с часто обновляющимся контентом, например, новостной лентой. Карта кликов покажет, какая новость пользуется большей популярностью за счет ее расположения, а карта ссылок покажет количество переходов на страницу с новостью. Таким образом можно определить, какие события действительно интересуют пользователей, а какие просто удачно расположены.

Внешний вид

Карта кликов находится на вкладке «Поведение», представляет собой таблицу страниц сайта. Выбранная для просмотра страница открывается в новом окне, в нижней части которого расположены настройки показа карты кликов и 3 других отчета Яндекс.Метрики: карта ссылок, карта скроллинга и аналитика форм. В любой момент аналитик может переключиться между отчетами, не уходя со страницы. В верхней части страницы отражены настройки яркости и прозрачности клика.

Варианты отображения карты кликов:

• Цветная карта . Самые «привлекательные» участки обозначены теплыми цветами (красный – максимум), участки с редкими кликами – холодными (синий – минимум);
• Монохромная карта . Плотность цвета равна частоте кликов в данной точке;
• Клики по ссылкам и кнопкам : красным цветом отображаются клики по активным элементам, синим – обычные клики;
• Все клики одним цветом : как и монохромная карта, только клики отображаются точками;
• Карта прозрачности . Страница залита темным фоном, сквозь который проступают наиболее кликабельные участки. Чем кликабельнее элемент, тем четче он виден;
• Карта элементов : отображение не отдельных кликов, а элементов сайта.

Также внизу находятся фильтры по тегам и по времени кликов, ссылка для перехода в полный экран и другие опции. Указывается среднее время от загрузки страницы до клика и общее количество кликов.

Настройка карты кликов

При редактировании на вкладке «Код счетчика» нужно поставить галочку напротив поля «Карта кликов». В поле код счетчика появится вызов yaCounterXXXX.clickmap(). После чего нужно заменить код на сайте на новый. При добавлении нового счетчика «Карта кликов» установлена по умолчанию.