Технические требования к баннерам HTML5 на сайте «Фонтанка.ру»

1. Формат присылаемых данных — ZIP-архив.

2. Размер архива не должен превышать 150 килобайт.

3. Архив может содержать один HTML-файл и несколько файлов в форматах JS, JSON, CSS, JPG, GIF, PNG, SVG.

4. Для имен файлов, директорий и переменных JS-кода допустимо использовать только латинский алфавит, цифры, без пробелов.

5. Открытие рекламируемого сайта должно происходить в новом окне, только по клику пользователя на баннер.

6. Все ссылки в баннере должны быть относительными путями в ZIP-архиве. Не должно быть внешних сетевых обращений.

Примечание: В баннере разрешены внешние ссылки на некоторые базовые библиотеки, включённые в инструменты разработки на HTML5: Adobe Animate, Adobe Edge, CreateJS, GreenSock, Swiffy и другие. В этом случае допускаются только ссылки вида «https://»

7. Баннер не должен значительно нагружать процессор компьютера. Решение по каждому конкретному случаю принимает специалист компании.

Как прописать ссылку (кликабельную область)

1

Adobe Animate

Необходимо в самой программе создать баннер без кликабельной области, опубликовать его (File > Publish), а затем немного модифицировать код получившегося *.html файла следующим образом:

1. Добавить следующий код внутри тега <head>…</head> :
<script> 

var clickTag = 'http://www.ngs.ru/'; <!-- ваша ссылка перехода вместо этой -->

</script>
2. Добавить следующий код вокруг тега <canvas>…</canvas> :
<a href="javascript:window.open(window.clickTag)"> <!-- здесь ваш баннер в виде тега <CANVAS> </CANVAS> --> </a>
Чтобы не проделывать каждый раз эти манипуляции руками, можно воспользоваться шаблоном экспорта для программы Adobe Animate. Для этого скачайте шаблон, примените его в программе в меню File > Publish Settings > Advanced > Import New > [выбираете скачанный шаблон экспорта]. Теперь при публикации баннера, в файл *.html уже будет добавлен код описанный выше.
2

Google Web Designer

Создайте новый файл нужного размера с параметром Environment: DoubleClick либо AdMob либо AdWords.
На панели Components выберите элемент TapArea и добавьте его на сцену поверх всего баннера.
В контекстном меню добавленного элемента TapArea выберите AddEvent
Далее выберите:

  1. Event > Mouse > click
  2. Action > Google Ad > Exit ad (overrides URL)
  3. Receiver > gwd-ad
  4. Configuration > Metrics ID > [впишите «clickTag» без кавычек]
  5. > URL > [впишите адрес перехода с баннера]
3

HTML5 баннер в общем виде (без использования программ для анимации)

Необходимо модифицировать код *.html файла следующим образом:

1. Добавить следующий код внутри тега <head>…</head>
<script>

var clickTag = 'http://www.ngs.ru/'; <!-- ваша ссылка перехода вместо этой -->

</script>
2. Добавить следующий код вокруг основного тега баннера:
<a href="javascript:window.open(window.clickTag)">

<!-- здесь ваш баннер -->

</a>