Карты

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

Виды карт#

Раздел «Карты» в кабинете#

1. Откройте «Карты» и выберите страницу — введите адрес или часть адреса или выберите страницу из популярных за период.
2. Выберите вид, группу ширины окна, период и сегмент. По ним кабинет строит таблицу элементов с кликами — селектор, текст, клики, бешеные клики, доля — и таблицу ссылок — адрес, текст, клики, доля. Доля элемента — часть всех кликов страницы, доля ссылки — часть всех кликов по ссылкам.
3. Карта скроллинга таблицей в кабинете не строится — она рисуется только на сайте.

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

Режим карты#

Нажмите «Открыть карту». Страница сайта откроется в новой вкладке, и тег нарисует поверх неё карту.

• Карта открывается со своими настройками. Выбор вида, группы ширины, периода и сегмента в кабинете на сайт не переносится: карта открывается видом «Клики» для группы ширины вашего окна за последние 30 дней.
• Параметры выбираются на панели карты прямо на сайте: вид — «Клики», «Ссылки», «Скроллинг»; устройство — «Телефон», «Планшет», «Компьютер»; период — сегодня, вчера, 7, 30 или 90 дней или свой период; сегмент — «Все визиты» или сохранённый сегмент. Данные перестраиваются без возврата в кабинет. Кнопка «Скрыть карту» убирает рисунок, не закрывая панель, «Закрыть карту» — закрывает режим карты.
• Если браузер не дал открыть вкладку, рядом с кнопкой появится ссылка «Открыть карту» — нажмите её.
• Кабинет открывает страницу с адресом вида https://example.ru/catalog#dara-map=…. Кроме токена, во фрагменте ничего нет. Тег убирает токен из адреса, загружает модуль карты и запрашивает данные.
• Токен действует час и привязан к вам, к сайту и к его доменам. Данные карты отдаются только на домены сайта. Доступ к сайту проверяется при каждом запросе данных: когда токен устарел или доступ отозван, панель просит открыть карту из кабинета заново.
• Если выбранный сегмент удалён или недоступен, карта перестраивается по всем визитам с пометкой на панели.
• Карта рисуется на самом сайте, а не во фрейме кабинета, поэтому запрет сайта на показ во фрейме её не касается.
• На сайтах, где адрес страницы задаётся после # (например, example.ru/#/catalog), страница откроется на главном адресе: перейдите на нужную страницу, и карта перестроится для неё. Смену адреса без перезагрузки модуль замечает сам.
• В режиме карты тег не отправляет хиты — ваши просмотры карты в отчёты не попадут.
• Если сайт отдаёт заголовок CSP, для режима карты нужны script-src и connect-src с адресом https://analytics.daratech.ru — те же, что для самого тега, подробнее в разделе Установка тега. Директиву style-src менять не нужно: карта и панель не добавляют на страницу встроенных стилей.

Группы ширины окна#

Одна страница на телефоне и на компьютере свёрстана по-разному, поэтому карта строится для одной группы.

Почему клики привязаны к элементам#

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

• Если элемент на странице больше не найден, клики рисуются по координатам страницы с пометкой «Вёрстка изменилась» и числом таких кликов.
• Если элемент найден, но не виден — например, скрыт в свёрнутом меню, — его клики не рисуются, а на панели видно, сколько таких элементов.

Как строится селектор#

• Селектор — до 8 шагов вверх по странице до ближайшего предка с устойчивым id.
• Шаги имеют вид tag#id, tag[data-dara-id="…"] или tag:nth-of-type(n).
• id из 4 и более цифр или похожие на хеш считаются неустойчивыми и не используются.
• Классы не используются: они часто меняются и генерируются сборщиками стилей.

Если важные блоки страницы генерируются скриптом или часто меняют порядок, дайте им устойчивый id или атрибут data-dara-id — тогда селектор кликов внутри блока не будет зависеть от порядка соседних элементов:

<section data-dara-id="delivery-options">
  <button type="button">Курьером</button>
  <button type="button">В пункт выдачи</button>
</section>

Скроллинг#

• Пока вкладка видима, тег раз в 500 мс отмечает видимую часть страницы.
• Страница делится на 20 полос по 5 % высоты. Для каждой полосы считается, какая доля просмотров страницы до неё дошла и сколько времени в среднем на ней провели те, кто дошёл.
• Просмотр засчитывается в полосе один раз, даже если посетитель несколько раз уходил со вкладки и возвращался.

Ссылки#

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

Хранение#

Данные карт хранятся столько же, сколько хиты и визиты сайта, — 13 месяцев.