Рекомендации по настройке и использованию

Для того чтобы настроить сбор данных по количеству показов и кликов для определённых блоков на страницах сайта, необходимо добавить data-атрибуты в разметку страниц и указать их в параметре attributes_dataset в коде счётчика.
При разметке блоков на странице следует придерживаться следующих принципов:
1. Определение значения data-атрибута должно быть добавлено для каждого блока, по которому требуется собирать статистику. Название полей, используемых для этого в разметке, должно соответствовать шаблону «data-<название>», где <название> – это наименование data-атрибута, из числа указываемых в коде счётчика в параметре attributes_dataset.
Data-атрибуты можно указать при создании счётчика в интерфейсе Топ-100, тогда они автоматически добавятся в код счётчика, который нужно будет установить на сайт. Либо data-атрибуты можно добавить вручную в уже установленный код счётчика.
Пример передачи значения data-атрибута just-test-attr в разметке блока на сайте:
<a href='link' data-just-test-attr="YOUR_LOGICAL_NAME">Link text</a>
Пример установки data-атрибута just-test-attr для счётчика в интерфейсе Топ-100:
Пример установки data-атрибута just-test-attr в коде счётчика:
<!-- Top100 (Kraken) Counter -->
// …
var options = {
project: PROJECT_ID,
attributes_dataset: [ 'just-test-attr' ],
};
// …
<!-- END Top100 (Kraken) Counter -->
Примечание: После клика на блок YOUR_LOGICAL_NAME будет зафиксировано событие “клик” just-test-attr::YOUR_LOGICAL_NAME.
2. Для построения дерева логической разметки необходимо использовать вложенные контейнеры с проставленными data-атрибутами.
Пример:
<div data-just-test-attr="YOUR_LOGICAL_CONTAINER">
<a href='link' data-just-test-attr="YOUR_LOGICAL_NAME_1">Linktext</a>
<div data-just-test-attr="YOUR_LOGICAL_CONTAINER_2">
<a href='link' data-just-test-attr="YOUR_LOGICAL_NAME_2">Linktext</a>
</div>
</div>
Примечание: При клике на ссылку YOUR_LOGICAL_NAME_2 будет зафиксировано событие just-test-attr::YOUR_LOGICAL_CONTAINER::YOUR_LOGICAL_CONTAINER_2::YOUR_LOGICAL_NAME_2.
3. Можно эмулировать вложенные блоки без привязки к DOM-разметке. Для этого на отдельный элемент DOM требуется назначить всю цепочку от 2-го уровня вложенности.
Пример:
<a href='link' data-just-test-attr="YOUR_LOGICAL_CONTAINER::YOUR_LOGICAL_CONTAINER_2::YOUR_LOGICAL_NAME_2">Linktext</a>
4. Существует возможность добавить отправку атрибутов сразу во все счётчики, которые есть на странице. Для этого используйте параметр common_attributes, указав в нем нужные data-атрибуты.
Пример:
<!-- Top100 (Kraken) Counter -->
// …
var options = {
project: PROJECT_ID,
attributes_dataset: [ 'just-test-attr' ],
common_attributes: [ 'just-common-attr' ],
};
// …
<!-- END Top100 (Kraken) Counter -->
<div data-just-common-attr="YOUR_LOGICAL_CONTAINER">
<a href='link' data-just-common-attr="YOUR_LOGICAL_NAME_1">Linktext</a>
<div data-just-common-attr="YOUR_LOGICAL_CONTAINER_2">
<a href='link' data-just-common-attr="YOUR_LOGICAL_NAME_2">Linktext</a>
</div>
</div>
Примечание: При клике на ссылку YOUR_LOGICAL_NAME_2 будет зафиксировано событие just-common-attr::YOUR_LOGICAL_CONTAINER::YOUR_LOGICAL_CONTAINER_2::YOUR_LOGICAL_NAME_2, которое будет отправлено во все счетчики на странице.
5. С помощью метода sendBlocks можно вызывать дополнительное сканирование блоков на странице (по атрибутам в отчётах аналитики блоков) и последующую отправку показанных новых блоков. Также в метод sendBlocks можно передать DOM-элемент - контейнер, в рамках которого нужно осуществить поиск и отправку показанных блоков.
Пример:
window.top100Counter.sendBlocks();
или
const container = document.getElementById('container');
window.top100Counter.sendBlocks(container);