-
Главная / Список статей / Google Web Designer. Подготовка баннера по ТТ Яндекс
Google Web Designer. Подготовка баннера по ТТ Яндекс.
В этой статье будет описан способ подготовить html5 баннер, сделанный в Google Web Design, по техническим требованиям (далее ТТ) Яндекса.
Что нам понадобится:
1. Анимированный баннер, собранный в Google Web Design
2. ТТ Яндекса https://yandex.ru/adv/requirements/html5
3. Блокнот или программа для правки html кода (в моем случае это Notepad++)После того как вся анимация готова, важно баннер корректно опубликовать. Ниже будут скриншоты с настройками публикации.
В папке, куда мы опубликовали баннер, получается следующая картина:
Готовый баннер находится в архиве. Остальные файлы являются исходными материалами, на площадку их отправлять не нужно. Теперь необходимо подготовить баннер по техническим требованиям Яндекса. Для этого распакуем архив и в файле index.html внесем небольшие изменения.
Нажимаем на него правой кнопкой мыши и открываем код в любом удобном редакторе (я использую Notepad).
Согласно ТТ Яндекс, в коде баннера необходимо прописать метатеги с размерами баннера <meta name="ad.size" content="width=240,height=400"> (высота и ширина должны соответствовать параметрам вашего баннера, если у вас 300 на 600, то и в коде нужно указать именно эти значения)
Cделать это можно сразу после открывающего тега <head>
Теперь говорим баннеру что при клике пользователя он должен открывать ссылку в новой вкладке через переменную click_area:
<a id="click_area" href="#" target="_blank"> ... </a>
и дополняем скриптом:
<script>
document.getElementById("click_area").href = yandexHTML5BannerApi.getClickURLNum(1);
</script>Сделать это все можно после открывающего тега <body>
Сохраняем изменения, закрываем Notepad и возвращаемся в папку с баннером. Все файлы пакуем в zip архив и проверяем, чтобы вес архива был не более 150 kb, что соответствует требованиям Яндекса.
В случае, если у вас превышен вес архива, можно воспользоваться сайтом https:/tinypng.com/ для оптимизации используемых в баннере картинок. Нужно прогнать изображения через tinypng и заменить изображения на оптимизированные в той же папке, с теми же названиями, а после запаковать в архив.
Далее можно перейти на сайт https://bannersbox.ru/ и убедиться что баннер подготовлен под ТТ Яндекса верно. Переносим наш zip архив в поле загрузки и получаем результат:
Теперь баннер можно смело отправлять на модерацию в Яндекс :)
