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

Для того чтобы настроить сбор данных по количеству показов и кликов для определённых блоков на страницах сайта, необходимо добавить 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);
Описание принципов работы
Ограничения и особенности применения
Last modified 11mo ago