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

Для того чтобы настроить сбор данных по количеству показов и кликов для определённых блоков на страницах сайта, необходимо добавить data-атрибуты в разметку страниц и указать их в параметре [`attributes_dataset`](https://top-100-writer.gitbook.io/dokumentaciya-top-100-po-novoi-modeli-progress/nastroika-sbora-i-otpravki-dannykh/veb-schyotchik/parametry-schyotchika-top-100) в коде счётчика.

При разметке блоков на странице следует придерживаться следующих принципов:

1\. Определение значения data-атрибута должно быть добавлено для каждого блока, по которому требуется собирать статистику. Название полей, используемых для этого в разметке, должно соответствовать шаблону «`data-<название>`*»*, где `<название>` – это наименование data-атрибута, из числа указываемых в коде счётчика в параметре [`attributes_dataset`](https://top-100-writer.gitbook.io/dokumentaciya-top-100-po-novoi-modeli-progress/nastroika-sbora-i-otpravki-dannykh/veb-schyotchik/parametry-schyotchika-top-100).

Data-атрибуты можно указать при создании счётчика в интерфейсе Топ-100, тогда они  автоматически добавятся в код счётчика, который нужно будет установить на сайт. Либо  data-атрибуты можно добавить вручную в уже установленный код счётчика.&#x20;

**Пример передачи значения data-атрибута** `just-test-attr` **в разметке блока на сайте:**

```
<a href='link' data-just-test-attr="YOUR_LOGICAL_NAME">Link text</a>
```

**Пример установки data-атрибута** `just-test-attr` **для счётчика в интерфейсе Топ-100:**

<figure><img src="https://7631003-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPxw9DqlRH3nHzNm5NYPG%2Fuploads%2FURIK4s1nN8VjtrmmyKKa%2Fimage.png?alt=media&#x26;token=efc1674a-7ef5-4685-88f6-eef8bd87a1c6" alt=""><figcaption></figcaption></figure>

**Пример установки 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`](https://top-100-writer.gitbook.io/dokumentaciya-top-100-po-novoi-modeli-progress/nastroika-sbora-i-otpravki-dannykh/veb-schyotchik/parametry-schyotchika-top-100), указав в нем нужные data-атрибуты.&#x20;

**Пример:**

```
<!-- 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`](https://top-100-writer.gitbook.io/dokumentaciya-top-100-po-novoi-modeli-progress/nastroika-sbora-i-otpravki-dannykh/veb-schyotchik/metody-po-rabote-s-schyotchikom-top-100) можно вызывать дополнительное сканирование блоков на странице (по атрибутам в отчётах аналитики блоков) и последующую отправку показанных новых блоков. Также в метод [`sendBlocks`](https://top-100-writer.gitbook.io/dokumentaciya-top-100-po-novoi-modeli-progress/nastroika-sbora-i-otpravki-dannykh/veb-schyotchik/metody-po-rabote-s-schyotchikom-top-100) можно передать DOM-элемент - контейнер, в рамках которого нужно осуществить поиск и отправку показанных блоков.

**Пример:**

```
window.top100Counter.sendBlocks();
```

или

```
const container = document.getElementById('container'); 
window.top100Counter.sendBlocks(container);
```