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

1. Требования к HTML5 баннерам для разработчиков
Общие требования ко всем баннерам, загружаемых в систему Holder
- Запрещенно использовать функцию alert. Используйте вместо нее функцию console.log
- Архивировать нужно только файлы, а не папку в которой они находятся.
- Файл с html баннером должен лежать в корне архива. Разрешено использовать только подкаталоги с именами edge_includes, images, js, css, libs для подгружаемых в баннер файлов. Разрешенные форматы файлов - jpg, png, gif, svg, html, css, js, json.
- ZIP не должен превышать 450кб
- Если в процессе переопределяются стандартные события - перед этим они должны быть сохранены в tmp-переменные, и после окончания работы возвращены обратно.


1.1. Баннеры сделанные для системы Holder
Все подгружаемые элементы, должны быть высланы вместе с html файлом (который должен называться index.html), а их пути в HTML должны быть прописаны относительно. Если ваш html файл называется как-то по другому - следует переименовать его в index.html.
Общий вес всех элементов баннера не должен превышать 450Кб.
После того, как вы убедитесь что общий вес всех компонентов баннера не превышает 450Кб, их нужно запаковать в ZIP-архив в одной корневой папке, без подкаталогов. Архивировать нужно только файлы, а не папку в которой они находятся. Разрешенные форматы файлов - jpg, png, gif, html, css, js, json, svg.
- Структура HTML должна быть внутри одного элемента с id.
- HTML должен быть полностью готовым и рабочим, в т.ч. включать в себя ссылку перехода с баннера на рекламируемый сайт. Она должна иметь такой вид:

<a href='http://ссылка_перехода' onclick="return holderClick();" target="_blank">...</a>

Если кнопок перехода несколько, последующие необходимо делать такими:

<a href='http://вторая ссылка_перехода' onclick="return holderClick('http://вторая ссылка перехода');" target="_blank">...</a>

*стоит отметить, что атрибут onclick="return holderClick();" для события клика не обязательно добавлять в элементе <a>...</a>. В зависимости от задачи, этот атрибут может добавляться в любой html элемент который покрывает необходимую кликовую область баннера (например, это могут быть элементы div, canvas, body и др.)

- Все стили должны быть либо собраны в один 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>

Добавление баннера HTML5 в System.Holder:

Перед добавлением баннера убедитесь что:
- общий вес компонентов баннера НЕ ЗААРХИВИРОВАННЫХ в ZIP-архив не превышает 600Кб
- файлы запакованы в ZIP архив без подпапок
- файлы запакованы именно в ZIP архив (не в RAR, не в 7z, не в какой либо другой)

1) В интерфейсе кампании кликните "добавить баннер".
2) Выберите "Формат баннера:" (размер).
3) В "Тип баннера:" должно быть установлено "добавить файл" (обычно выбрано по умолчанию).
4) С помощью кнопки "Выберите файл" (сразу под пунктами "Тип баннера" и "Файл") добавьте ZIP-файл.
5) Установите ссылку перехода в поле "Рекламируемый URL:".
6) Далее, по необходимости, выполните остальные настройки и сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов). После добавления баннера все его файлы из ZIP-архива распакуются в одну папку и index.html будет главным файлом, который запустится внутри iframe.
Система сама сгенерирует ajax код который будет выводить iframe. Этот код будет иметь следующий вид:

holderDiv.div.innerHTML='<iframe src="//i.holder.com.ua/h/9/0/1238_0.html/?bn_url='+bn_url+'" width="'+width+'" height="'+height+'" scrolling="no" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"></iframe>';

где:

- ссылка src для iframe (в данном примере это //i.holder.com.ua/h/9/0/1238_0.html/) - это ссылка на папку сервера куда распаковались файлы из загруженного ZIP-архива (включая html файл index.html). Если html файл у вас назван index.html, как рекомендовалось выше, он запустится даже если ссылка ведет не на него, а на папку в которой он находится. Если же файл html у вас назван по другому (например banner.html, 300x250.html итд) нужно в сгенерированном ajax-коде добавить к ссылке на папку полное имя вашего html файла, иначе он не запустится. Например, если у вас файл html называется, допустим, banner.html - то для вышеуказанного кода src для iframe должно быть //i.holder.com.ua/h/9/0/1238_0.html/banner.html

- значения ширины width и высоты height для iframe в сгенерированном ajax-коде будут соответствовать размерам выбранного формата при загрузке баннера в поле Формат баннера:

Также, система при загрузке ZIP-архива подключит в вашем html файле дополнительный скрипт (файл html.js), который отвечает за определение функции учета кликов holderClick().

7) Проверьте баннер на клик кликнув по нему в интерфейсе кампании. Если баннер отобразился в интерфейсе System.Holder откройте консоль браузера (клавиша F12 или сочетание клавиш Ctrl+Shift+i, в появившемся меню выбрать Console) и убедитесь что отсутствуют ошибки javascript. Если баннер работает корректно и нет ошибок - кликните по нему еще раз. Если вы перешли на страницу с надписью:
В вашем баннере успешно установлена переменная bn_url, ведущая по ссылке http://(ваша ссылка перехода)
Можно включать баннер, клики будут учитываться.
В противном случае - баннер нужно переделать, чтобы все перечисленные критерии пункта 7 выполнялись.

onclick="return holderClick('//i.ua');"

Скачайте пример рабочего баннера.

Скачайте пример рабочего баннера созданого в Adobe Edge.

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

Скачайте пример рабочего баннера.

Убедитесь, что в html нет строки для Google AdSense

1.3. Баннер сделанный для системы AdRiver. HTML5 баннер, полученный конвертацией Swiffy-конвертером
Разрешается размещать HTML5 баннеры сделанные по техническим требования системы AdRiver, полученные конвертацией Swiffy-конвертером. Технические требования можно взять на сайте AdRiver

Скачайте пример рабочего баннера.

Убедитесь, что в html нет строки для Google AdSense

1.4. Баннер сделанный для системы Google AdWords. HTML5 баннер
Разрешается размещать HTML5 баннеры сделанные по техническим требования системы AdWords. Технические требования можно взять на сайте Google.com.

Скачайте пример рабочего баннера.

1.4. Баннер сделанный для системы Google AdWords. Flash баннер
Если у вас имеется swf баннер, вы можете его сконвертировать в html используя Swiffy конвернер. Убедитесь, что ваш Flash-баннер имеет переменную clickTAG перед конвертацией в Swiffy (Если ваш Flash-баннер не имеет кнопки перехода, используйте требования указаные в п.1.6)
Добавьте строчку кода для педечи переменной после stage.start();

stage.setFlashVars('clickTAG='+clickTAG);   

как указано в примере рабочего баннера.

1.5. Баннер сделанный для системы Admixer
Разрешается размещать HTML5 баннеры сделанные по техническим требования системы Admixer. Технические требования можно взять на сайте Admixer

Скачайте пример рабочего баннера.

Убедитесь, что в html нет строки для Google AdSense

1.6. Баннер полученный конвертацией Swiffy-конвертером без кнопки перехода
Если у вас имеется swf баннер, вы можете его сконвертировать в html используя Swiffy конвернер. Убедитесь, что ваш Flash-баннер не имеет кнопки перехода.
Необходимо добавить функцию перехода

onclick="return holderClick();"   

на div как указано в примере рабочего баннера.

1.7. Баннер полученный конвертацией Swiffy-конвертером с прописанной ссылкой в кнопкой перехода
В системе Holder есть возможность учитывать клик по всей области баннера, если в swiffy конвертере установленна прямая ссылка перехода. Пожалуйста, сообщите менеджеру, что в баннере установленна прямая ссылка перехода. Для размещения такого баннера используйте п.2.2.

Пример баннера, полученный конвертацией Swiffy-конвертером с прописанной ссылкой в кнопкой переход


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

2.1. Html баннер
1) В интерфейсе кампании кликните "добавить баннер".
2) Выберите "Формат баннера:" (размер).
3) В "Тип баннера:" должно быть установлено "добавить файл" (обычно выбрано по умолчанию).
4) С помощью кнопки "Выберите файл" (сразу под пунктами "Тип баннера" и "Файл") добавьте ZIP-файл.
5) Установите ссылку перехода в поле "Рекламируемый URL:".
6) Далее, по необходимости, выполните остальные настройки и сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов). После добавления все файлы распакуются в одну папку и index.html будет главным файлом, который запустится внутри iframe.
Система сама сгенерирует ajax код который будет выводить iframe.
7) Проверьте баннер на клик кликнув по нему в интерфейсе кампании. Если баннер отобразился корректно, кликните по нему еще раз. Если вы перешли на страницу с надписью:
В вашем баннере успешно установлена переменная bn_url, ведущая по ссылке http://(ваша ссылка перехода)
Можно включать баннер, клики будут учитываться.
В противном случае - баннер нужно переделать по нашим требованиям.

2.2. Html баннер, полученный конвертацией Swiffy-конвертером с прописанной ссылкой в кнопке перехода
Выберете "Тип баннера: AJAX код".
Введите код:

holderDiv.div.innerHTML='<div style="position:relative; cursor:pointer; overflow:hidden"><iframe src="//i.holder.com.ua/h/8/2/1087_18.html/" width="'+width+'" height="'+height+'" border="none" frameBorder="0" scrolling="no" style="border: 0px none;" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="false" hspace="0" vspace="0"></iframe><div onclick="window.open(\''+bn_url+'\')" style="position:absolute; display:block; top:0px; left:0px; width:'+width+'px; height:'+height+'px;"></div></div>';

Добавьте html файл и замените ссылку на баннер в коде.

cкрыть ответ

1. Требования к Video HTML5 баннерам с кнопкой play/без кнопки play с выкл. звуком для разработчиков

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

1.2. Баннеры сделанные для системы Holder
Все подгружаемые элементы, должны быть высланы вместе с баннером (index.html), а их пути в HTML должны быть прописаны относительно.
Общий вес всех элементов баннера не должен превышать 450Kb.
После того, как вы убедитесь что общий вес всех компонентов баннера не превышает 450Kb, их нужно запаковать в ZIP-архив в одной корневой папке, без подкаталогов. Архивировать нужно только файлы, а не папку в которой они находятся. Разрешенные форматы файлов - jpg, png, gif, html, css, js, json, svg.
- 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. Инструкция для менеджеров

2.1. ZIP-архив
Общий вес всех компонентов баннера не должен превышать 450кб. Среди них должен быть файл index.html. Названия файлов должны быть латинскими, не должны содержать спецсимволы (допустимы латинские буквы, цифры, символы тире и подчеркивания). Все компоненты баннера должны быть запакованы в ZIP-архив. Архив не должен содержать папок. В ZIP-архив должны быть запакованы только файлы (компоненты баннера), а не папка в которой они находятся.
1) В интерфейсе кампании кликните "добавить баннер".
2) Выберите "Формат баннера:" (размер).
3) В "Тип баннера:" должно быть установлено "добавить файл" (обычно выбрано по умолчанию).
4) С помощью кнопки "Выберите файл" (сразу под пунктами "Тип баннера" и "Файл") добавьте ZIP-файл.
5) Установите ссылку перехода в поле "Рекламируемый URL:".
6) Далее, по необходимости, выполните остальные настройки и сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов). После добавления все файлы распакуются в одну папку и index.html будет главным файлом, который запустится внутри iframe.
Система сама сгенерирует ajax код который будет выводить iframe.
7) Проверьте баннер на клик кликнув по нему в интерфейсе кампании. Если баннер отобразился корректно, кликните по нему еще раз. Если вы перешли на страницу с надписью:
В вашем баннере успешно установлена переменная bn_url, ведущая по ссылке http://(ваша ссылка перехода)
Можно включать баннер, клики будут учитываться.
В противном случае - баннер нужно переделать по нашим требованиям.

2.2. index.html
Если баннер состоит только из index.html (остальные компоненты лежат на стороннем сервере) нужно запаковать его в архив ZIP и загрузить этот архив в System.Holder так, как описано выше.

Или проделать следующее:
Открыть файл на редактирование и в блок head подключить файл html.js:

<head>
<script src="//i.holder.com.ua/html.js"></script>
</head>

Сохраните файл html. Зайдите в интерфейс кампании:
1) В интерфейсе кампании кликните "добавить баннер".
2) Выберите "Формат баннера:" (размер).
3) В "Тип баннера:" должно быть установлено "ввести AJAX код".
4) Введите следующий код:

holderDiv.div.innerHTML='<iframe src="ссылка на файл html" width="'+width+'" height="'+height+'" border="none" frameBorder="0" scrolling="no" style="border: 0px none;" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="false" hspace="0" vspace="0"></iframe>';

5) С помощью ссылки "Выберите файлы" (сразу под полем "Зеропиксели:") добавьте ваш файл html.
6) Установите ссылку перехода в поле "Рекламируемый URL:".
7) Сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов).
8) Откройте баннер на редактирование, кликните правой кнопкой мыши по ссылке на загруженный файл html и выберите "Скопировать адресс ссылки". Вставьте ссылку между кавычками вместо ссылка на файл html.
9) Далее, по необходимости, выполните остальные настройки и сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов).
10) Проверьте баннер на клик кликнув по нему в интерфейсе кампании. Если баннер отобразился корректно, кликните по нему еще раз. Если вы перешли на страницу с надписью:
В вашем баннере успешно установлена переменная bn_url, ведущая по ссылке http://(ваша ссылка перехода)
Можно включать баннер, клики будут учитываться.
В противном случае - баннер нужно переделать по нашим требованиям.

cкрыть ответ

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крыть ответ

1. Требования к ScreenGlide/Auto ScreenGlide HTML5 баннерам для разработчиков

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


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

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

holderDiv.options.bn_url = bn_url;
holderDiv.options.path="http://i.holder.com.ua/h/1/1/1078_0.html/";
/* Adriver HTML MPU code. Developed A.Fedotov 09.12.2013. Last edited A.Fedotov 15.04.2014 */
/* Adriver html MPU. 12.08.2015 A.Pozdnyakova */
var ar_big_name = 'panelBig.html',
ar_big_width = '300px',
ar_big_height = '300px',
ar_left_big = '-330',
ar_top_big = '-50px',

ar_small_name = 'panelSmall.html',
ar_small_width = '300px',
ar_small_height = '250px',

ar_align = '1', // position: 0 - right, 1 - left

ar_gif = '0.png', // GIF-file for small panel
ar_gif_href = '', // link from GIF
ar_gif_width = '300px', //
ar_gif_height = '250px', //

ar_initDone = function initDone() { // Первичная инициализация ролика
console.log('initDone');

sendEvent(0);
showPanel('panelBig');
showPanel('panelSmall');
//sendToPanel('panelSmall', 'playSmall');
//sendToPanel('panelBig', 'playBig');

},
ar_startScene = function (panel, sync) { // Диспетчер сценария
console.log('startScene');

switch (sync) {
case 'playSmall':
sendToPanel('panelSmall', 'playSmall');
break;
case 'playSmallMain':
sendToPanel('panelSmall', 'playSmallMain');
break;
case 'playBig':
sendToPanel('panelBig', 'playBig');
break;
case 'playBigMain':
sendToPanel('panelBig', 'playBigMain');
break;
case 'showPanelSmall':
showPanel('panelSmall');
sendToPanel('panelSmall', 'playSmall');
sendEvent(2);
break;
case 'showPanelBig':
showPanel('panelBig'); //delete it if you don't need autostart for your screenglide
sendToPanel('panelBig', 'playBig');
sendEvent(1);
break;
case 'hidePanelSmall':
hidePanel('panelSmall');
break;
case 'hidePanelBig':
hidePanel('panelBig');
break;
}
},

ar_pix = ''; // link to external statistic pixel

/* OPTIONAL */
var myListener = {
hide: function(panel, arg){
//debug('Do hide to ' + panel);

return true;
},
show: function(panel, arg){
//debug('Do show to ' + panel);

return true;
}
};
/* END OPTIONAL */

/********* no edit *********/

var a = holder(divName);

var ar_left_small = 0;
//var topOffset = -50;
if (ar_align == 1) ar_left_big = ar_left_big+'px';//parseInt(ar_small_width,10) - parseInt(ar_big_width,10) + 'px';


// Ф-и создания сценария
function showPanel(panel) { panel == 'panelSmall' ? a.MPUHTML.dispatch(panel, 'show', ar_left_small) : a.MPUHTML.dispatch(panel, 'show', ar_left_big); }
function hidePanel(panel) { a.MPUHTML.dispatch(panel, 'hide'); }
function sendEvent(n) { a.MPUHTML.dispatch(null, 'event', n); }
function sendToPanel(panel, command, arg) { a.MPUHTML.dispatch(panel, command, arg); }

//adriver.setPluginPath({mpuhtml: a.reply.comppath});
new holder.module('mpuhtml').onload(function(){



if (typeof window.postMessage !== 'undefined') {
a.MPUHTML = new holder.MPUHTML(a, {width:ar_small_width, height:ar_small_height}, myListener);

a.MPUHTML.addMaster(ar_initDone, ar_startScene);
a.MPUHTML.addPanel('panelSmall', {width:ar_small_width, height:ar_small_height, left:0, top:0}, ar_small_name);
a.MPUHTML.addPanel('panelBig', {width:ar_big_width, height:ar_big_height, position:'absolute', left: ar_left_big, top: ar_top_big, zIndex:65000}, ar_big_name);

a.MPUHTML.start();
} else if (ar_gif) {
a.p.innerHTML = a.makeImage(ar_gif, ar_gif_href, a.normalize(ar_gif_width), a.normalize(ar_gif_height));
}



});

cкрыть ответ

1. Требования к MPU HTML5 баннеру для разработчиков

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


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

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

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

holderDiv.options.bn_url = bn_url;
holderDiv.options.path="http://i.holder.com.ua/h/1/1/1078_0.html/";
/* Adriver HTML MPU code. Developed A.Fedotov 09.12.2013. Last edited A.Fedotov 15.04.2014 */
/* Adriver html MPU. 12.08.2015 A.Pozdnyakova */
var ar_big_name = 'panelBig.html',
ar_big_width = '300px',
ar_big_height = '300px',
ar_left_big = '-330',
ar_top_big = '-50px',

ar_small_name = 'panelSmall.html',
ar_small_width = '300px',
ar_small_height = '250px',

ar_align = '1', // position: 0 - right, 1 - left

ar_gif = '0.png', // GIF-file for small panel
ar_gif_href = '', // link from GIF
ar_gif_width = '300px', //
ar_gif_height = '250px', //

ar_initDone = function initDone() { // Первичная инициализация ролика
console.log('initDone');

sendEvent(0);
showPanel('panelBig');
showPanel('panelSmall');
//sendToPanel('panelSmall', 'playSmall');
//sendToPanel('panelBig', 'playBig');

},
ar_startScene = function (panel, sync) { // Диспетчер сценария
console.log('startScene');

switch (sync) {
case 'playSmall':
sendToPanel('panelSmall', 'playSmall');
break;
case 'playSmallMain':
sendToPanel('panelSmall', 'playSmallMain');
break;
case 'playBig':
sendToPanel('panelBig', 'playBig');
break;
case 'playBigMain':
sendToPanel('panelBig', 'playBigMain');
break;
case 'showPanelSmall':
showPanel('panelSmall');
sendToPanel('panelSmall', 'playSmall');
sendEvent(2);
break;
case 'showPanelBig':
showPanel('panelBig'); //delete it if you don't need autostart for your screenglide
sendToPanel('panelBig', 'playBig');
sendEvent(1);
break;
case 'hidePanelSmall':
hidePanel('panelSmall');
break;
case 'hidePanelBig':
hidePanel('panelBig');
break;
}
},

ar_pix = ''; // link to external statistic pixel

/* OPTIONAL */
var myListener = {
hide: function(panel, arg){
//debug('Do hide to ' + panel);

return true;
},
show: function(panel, arg){
//debug('Do show to ' + panel);

return true;
}
};
/* END OPTIONAL */

/********* no edit *********/

var a = holder(divName);

var ar_left_small = 0;
//var topOffset = -50;
if (ar_align == 1) ar_left_big = ar_left_big+'px';//parseInt(ar_small_width,10) - parseInt(ar_big_width,10) + 'px';


// Ф-и создания сценария
function showPanel(panel) { panel == 'panelSmall' ? a.MPUHTML.dispatch(panel, 'show', ar_left_small) : a.MPUHTML.dispatch(panel, 'show', ar_left_big); }
function hidePanel(panel) { a.MPUHTML.dispatch(panel, 'hide'); }
function sendEvent(n) { a.MPUHTML.dispatch(null, 'event', n); }
function sendToPanel(panel, command, arg) { a.MPUHTML.dispatch(panel, command, arg); }

//adriver.setPluginPath({mpuhtml: a.reply.comppath});
new holder.module('mpuhtml').onload(function(){



if (typeof window.postMessage !== 'undefined') {
a.MPUHTML = new holder.MPUHTML(a, {width:ar_small_width, height:ar_small_height}, myListener);

a.MPUHTML.addMaster(ar_initDone, ar_startScene);
a.MPUHTML.addPanel('panelSmall', {width:ar_small_width, height:ar_small_height, left:0, top:0}, ar_small_name);
a.MPUHTML.addPanel('panelBig', {width:ar_big_width, height:ar_big_height, position:'absolute', left: ar_left_big, top: ar_top_big, zIndex:65000}, ar_big_name);

a.MPUHTML.start();
} else if (ar_gif) {
a.p.innerHTML = a.makeImage(ar_gif, ar_gif_href, a.normalize(ar_gif_width), a.normalize(ar_gif_height));
}



});

cкрыть ответ

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

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

1.2. Баннеры сделанные для системы Holder
Все подгружаемые элементы, должны быть высланы вместе с баннером (index.html), а их пути в HTML должны быть прописаны относительно.
Общий вес всех элементов баннера не должен превышать 600 Кб.
После того, как вы убедитесь что общий вес всех компонентов баннера не превышает 600 Кб, их нужно запаковать в 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>


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

Перед добавлением баннера убедитесь что:
- общий вес компонентов баннера НЕ ЗААРХИВИРОВАННЫХ в ZIP-архив не превышает 600Кб
- файлы запакованы в ZIP архив без подпапок
- файлы запакованы именно в ZIP архив (не в RAR, не в 7z, не в какой либо другой)

1) В интерфейсе кампании кликните "добавить баннер".
2) Выберите "Формат баннера:" (размер).
3) В "Тип баннера:" должно быть установлено "добавить файл" (обычно выбрано по умолчанию).
4) С помощью кнопки "Выберите файл" (сразу под пунктами "Тип баннера" и "Файл") добавьте ZIP-файл.
5) Установите ссылку перехода в поле "Рекламируемый URL:".
6) Далее, по необходимости, выполните остальные настройки и сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов). После добавления баннера все его файлы из ZIP-архива распакуются в одну папку и index.html будет главным файлом, который запустится внутри iframe. Сохраните баннер.
7) Откройте баннер на редактирование. Из сгенерированного ajax-кода скопируйте адрес к загруженным компонентам, это будет ссылка типа:
//i.holder.com.ua/h/9/0/1238_0.html/
Скопируйте эту ссылку и подставьте в код ниже, в строку:
var fs_src_folder='//i.holder.com.ua/h/9/0/1238_0.html/';

Далее копируем весь скрипт который ниже с новой ссылкой, добавляем как AJAX код вместо текущего кода:

function init(){
var txt=document.createElement("a");
txt.id="iFrameFullScreen_text";
txt.style.position="fixed";
txt.style.bottom="20px";
txt.style.left="20px";
txt.style.color="#EEE";
txt.style.zIndex='65002';
txt.href = 'javascript:void(0);';
txt.onclick = function () {window.iFrameFullScreenClose(); return false;};
window.document.body.appendChild(txt);


window.timer = function(){
if(seconds>4 || seconds==0){ending='секунд'
}else{
if(seconds>1){ending='секунды'
}else{
ending='секунда'}
}//end if
if(seconds>0){
if(document.getElementById('iFrameFullScreen_text')){
document.getElementById('iFrameFullScreen_text').innerHTML = 'До повернення на сайт залишилось '+seconds+' '+ ending;
}
seconds--;
setTimeout(timer,1000);
}else{
window.iFrameFullScreenClose();
}//end if
}//end timer
//timer();


var fs_src_folder=' //i.holder.com.ua/h/9/0/1238_0.html/';
var seconds=15;
var fs=document.createElement("div");
fs.id="iFrameFullScreen";
fs.style.backgroundColor="#cdcdcd";
fs.style.position="fixed";
fs.style.top="0px";
fs.style.left="0";
fs.style.width="100%";
fs.style.height="100%";
fs.style.zIndex='65000';
window.document.body.appendChild(fs);
fs.innerHTML = '<iframe src="'+fs_src_folder+'index2.html?bn_url=' +bn_url + '" width="100%" height="100%" scrolling="no" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" onload="timer();"></iframe>';

var cls=document.createElement("a");
cls.id="iFrameFullScreen_close";
cls.style.position="fixed";
cls.style.top="40px";
cls.style.right="30px";
cls.style.width="41px";
cls.style.height="41px";
cls.style.zIndex='65001';
cls.href = 'javascript:void(0);';
cls.onclick = function () {window.iFrameFullScreenClose(); return false;};
window.document.body.appendChild(cls);
cls.innerHTML = '<img src="'+fs_src_folder+'close.png" />'


window.iFrameFullScreenClose = function(){
if(document.getElementById('iFrameFullScreen')){
var el = document.getElementById('iFrameFullScreen');
el.parentNode.removeChild(el);
}
if(document.getElementById('iFrameFullScreen_close')){
var el = document.getElementById('iFrameFullScreen_close');
el.parentNode.removeChild(el);
}
if(document.getElementById('iFrameFullScreen_text')){
var el = document.getElementById('iFrameFullScreen_text');
el.parentNode.removeChild(el);
}
}//end iFrameFullScreenClose

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var event = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child window
event(messageEvent,function(e) {if (e.data == 'hideSG') window.iFrameFullScreenClose();},false);

} // end init
window.onload = init();

cкрыть ответ

1. Требования к Frontline (Rich-Media) HTML5 баннерам для разработчиков

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

1.2. Баннеры сделанные для системы Holder
Все подгружаемые элементы, должны быть высланы вместе с баннером (index.html), а их пути в HTML должны быть прописаны относительно.
Общий вес всех элементов баннера не должен превышать 450 кб.
После того, как вы убедитесь что общий вес всех компонентов баннера не превышает 450 кб, их нужно запаковать в ZIP-архив в одной корневой папке, без подкаталогов. Архивировать нужно только файлы, а не папку в которой они находятся. Разрешенные форматы файлов - jpg, png, gif, html, css, js.
- 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>


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

2.1. ZIP-архив
Общий вес всех компонентов баннера не должен превышать 250кб. Среди них должен быть файл index.html. Названия файлов должны быть латинскими, не должны содержать спецсимволы (допустимы латинские буквы, цифры, символы тире и подчеркивания). Все компоненты баннера должны быть запакованы в ZIP-архив. Архив не должен содержать папок. В ZIP-архив должны быть запакованы только файлы (компоненты баннера), а не папка в которой они находятся.
1) В интерфейсе кампании кликните "добавить баннер".
2) Выберите "Формат баннера:" (размер).
3) В "Тип баннера:" должно быть установлено "добавить файл" (обычно выбрано по умолчанию).
4) С помощью кнопки "Выберите файл" (сразу под пунктами "Тип баннера" и "Файл") добавьте ZIP-файл.
5) Установите ссылку перехода в поле "Рекламируемый URL:".
6) Далее, по необходимости, выполните остальные настройки и сохраните баннер, сняв галочку "Добавить включенным" (сразу после приоритетов). После добавления все файлы распакуются в одну папку и index.html будет главным файлом, который запустится внутри iframe.
Система сама сгенерирует ajax код который будет выводить iframe.
7) Проверьте баннер на клик кликнув по нему в интерфейсе кампании. Если баннер отобразился корректно, кликните по нему еще раз. Если вы перешли на страницу с надписью:
В вашем баннере успешно установлена переменная bn_url, ведущая по ссылке http://(ваша ссылка перехода)
Можно включать баннер, клики будут учитываться.
В противном случае - баннер нужно переделать по нашим требованиям.

2.2. index.html
Если баннер состоит только из index.html (остальные компоненты лежат на стороннем сервере) достаточно загрузить его в интерфейсе баннера через ссылку "Добавить файлы", сохранить, открыть на редактирование, взять ссылку на загруженный файл index.html и подставляем ее в следующий код:
<script>
document.write('<iframe src="ссылка без http/https (например //example.com)?bn_url='+(bn_url)+'" width="300" height="250" scrolling="no" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0"></iframe>');
</script>
где, также, нужно указать правильные значения размеров баннера: ширины (width) и высоты (height) в пикселах.
В системе Holder добавляем баннер типа HTML. Вводим полученный код, ставим ссылку перехода в соответствующее поле и сохраняем.

cкрыть ответ

1. Content Roll (Video in page)
Для видео-ролика необходимо прислать исходник в максимально возможном разрешении, например 1280х720 или 1920х1080, формат flv, avi, mp4, mkv, mpeg, mov. Длительность ролика - по договоренности в рекламным отделом.
Наша система автоматически отконвертирует его в mp4.
После ролика отобразится картинка 640х360 - её надо прислать в формате jpeg, png, gif.

2. Preroll (InStream video)
Максимально допустимый размер сконвертированного видеофайла — 3500 кб.
Допустимые форматы: flv mov, avi, mp4, mkv, mpg. В наилучшем возможном разрешении, рекомендуем 1280х768 и выше, без чёрных полей. Система автоматически преобразует его к нашим требованиям.
Длительность видео не более 30 сек.

3. Postroll (InStream video)
Максимально допустимый размер сконвертированного видеофайла — 6500 кб.
Длительность видео не более 30 сек.

Звук ролика автоматически понижается плеером, при превышении определенного уровня.

cкрыть ответ

Mobile CatFish
Для размещения баннера нужны две картинки jpg, png или gif форматом 320рх*100рх и 640px*200px, вес каждой картинки до 60Кб. Желателен одинаковый фон по бокам.
CatFish 100%*100рх (или 100%*200px в зависимости от размера вьюпорта) с закрывающим крестиком появляется внизу экрана.

Mobile FullScreen
Для размещения баннера нужны 2 комплекта картинок:
1) 320рх*100рх и 320рх*480рх
2) 640рх*200рх и 640рх*960рх
Формат картинок jpg, png или gif
вес до 60Кб
Желателен одинаковый фон сверху-снизу/слева-справа.
Fullscreen (с закрывающим крестиком) появляется на весь экран мобильного телефона и через 5с сворачивается в CatFish 100%*100рх (или 100%*200px в зависимости от размера вьюпорта) внизу экрана.

cкрыть ответ