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

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

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: 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:

```
GET https://docs.umg.team/main/ussp.io/ustanovka-bannernykh-blokov.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
