Анимированные баннеры html5 для рекламы Ads и Яндекс директ

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

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

Баннер html5

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

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

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

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

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

Подпишитесь на авторский телеграм-канал про предпринимательство в России.

Правильная верстка баннера

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

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

HTML5-разметка

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

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

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

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

Код таймера

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

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

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

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

Загрузка баннера в Google Ads

Или в Яндекс:

Загрузка баннера в Яндекс

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

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

Результат баннера на html5

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

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

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

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

Привлечение клиентов с помощью интернет-маркетинга