> For the complete documentation index, see [llms.txt](https://docs.umg.team/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umg.team/main/~/revisions/irndDXueyAbFLscwKazi/ussp.io/ustanovka-bannernykh-blokov.md).

# Установка баннерных блоков

#### Содержание

1. Введение
2. Общие рекомендации по установки UMG banner HTML markup
3. Примеры UMG banner HTML markup
   1. Пример HTML markup с двумя баннерными рекламными местами на странице
   2. Пример HTML markup с одним баннерным плейсментом на странице&#x20;
4. Постбеки формата banner HTML markup

#### 2. Введение

Banner — простой баннер, который отображает картинку со ссылкой. Встраивается в контент страницы сайта и начинает проигрываться, как только загружается страница сайта в браузере пользователя.&#x20;

#### 2. Общие рекомендации по установки UMG banner HTML markup

**Пункт 1**

Разместить JavaScript код вызова. В тег \<head> \</head> или вместе со скриптом инициализации в теге \<body> \</body> Код вызова:

{% code overflow="wrap" fullWidth="true" %}

```javascript
<script src="https://demo.watchfeed.tv/inventory/core.js" async type="text/javascript"></script>
```

{% endcode %}

**Пункт 2**

Определитесь с местом, в который вы хотите разместить баннер и присвойте контейнеру уникальный идентификатор. Если вы хотите разместить несколько баннеров на странице, то у каждого контейнера должен быть свой уникальный идентификатор. Код контейнера:&#x20;

{% code overflow="wrap" fullWidth="true" %}

```html
<div id="ut-banner-1">
</div>
<div id="ut-banner-2">
</div>
```

{% endcode %}

**Пункт 3**

Разместить Javascript код с инициализацией баннера. Важно, разместить его после контейнера. Например, в самом низу страницы. Код инициализации

{% code overflow="wrap" fullWidth="true" %}

```html
<script src="https://demo.watchfeed.tv/inventory/core.js" async type="text/javascript"></script>
<script>
   (function UTCoreInitialization() {
       if (window.UTInventoryCore) {
           new window.UTInventoryCore({
               type: 'banner',
               host: 56,
               container: 'ut-banner-1',
               width: 1440,
               height: 220,
              mobile: {
                   width: 720,
                   height: 280,
               },
           });
           return;
       }
       setTimeout(UTCoreInitialization, 100);
   })();
</script>
```

{% endcode %}

Если вы хотите разместить несколько баннеров, то необходимо разместить два (или больше) создания класса внутри одного кода. Код инициализации

{% code overflow="wrap" fullWidth="true" %}

```javascript
<script src="https://demo.watchfeed.tv/inventory/core.js" async type="text/javascript"></script>
<script>
   (function UTCoreInitialization() {
       if (window.UTInventoryCore) {
           new window.UTInventoryCore({
               type: 'banner',
               host: 56,
               container: 'ut-banner-1',
               width: 1440,
               height: 220,
              mobile: {
                   width: 720,
                   height: 280,
               },
           });
           new window.UTInventoryCore({
               type: 'banner',
               host: 55,
               container: 'ut-banner-2',
               width: 1440,
               height: 220,
              mobile: {
                   width: 720,
                   height: 280,
               },
           });
           return;
       }
       setTimeout(UTCoreInitialization, 100);
   })();
</script>
```

{% endcode %}

**3. Примеры UMG banner HTML markup**

**3.1 Пример HTML markup с двумя баннерными рекламными местами на странице**

[Пример HTML markup с двумя баннернами на странице по ссылке](https://ussp.w3spaces.com/demo_uadex_io/2-banners-block.html)

{% code fullWidth="true" %}

```html
<div id="ut-banner-1">
</div>

<div id="ut-banner-2">
</div>

<script src="https://demo.watchfeed.tv/inventory/core.js" async type="text/javascript"></script>
<script>
   (function UTCoreInitialization() {
       if (window.UTInventoryCore) {
           new window.UTInventoryCore({
               type: 'banner',
               host: 56,
               container: 'ut-banner-1',
               width: 1440,
               height: 220,
              mobile: {
                   width: 720,
                   height: 280,
               },
           });
           new window.UTInventoryCore({
               type: 'banner',
               host: 55,
               container: 'ut-banner-2',
               width: 1440,
               height: 220,
              mobile: {
                   width: 720,
                   height: 280,
               },
           });
           return;
       }
       setTimeout(UTCoreInitialization, 100);
   })();
</script>
```

{% endcode %}

**3.2 Пример HTML markup с одним баннерным плейсментом на странице**

[Пример HTML markup с одним баннером на странице по ссылке](https://ussp.w3spaces.com/demo_uadex_io/1-banner-block.html)

{% code fullWidth="true" %}

```markup
<div id="ut-banner-1">
</div>
<script src="https://demo.watchfeed.tv/inventory/core.js" async type="text/javascript"></script>
<script>
   (function UTCoreInitialization() {
       if (window.UTInventoryCore) {
           new window.UTInventoryCore({
               type: 'banner',
               host: 56,
               container: 'ut-banner-1',
               width: 1440,
               height: 220,
              mobile: {
                   width: 720,
                   height: 280,
               },
           });
           return;
       }
       setTimeout(UTCoreInitialization, 100);
   })();
</script>
```

{% endcode %}

**4. Постбеки формата banner HTML markup**

Формат постбеков

{% code fullWidth="true" %}

```markup
{ "uid":"", "prefix": "СРЕДА", "message":"creativeView" }
```

{% endcode %}

preifx зависит от среды, значение по умолчанию union

uid рандомный UID генерируется при инициализации, служит для разделения несколько экземпляров баннера на одной странице. Если вызвано несколько баннеров и необходимо понять от какого из них приходят сообщения, то можно задать этот uid вручную, при инициализации.

**Пример заданного uid**

{% code fullWidth="true" %}

```html
new window.UTInventoryCore({
  type: "banner",
  uid: "uniq_uid"
  .....
});
```

{% endcode %}

**Message (сообщения)**:

* start - загрузка рекламного блока
* creativeView - билинговое событие
* finish - завершение работы рекламного блока (только в случае если креатив не подобрался)

Существует 2 сценария эмитации постбеков для формата UMG banner HTML markup

а. Реклама не найдена start  -> finish

б. Реклама найдена start  -> creativeView


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.umg.team/main/~/revisions/irndDXueyAbFLscwKazi/ussp.io/ustanovka-bannernykh-blokov.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
