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

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