ТТ html5 баннерам

Требования к 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. Баннер не должен значительно нагружать процессор компьютера. Решение по каждому конкретному случаю принимает специалист компании.

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

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)">  </a>

Чтобы не проделывать каждый раз эти манипуляции руками, можно воспользоваться шаблоном экспорта для программы Adobe Animate. Для этого скачайте шаблон, примените его в программе в меню File > Publish Settings > Advanced > Import New > [выбираете скачанный шаблон экспорта]. Теперь при публикации баннера, в файл *.html уже будет добавлен код описанный выше.

Google Web Designer

Создайте новый файл нужного размера с параметром Environment: DoubleClick либо AdMob либо AdWords.

На панели Components выберите элемент TapArea и добавьте его на сцену поверх всего баннера.

В контекстном меню добавленного элемента TapArea выберите AddEvent

Далее выберите:

Event > Mouse > click

Action > Google Ad > Exit ad (overrides URL)

Receiver > gwd-ad

Configuration > Metrics ID > [впишите «clickTag» без кавычек]

> URL > [впишите адрес перехода с баннера]

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

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

1. Добавить следующий код внутри тега

<head>…</head>
:
<script>

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

</script>

2. Добавить следующий код вокруг основного тега баннера:

<a href="javascript:window.open(window.clickTag)">



</a>