Карта скроллинга и тепловые карты: что показывают и как использовать

Какие бывают карты

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

Что показывает каждая карта

Как читать карту скроллинга

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

• Поставьте главные вопросы и призывы туда, куда доходит большинство посетителей.
• Если призыв к действию расположен там, куда добирается малая часть людей, перенесите его выше или повторите.
• Сравнивайте карты для десктопа и телефона: длина и порядок блоков отличаются.
• Учтите, что «линии сгиба» с фиксированной высотой не существует: экраны бывают разными.

Как читать карту кликов

• Клики по неактивным элементам. Картинки, заголовки и подчёркнутый текст, на которые нажимают, но ничего не происходит, — повод сделать их ссылками или изменить оформление.
• Пропущенные кнопки. Если основная кнопка получает меньше кликов, чем второстепенная ссылка, проверьте заметность и текст.
• Использование меню. Сравните клики по пунктам меню с тем, что вы считаете главным: карта кликов и внутренняя перелинковка.

Порядок работы с картами

1. Выбирайте страницы с большим трафиком и важной целью: на страницах с десятком визитов карта не показывает закономерностей.
2. Дайте данным накопиться и не делайте выводов по первым посетителям.
3. Найдите аномалии: неожиданные клики, резкие обрывы скроллинга.
4. Внесите одну правку и сравните результаты за одинаковый период.

Свои события глубины прокрутки

Если готовой карты нет, можно отправлять события при достижении контрольных точек и потом смотреть их в отчётах. Ниже пример для счётчика Метрики. Цели с такими идентификаторами нужно создать в настройках счётчика, а вместо номера подставьте свой.

var sent = {};
window.addEventListener('scroll', function () {
  var doc = document.documentElement;
  var pct = Math.round((doc.scrollTop + window.innerHeight) / doc.scrollHeight * 100);
  [25, 50, 75, 100].forEach(function (mark) {
    if (pct >= mark && !sent[mark]) {
      sent[mark] = true;
      ym(12345678, 'reachGoal', 'scroll_' + mark);
    }
  });
}, { passive: true });

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

Чего не стоит делать

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

Частые вопросы