Banner.Holder™Ad.Holder™Context.Holder™System.Holder™Video.Holder™

Логин


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

Пароль


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

Система

Технические требования 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крыть ответ