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

Инструкция описывает части блоков и правила их установки.

Содержание

Введение
Общие рекомендации по установки UMG banner HTML markup
Примеры UMG banner HTML markup
1. Пример HTML markup с двумя баннерными рекламными местами на странице
2. Пример HTML markup с одним баннерным плейсментом на странице
Постбеки формата 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 с двумя баннерными рекламными местами на странице

<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 с одним баннерным плейсментом на странице

<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

PreviousОписание процесса синхронизации идентификаторов (Cookie Sync) между UMG DSP и сторонними SSP NextuSSP FAQ

Last updated 5 months ago

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

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

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