Новый тренд, набирающий популярность: вращающиеся 3D-баннеры на HTML5

Еще мало кто знает, что баннеры можно сделать вращающимися, а соответственно, мало кто опробовал такой занимательный способ показать себя своей аудитории. С помощью баннеров HTML5 вы можете сделать реалистичную 3D-анимацию вращения с адаптивным дизайном.

Цель 3D-баннеров такая же, как и у всех баннеров – пользователь должен кликнуть по нему, перейти на сайт и выполнить целевое действие. Но статичная реклама всем порядком надоела, а вот анимация на HTML5 способна создать эффект «вау» и выделить вас среди конкурентов.

Использовать вращающиеся 3D-баннеры на HTML5 могут не все. Проверьте настроена ли кампания для использования медийных объявлений. Чтобы загружать объявления HTML5 ваш аккаунт Google Ads должен соответствовать следующим требованиям:

• Рекламный аккаунт существует более 90 дней.
• Общие расходы за время существования аккаунта превышают 1 тыс. $.
• Нет нареканий по соблюдению политики сервиса.
• Не зафиксированы проблемы с оплатой рекламных кампаний.

Соответствуете требованиям? Тогда подавайте заявку. В течение 7 рабочих дней вам на электронную почту должно прийти письмо с разрешением.

Итак, если условия соблюдены, можно приступить к работе. Для создания 3D-баннера понадобится:

• Любой редактор кода (Sublime Text, Notepad, Atom и пр.).
• Photoshop (без него дизайнеру никуда).
• Архиватор (WinRaR, 7-Zip, The Unarchiver и т.п.).

Популярное бесплатное приложение Google Web Designer для создания объявлений и других видов онлайн-контента в формате HTML5 нам сегодня не понадобится.

Пошаговая разработка простенького вращающегося баннера

1. Подготовка и выгрузка макетов.

Разрабатываем композицию дизайна и отрисовываем четыре макета баннера в Photoshop (на каждую грань), учитывая правила рекламной платформы Google Ads. При сохранении пропишите названия картинок на латинице без использования специальных знаков, проверьте расширения файлов.

2. Редактирование кода.

Скачиваем готовый код. Открываем index.html в любом редакторе кода и правим следующие строки:

Строка 4. Укажите URL сайта, для которого будете использовать баннер.

Далее вставляем изображения. Изменяем следующие строки 183, 192, 201,211. Будьте внимательны при вводе данных, обратите внимание на соответствие расширений, код должен полностью соответствовать названиям ваших картинок.

Строка 217. Вместо «URL.COM» впишите адрес своего сайта или страницы, на которой находятся рекламируемые товар или услуга. После ввода проверьте наличие кавычек, т.к. без них ссылка будет нерабочей.

Сохраняем файл.

3. Проверяем работу баннера.

В папке с файлом index.html у вас должны находится ваши четыре картинки, названия которых вы указали в коде и файл TweenMax.min.js. Для проверки откройте html файл в любом браузере.

4. Архивируем баннер.

После архивации проверьте размер сжатого файла, так как Google Ads поддерживает только .ZIP формат размером не более 150 кб. В случае большего размера вашего файла, сожмите картинки.

5. Загружаем готовый баннер в аккаунт.

В Google Ads открываем рекламную кампанию «Объявления и расширения», нажимаем кнопку «Опубликовать» (локально) и загружаем ZIP-архив в Google Рекламу.

Если вы научитесь работать с инструментом Google Web Designer, то создавать стильные 3D-баннеры HTML-5 для ваших рекламных кампаний будет также просто как дважды два.