В этой статье будет описан способ подготовить html5 баннер, сделанный в Google Web Design, по техническим требованиям (далее ТТ) Яндекса.
Что нам понадобится:
1. Анимированный баннер, собранный в Google Web Design2. ТТ Яндекса3. Блокнот или программа для правки html кода (в моем случае это Notepad++)
После того как вся анимация готова, важно баннер корректно опубликовать. Ниже будут скриншоты с настройками публикации.
В папке, куда мы опубликовали баннер, получается следующая картина:
Готовый баннер находится в архиве. Остальные файлы являются исходными материалами, на площадку их отправлять не нужно. Теперь необходимо подготовить баннер по техническим требованиям Яндекса. Для этого распакуем архив и в файле index.html внесем небольшие изменения.
Нажимаем на него правой кнопкой мыши и открываем код в любом удобном редакторе (я использую Notepad).
Согласно ТТ Яндекс, в коде баннера необходимо прописать метатеги с размерами баннера (высота и ширина должны соответствовать параметрам вашего баннера, если у вас 300 на 600, то и в коде нужно указать именно эти значения)
Cделать это можно сразу после открывающего тега
Теперь говорим баннеру что при клике пользователя он должен открывать ссылку в новой вкладке через переменную click_area:
<b><a id='click_area' href='#' target='_blank'> ... </a></b>
и дополняем скриптом:
<b><script></br>document.getElementById('click_area').href = yandexHTML5BannerApi.getClickURLNum(1);</br></script></b>
Сделать это все можно после открывающего тега
Сохраняем изменения, закрываем Notepad и возвращаемся в папку с баннером. Все файлы пакуем в zip архив и проверяем, чтобы вес архива был не более 150 kb, что соответствует требованиям Яндекса.
В случае, если у вас превышен вес архива, можно воспользоваться сайтом https:/tinypng.com/ для оптимизации используемых в баннере картинок. Нужно прогнать изображения через tinypng и заменить изображения на оптимизированные в той же папке, с теми же названиями, а после запаковать в архив.
Далее можно перейти на сайт bannersbox и убедиться что баннер подготовлен под ТТ Яндекса верно. Переносим наш zip архив в поле загрузки и получаем результат:
Теперь баннер можно смело отправлять на модерацию в Яндекс :)