System.Holder™

Логин


зарегистрироваться

Пароль


напомнить пароль

Система
System.Holder™
О сети
Тарифы
Сайты
Технические требования

Вопросы по системе

Технические требования System.Holder™

Standart HTML5 баннер
Video HTML5 баннер
CatFish HTML5
1. Требования к CatFish HTML5 баннерам для разработчиков

1.1. Баннеры сделанные для системы AdRiver
Разрешается размещать CatFish HTML5 баннеры, сделанные по техническим требования системы AdRiver на коде AjaxJS. Технические требования можно взять на сайте AdRiver для формата CatFish

1. 2. Баннеры сделанные для системы Holder
Все подгружаемые элементы, должны быть высланы вместе с баннером (index.html), а их пути в HTML должны быть прописаны относительно.
Общий вес всех элементов баннера не должен превышать 450Kb.
После того, как вы убедитесь что общий вес всех компонентов баннера не превышает 450Kb, их нужно запаковать в ZIP-архив в одной корневой папке, без подкаталогов. Архивировать нужно только файлы, а не папку в которой они находятся. Разрешенные форматы файлов - jpg, png, gif, html, css, js, json.
- Cтруктура HTML должна быть внутри одного элемента с id.
- HTML должен быть полностью готовым и рабочим, в т.ч. включать в себя ссылку перехода с баннера на рекламируемый сайт. Она должна иметь такой вид
<a href='http://ссылка_перехода' onclick="return holderClick();" target="_blank">
Если кнопок перехода несколько, последующие необходимо делать таким
<a href='http://вторая ссылка_перехода' onclick="return holderClick('http://вторая ссылка перехода');" target="_blank">
- Все стили должны быть либо собраны в один inline, либо в один файл css. Если в стилях фигурируют конструкции URL (урл к картинке) - обязателен inline.
- Все скрипты должны быть либо собраны в один тег script, либо в один файл js. Если в скриптах фигурируют ссылки на внешние ресурсы - обязательно тег script, либо следует передавать url этих ресурсов в js из кода баннера параметрами.
- Если в процессе переопределяются стандартные события - перед этим они должны быть сохранены в tmp-переменные, и после окончания работы возвращены обратно.
- Стили должны определяться только относительно id начального родительского элемента, все id и css классы в коде баннеров должны содержать префикс h-banner_
- Скрипты должны работать относительно id начального родительского элемента.
- О размещении HTML5 баннера необходимо сообщить не позднее, чем за 5 рабочих дней до старта компании для согласования креатива. HTML5 креативы должны быть предоставлены для проверки и установки не позднее, чем за 3 рабочих дня до старта кампании.
В HTML необходимо указать такие параметры
<style>html, body {width: 100%; height: 100%; margin:0; padding:0;}</style>
Запрещенно использовать функцию alert. Используйте вместо нее функцию console.log

2. Добавление в Holder. Инструкция для менеджеров

Добавьте сперва ZIP-архив по инструкции
Затем, скопируйте ссылку //i.holder.com.ua/h/2/1/1080_1.html/ * путь к HTML баннеру. Добавьте скрипт, приведенный ниже, в систему Holder, как AJAX код. Подставьте ссылку (путь к HTML баннеру) в строку var ar_html = "http://i.holder.com.ua/h/2/1/1080_1.html/"; // путь к html баннеру и укажите правильные значения размеров панелей.
*Ссылка //i.holder.com.ua/h/2/1/1080_1.html/ взята только в качестве примера.

Копируем скрипт, добавляем как AJAX код:

a = holder(divName);
if (typeof(adriver)=='undefined') {
window.adriver = function (divID){
return holder(divID);
}
} else adriver.items[divName]=a;

a.options.bn_url = bn_url, a.options.flashVar='link1';

var ar_pix = ''; // зеропиксель
var ar_width = '100%'; // ширина баннера
var ar_height = 150; // высота баннера

var ar_html = "http://i.holder.com.ua/h/2/1/1080_1.html/"; // путь к html баннеру
var ar_close = "//i.holder.com.ua/banners/html/terik/banners/151005/990x180_queen_adriver2/closer.png" // путь к кнопке закрыть

a.addEvent = function(e,t,f)
{
if (e.addEventListener) e.addEventListener(t, f, false);
else if (e.attachEvent) e.attachEvent('on'+t, f);
}
a.getScreenGeometry = function()
{
var g = {}, d = document, db = d.body, de = d.documentElement, cm = d.compatMode == "CSS1Compat";

g.cw = cm && de.clientWidth || self.innerWidth || db.clientWidth;
g.ch = cm && de.clientHeight || self.innerHeight || db.clientHeight;
g.sl = self.pageXOffset || cm && de.scrollLeft || db.scrollLeft;
g.st = self.pageYOffset || cm && de.scrollTop || db.scrollTop;

g.sh = cm && de.scrollHeight || db.scrollHeight || db.offsetHeight;
g.sw = cm && de.scrollWidth || db.scrollWidth || db.offsetWidth;

g.sh = g.sh < g.ch ? g.ch : g.sh;
return g;
}
/****************************/

holder.merge(a.div.style, {zIndex: 65000, position: (window.attachEvent?'absolute':'fixed'), top:"0px", left:"0px", cursor:"pointer", width:ar_width, height:ar_height+"px",margin:0, padding:0});
document.body.appendChild(a.div);
a.reposition = function(){
if(window.attachEvent){
var s = a.div.style, g = a.getScreenGeometry();
s.top = (g.ch+g.st - ar_height) + "px";
s.left = 0;//(Math.ceil(g.sw/2)-ar_width/2) + "px";
}else{
var s = a.div.style, g = a.getScreenGeometry();
s.top = (g.ch - ar_height) + "px";
s.left = 0;//(Math.ceil(g.cw/2)-ar_width/2) + "px";
}
}
a.div.innerHTML = '<iframe src="'+ar_html+'?bn_url=' +bn_url + '" width="100%" height="150px" border="none" frameBorder="0" cursor="pointer"></iframe><a href="javascript:void(0);" onclick="javascript:vvsCloseAd()" style="position:absolute; top:4px; right:4px;"><img src="'+ar_close+'" width="22px"/></a>';
a.addEvent(window, 'resize', a.reposition);
if(window.attachEvent)a.addEvent(window, 'scroll', a.reposition);
a.reposition();

a.hide = window.bannerHide = function (){
a.div.style.display = 'none';
}


window.vvsCloseAd = function () {
a.div.style.display = 'none';
}

cкрыть ответ

ScreenGlide HTML5
MPU HTML5
FullScreen HTML5
Frontline (Rich-Media) HTML5
Video Ads
Mobile Ads