Установка баннерных блоков
Инструкция описывает части блоков и правила их установки.
- 1.Введение
- 2.Общие рекомендации по установки UMG banner HTML markup
- 3.Примеры UMG banner HTML markup
- 1.Пример HTML markup с двумя баннерными рекламными местами на странице
- 2.Пример HTML markup с одним баннерным плейсментом на странице
- 4.Постбеки формата banner HTML markup
Banner — простой баннер, который отображает картинку со ссылкой. Встраивается в контент страницы сайта и начинает проигрываться, как только загружается страница сайта в браузере пользователя.
Пункт 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
Last modified 3mo ago