Тепловые карты, записи сессий и согласие на cookie

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

Посмотреть глазами человека

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

Тепловые карты. На картинке страницы цветом показано, где что-то происходит.

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

Записи сессий. Программа записывает действия одного посетителя (движения мыши, клики, прокрутку) и воспроизводит их как видео. В Яндекс Метрике это Вебвизор, у Microsoft бесплатный Clarity. Записи помогают увидеть то, чего не видно в числах: человек много раз нажимает на то, что не работает («яростные клики»), долго ищет кнопку, бросает заполнение формы на одном и том же поле.

Они ценны, но у них есть цена. Запись это данные о конкретном человеке: что он нажимал, что вводил, что читал. Поэтому остальная часть урока про то, как смотреть и не навредить.

Как смотреть, чтобы была польза

1. Начните с числа. В воронке найдите самый слабый шаг (прошлый урок) и смотрите записи только тех, кто на нём остановился.
2. Смотрите по плану. Двадцать записей на слабом шаге полезнее, чем двести случайных.
3. Ищите повторяющееся. Один человек со странным поведением это случай, пятеро с тем же затруднением это находка.
4. Записывайте вывод как гипотезу (первый урок): «люди не видят кнопку под изображением», а потом проверяйте.
5. Помните про устройства. Карты и записи на телефоне и на компьютере выглядят по-разному, и вывод из одних нельзя переносить на другие.
6. Не поддавайтесь подгонке. Если вы ищете подтверждение своей идеи, вы его найдёте в любой записи. Формулируйте, что будет считаться опровержением.
7. Помните о малых числах. Карта по сорока визитам это не статистика, а подсказка.

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

Приватность записи

Откройте схему. Это выдуманный посетитель, который заполняет форму, и то, что попадает в запись. Включайте и выключайте правила и смотрите, что видит владелец сайта.

ЦеныКонтакты и заявкаРасскажите о вашем деле

запись сессий включена поля формы замаскированы страница с описанием дела не записывается

Что делает посетитель

Страница: Контакты и заявка

• Имя: Иван Петров
• Телефон: +7 900 000-00-00

Что видно в записи

• Имя: Иван Петров
• Телефон: +7 900 000-00-00

Запись содержит личные сведения человека. Человек об этом не знает, если вы ему не сказали, а вы теперь отвечаете за эти данные.

Посетитель и его слова выдуманы. Принцип настоящий: записывайте поведение, а не содержимое.

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

Что делать.

• Записывайте ровно то, что нужно. Включайте запись не на всём сайте, а на страницах, где вы ищете проблему (принцип минимизации: объём данных должен соответствовать цели; в 152-ФЗ это один из принципов обработки).
• Маскируйте поля. В Метрике достаточно поставить на поле класс ym-disable-keys: содержимое такого поля не попадёт в Вебвизор и аналитику форм. Для блока на странице есть ym-hide-content, а ym-show-content разрешает показать часть внутри скрытого блока. В Clarity маскирование включают в настройках и атрибутом data-clarity-mask. Пароли и платёжные данные никогда не записывайте.
• Исключите чувствительные страницы: где человек описывает своё дело, личный кабинет, страницы с документами. Если вы эксперт, адвокат или врач, у вас ещё и профессиональная тайна: записывать описание чужого дела недопустимо.
• Задайте срок хранения и круг лиц. Запись нужна, пока вы разбираете проблему; потом её удаляют. Смотреть должны только те, кому это нужно для работы. Срок хранения в сервисе ограничен его настройками (смотрите справку), а сами правила вы записываете в политику.
• Скажите об этом человеку. В политике обработки данных (урок про юридические тексты) должно быть написано, что вы записываете действия, зачем, как долго храните и кто видит.
• Куда уходят данные. Для проекта в России важно, где хранятся данные. По 152-ФЗ первичная запись и хранение персональных данных граждан России должны происходить в базах на территории России; у иностранных сервисов с этим бывают вопросы. Поэтому здесь чаще выбирают Вебвизор Метрики, а Clarity, если выбираете его, нужно сначала показать юристу (это ориентир, а не консультация).

Согласие на cookie: баннер, который не обманывает

Cookie это маленькие файлы, которые сайт хранит в браузере человека. Счётчики пользуются ими, чтобы отличать нового посетителя от вернувшегося. В Европе закон (ePrivacy и GDPR) требует спрашивать согласие до того, как поставить необязательные cookie. В России отдельного закона о cookie нет, но данные, по которым можно узнать человека, могут быть персональными (152-ФЗ), и принято честно сообщать об их использовании. Подробности разберём в части про право; здесь ориентир на то, как сделать баннер без обмана.

Признаки честного баннера:

1. Две кнопки одного вида: «Принять» и «Отклонить». Если «Принять» яркая, а отказ мелкая ссылка, это тёмный паттерн (урок про границу манипуляции).
2. Ничего не отмечено заранее. Галочка «разрешить аналитику» пуста.
3. Счётчик не запускается до согласия. Баннер без блокировки это декорация. Для этого код счётчика делают «спящим»: type="text/plain" браузер не исполняет, и он ждёт ответа человека.
4. Отказаться так же просто, как согласиться, и потом человек может передумать (ссылка «Настройки cookie» в подвале).
5. Есть ссылка на политику.
6. Нет «стены из cookie»: отказ не закрывает человеку доступ к сайту.

Как устроено «спящее» подключение в минимальном виде. Код Метрики оформляют так:

<script type="text/plain" data-consent="analytics">
  ...код счётчика...
</script>

А единственный активный скрипт на странице запускает его после согласия:

<script>
  function allowAnalytics() {
    document.querySelectorAll('script[data-consent="analytics"]').forEach(function (s) {
      var n = document.createElement('script');
      n.text = s.text;
      document.head.appendChild(n);
    });
  }
  // при согласии вызываем allowAnalytics(), при отказе ничего не делаем
</script>

Этот каркас упрощён: в настоящем баннере вы ещё запоминаете выбор человека (в localStorage) и не спрашиваете снова. Если в проекте несколько сервисов, у каждого свой data-consent.

Проверьте себя: чем «спящий» код счётчика отличается от обычного?

У «спящего» тип text/plain, поэтому браузер его не исполняет и никаких данных не отправляет, пока человек не согласился: загрузчик запустит его только после нажатия «Принять». Обычный код работает сразу при открытии страницы.

Практика

Исправьте страницу и запишите правила.

1. Баннер: роль диалога, две равные кнопки, ссылка на политику, пустая галочка.
2. Счётчик: код Метрики в «спящем» script, единственный активный script это загрузчик без ym(.
3. Маскирование: класс ym-disable-keys на полях формы.
4. Правила записи сессий: страницы из брифа, что скрыто, что исключено, срок цифрой, кто видит, текст для политики (и по-английски, если в брифе есть английский).

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