Переходим на баннеры по технологии HTML5. Руководство к действию.

Главная задумка баннеров, созданных по технологии HTML5 – привлечь больше внимания пользователей к рекламе вашего продукта. За счет чего? За счет того, что такие рекламные баннеры — яркие, живые, интерактивные и вызывают неподдельный интерес аудитории.

В чем же выгода? С помощью баннеров в формате HTML5 вы реализуете сложнейшие задумки, на которые способна ваша фантазия! Например, поставить на баннер счётчик времени — как это сделали мы по одному из наших клиентов:

Такой счётчик работает как часы, ведет отсчёт идет до указанной даты, вызывая ощущение, что человек что то упускает.

А теперь рассказываем, как сверстать баннеры HTML5

Сразу оговоримся – для супер-верстальщиков с безграничными знаниями в этой теме нового ничего не найдется. Наше руководство больше рассчитано на новичков в этом деле ☺

Чтобы приступить к работам, нужен макет баннера. Его возможные форматы – psd, ai и прочие, но чаще всего в psd.

1. Ознакомимся с правилами верстки и спецификацией для рекламных баннеров HTML5 в Google Ads и Yandex. Перейдите по ссылкам и обратите внимание на требования системы:

2. Дальше делаем стандартную разметку HTML5, бережно выполняя все требования Google и Yandex.

После создания HTML5-разметки вид баннера преобразуется:

3. Теперь приступаем к написанию стилей и сохраняем background картинок. Наш совет – прогоните все изображения через сервис TinyPNG. Это уменьшит вес картинок, не изменив их качество. Но зато в разы повлияет на загрузку сайта ☺

Обращаем внимание — сделайте текст рекламного баннера контрастным и читабельным. Минимальный размер шрифта — 11 pt. Если хотите добавить в баннер анимацию — сделайте это циклично. На один цикл заложите не больше 18 секунд, а перерыв между ними сохраните в течение 1 минуты.

[unisender_short_top]

4. Дальше приступаем к запуску таймера обратного отсчета – для этого используем готовые библиотеки FlipClock или пишем таймер самостоятельно, если знания позволяют ☺

5. Как только написали таймер – баннер готов. Теперь все сохраняем в zip-архив и проверяем на ошибки в сервисе Google. Если все пункты отмечены зеленым – поздравляем, ваш баннер готов!

7. Как видите, баннер полностью прошел проверку. Еще один важный момент – при проверке в Google закомментируйте или удалите строку

<script src=»https://awaps.yandex.net/data/lib/adsdk.js»></script>

Иначе – Google Валидатор выдаст ошибку, и привет – плакало создание нашего рекламного HTML5 баннера.

8. А теперь достаточно загрузить созданный баннер в интерфейс Google Ads:

Или в Яндекс:

Кстати, скоро добавят возможность использовать их и в Яндекс.Директ

В результате — у нас получился такой HTML5 баннер:

Также рекомендуем сразу сделать несколько баннеров с разными размерами — 728*90, 336*280, 300*250, 160*600, 300*600 это самые популярные форматы. HTML5 баннер – это по сути полноценная html-страница, в которой вы создаете анимацию и добавляете интерактивные элементы.

Что еще важно — показатели CTR рекламной кампании с такими анимированными баннерами выше, в сравнении с результатами работы статичных баннеров — разница видна невооруженным глазом ☺

С таким рекламным баннером ваше предложение заинтригует аудиторию, и вы получите новых клиентов!:)

Надеюсь, теперь вы знаете, как создать анимированные баннеры для рекламы в Google.Ads. Удачи!