Карта кликов и скроллинга для сайта

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

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

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

Как работает карта кликов#

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

• Если элемент на странице больше не найден, клики рисуются по координатам страницы с пометкой «Вёрстка изменилась» и числом таких кликов.
• Если элемент найден, но не виден — например, скрыт в свёрнутом меню, — его клики не рисуются, а на панели видно, сколько таких элементов.
• Селектор элемента строится до ближайшего предка с устойчивым id. Классы не используются: они часто меняются и генерируются сборщиками стилей. Блокам, которые скрипт генерирует или переставляет, можно дать атрибут data-dara-id.

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

Карта строится отдельно для трёх групп ширины окна: «Телефон» — до 480 px, «Планшет» — 481–1024 px, «Компьютер» — больше 1024 px. Одна страница на телефоне и на компьютере свёрстана по-разному, поэтому каждая карта — для одной группы.

Что получает сайт#

• Карта на самом сайте. Кнопка «Открыть карту» в кабинете открывает страницу сайта в новой вкладке, и тег рисует карту поверх неё. Вид, устройство, период — сегодня, вчера, 7, 30 или 90 дней или свой — и сегмент выбираются на панели карты, данные перестраиваются без возврата в кабинет.
• Таблицы в кабинете. Раздел «Карты» строит таблицу элементов — селектор, текст, клики, бешеные клики, доля — и таблицу ссылок — адрес, текст, клики, доля. Карта скроллинга таблицей не строится: она рисуется только на сайте.
• Сегменты. Карту можно построить по всем визитам или по сохранённому сегменту — например, только по посетителям из рекламы или только по покупателям.
• Одностраничные сайты. Смену адреса без перезагрузки модуль карты замечает сам и перестраивает карту для новой страницы.
• Ваши просмотры не попадают в отчёты. В режиме карты тег не отправляет хиты.
• Доступ под контролем. Ссылка на карту действует час и привязана к вам, к сайту и к его доменам, а данные карты отдаются только на домены сайта. Доступ проверяется при каждом запросе данных.
• Хранение. Данные карт хранятся столько же, сколько хиты и визиты сайта, — 13 месяцев.

Раздел «Карты» видят все, у кого есть доступ к сайту.

Как подключить карты#

1. Зарегистрируйтесь по коду из письма и добавьте сайт — по шагам из раздела Быстрый старт.
2. Вставьте код тега перед </head> на всех страницах — инструкции для Tilda, 1С-Битрикс, WordPress, OpenCart и InSales в разделе Установка тега. Отдельного кода для карт нет.
3. Если сайт отдаёт заголовок CSP, добавьте в script-src и connect-src адрес https://analytics.daratech.ru. Директиву style-src менять не нужно: карта и панель не добавляют на страницу встроенных стилей.
4. Когда накопятся клики, откройте в кабинете раздел «Карты», выберите страницу — введите адрес или выберите из популярных за период — и нажмите «Открыть карту».

Подробно о видах карт, селекторах, группах ширины и скроллинге — в разделе документации Карты.