System.Holder™

Логин


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

Пароль


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

Система

Инфо-центр
System.Holder

Если Вы все же не нашли нужную информацию, воспользуйтесь обратной связью.

System.Holder™

Требования для всех форматов баннеров HTML5 находятся тут:
Технические требования для всех форматов баннеров HTML5

Ниже требования только для обычного HTML5 баннера.

******************************************************************************************

Требования к обычному HTML5 баннеру (новые):

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

Все подгружаемые элементы, должны быть высланы вместе с 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 выполнялись.

***********************************************************************

Старые требования к обычному баннеру HTML5
- Общий вес всех элементов баннера не должен превышать 250кб
- Все подгружаемые элементы, должны быть высланы вместе с баннером (index.html), а их пути в html должны быть прописаны относительно. Все компоненты нужно запаковать в zip-архив в одной корневой папке, без подкаталогов. Архивировать нужно только файлы, а не папку в которой они находятся. Разрешенные форматы файлов - jpg, png, gif, html, css, js.
- Структура html должна быть внутри одного элемента с id.
- Html должен быть полностью готовым и рабочим, в т.ч. включать в себя ссылку перехода с баннера на рекламируемый сайт. Она должна иметь такой вид
<a href='http://ссылка_перехода' onclick="this.href=bn_url;return true;" target="_blank">
Если кнопок перехода несколько, последующие необходимо делать таким
<a href='http://вторая ссылка_перехода' onclick="this.href=bn_url+escape('http://вторая ссылка перехода');return true;" 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>

<script>bn_url=window.location.href.match(/bn_url=(.*)/)[1];</script>


Как добавить форматный HTML5 баннер

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

Если баннер состоит только из 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) в пикселах.
В System.Holder добавляем баннер типа html. Вводим полученный код, ставим ссылку перехода в соответствующее поле и сохраняем.

cкрыть ответ