RU

Google Web Designer. Подготовка баннера по ТТ Яндекс

В этой статье будет описан способ подготовить html5 баннер, сделанный в Google Web Design, по техническим требованиям (далее ТТ) Яндекса.

Что нам понадобится:

1. Анимированный баннер, собранный в Google Web Design
2. ТТ Яндекса
3. Блокнот или программа для правки html кода (в моем случае это Notepad++)

После того как вся анимация готова, важно баннер корректно опубликовать. Ниже будут скриншоты с настройками публикации.

pictureAlt1
pictureAlt2

В папке, куда мы опубликовали баннер, получается следующая картина:

pictureAlt3

Готовый баннер находится в архиве. Остальные файлы являются исходными материалами, на площадку их отправлять не нужно. Теперь необходимо подготовить баннер по техническим требованиям Яндекса. Для этого распакуем архив и в файле index.html внесем небольшие изменения.

Нажимаем на него правой кнопкой мыши и открываем код в любом удобном редакторе (я использую Notepad).

pictureAlt4

Согласно ТТ Яндекс, в коде баннера необходимо прописать метатеги с размерами баннера (высота и ширина должны соответствовать параметрам вашего баннера, если у вас 300 на 600, то и в коде нужно указать именно эти значения)

Cделать это можно сразу после открывающего тега

pictureAlt5

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

Сделать это все можно после открывающего тега

pictureAlt6

Сохраняем изменения, закрываем Notepad и возвращаемся в папку с баннером. Все файлы пакуем в zip архив и проверяем, чтобы вес архива был не более 150 kb, что соответствует требованиям Яндекса.

В случае, если у вас превышен вес архива, можно воспользоваться сайтом https:/tinypng.com/ для оптимизации используемых в баннере картинок. Нужно прогнать изображения через tinypng и заменить изображения на оптимизированные в той же папке, с теми же названиями, а после запаковать в архив.

pictureAlt7

Далее можно перейти на сайт bannersbox и убедиться что баннер подготовлен под ТТ Яндекса верно. Переносим наш zip архив в поле загрузки и получаем результат:

pictureAlt8

Теперь баннер можно смело отправлять на модерацию в Яндекс :)

© Все права защищены

2022 — 2025

Наш сайт использует файлы cookie. Что бы Вам было удобно работать с сайтом, улучшить его работу, повысить эффективность и удобство, Вам нужно подтвердить использование cookie файлов. Подробнее о cookie файлах можно прочесть здесь.