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

Инструкция описывает части блоков и правила их установки.
Содержание
1.Введение
2.Общие рекомендации по установки UMG banner HTML markup
3.Примеры UMG banner HTML markup
1.Пример HTML markup с двумя баннерными рекламными местами на странице
2.Пример HTML markup с одним баннерным плейсментом на странице 
4.Постбеки формата banner HTML markup
2. Введение
Banner — простой баннер, который отображает картинку со ссылкой. Встраивается в контент страницы сайта и начинает проигрываться, как только загружается страница сайта в браузере пользователя. 
2. Общие рекомендации по установки UMG banner HTML markup
Пункт 1
Разместить JavaScript код вызова. В тег <head> </head> или вместе со скриптом инициализации в теге <body> </body> Код вызова:
<script src="https://demo.watchfeed.tv/inventory/core.js" async type="text/javascript"></script>
Пункт 2
Определитесь с местом, в который вы хотите разместить баннер и присвойте контейнеру уникальный идентификатор. Если вы хотите разместить несколько баннеров на странице, то у каждого контейнера должен быть свой уникальный идентификатор. Код контейнера: 
<div id="ut-banner-1">
</div>
<div id="ut-banner-2">
</div>
Пункт 3
Разместить 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,
               },
           });
           return;
       }
       setTimeout(UTCoreInitialization, 100);
   })();
</script>
Если вы хотите разместить несколько баннеров, то необходимо разместить два (или больше) создания класса внутри одного кода. Код инициализации
<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>
3. Примеры UMG banner HTML markup
3.1 Пример HTML markup с двумя баннерными рекламными местами на странице
​Пример HTML markup с двумя баннернами на странице по ссылке​
<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>
3.2 Пример HTML markup с одним баннерным плейсментом на странице
​Пример HTML 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>
4. Постбеки формата banner HTML markup
Формат постбеков
{ "uid":"", "prefix": "СРЕДА", "message":"creativeView" }
preifx зависит от среды, значение по умолчанию union
uid рандомный UID генерируется при инициализации, служит для разделения несколько экземпляров баннера на одной странице. Если вызвано несколько баннеров и необходимо понять от какого из них приходят сообщения, то можно задать этот uid вручную, при инициализации.
Пример заданного uid
new window.UTInventoryCore({
  type: "banner",
  uid: "uniq_uid"
  .....
});
Message (сообщения):
start - загрузка рекламного блока
creativeView - билинговое событие
finish - завершение работы рекламного блока (только в случае если креатив не подобрался)
​
Существует 2 сценария эмитации постбеков для формата UMG banner HTML markup
а. Реклама не найдена start  -> finish
б. Реклама найдена start  -> creativeView
​
uSSP.io
Last modified 3mo ago