Вращающиеся 3D-баннеры для Google Ads. Пошаговая инструкция создания HTML5-баннеров

Об этом мало кто знает, а тем более пользуется этим, но мы готовы поделиться с вами секретным рецептом создания вращающихся по своей оси баннеров в Google Ads

Условия, которые должны быть соблюдены аккаунтом, чтобы удалось загрузить объявление HTML5:

  • имеет хорошую репутацию в отношении соблюдения правил;
  • имеет хорошую репутацию в отношении оплаты рекламных услуг;
  • общая сумма потраченных средств за все время существования аккаунта составляет не менее 1000 долларов США.

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

  • Photoshop – 1 штука
  • Sublime Text 3 или любой другой текстовый редактор (именно этот удобен тем, что строки пронумерованы) – 1 штука
  • Щепотка архиватора файлов
  • И соус из вдохновения и терпения

В этой статье мы сделаем баннер размером 300х600 px – блок на половину страницы. Один из самых заметных и популярных размеров

1. Отрисовываем 4 грани для баннера

Баннер – это куб, который имеет 4 вертикальных граней. Нужно нарисовать 4 баннера размером 300х600 каждый. Дизайн, содержание и все-все остальное на ваше усмотрение в пределах правил Google Ads. Желательно разнообразить их УТП

2. Корректируем код HTML

Здесь в готовый код для баннера размером 300х600 px. Название файла index.html. Чтобы увидеть код воспользуйтесь стандартным приложением “Блокнот” или текстовым редактором Sublime Text 3 (это удобнее)

В коде жирным шрифтом выделены данные, которые необходимо изменить (строки 4, 183, 192, 201, 211 и 216). Подробная инструкция ниже

Строка 4:

<title>SITE.COM</title>

В самом начале кода вместо SITE.COM пропишите URL своего сайта. Это будет отображаться во вкладке браузера

Строка 183:

background-image: url("ГРАНЬ1.jpg");

Строка 192:

background-image: url("ГРАНЬ2.jpg");

Строка 201:

background-image: url("ГРАНЬ3.jpg");

Строка 211:

background-image: url("ГРАНЬ4.jpg");

Далее, вместо ГРАНЬ1.jpg, ГРАНЬ2.jpg, ГРАНЬ3.jpg, ГРАНЬ4.jpg вставляем названия своих четырех картинок.

В названии картинок не должно содержаться дефисов, знаков препинания, пробелов и других специальных символов.

Обязательно сохраняйте хвостик .jpg

Строка 216:

<a href="ССЫЛКА НА НУЖНУЮ СТРАНИЦУ" target="_blank">

И еще чуть ниже меняем ССЫЛКА НА НУЖНУЮ СТРАНИЦУ на ссылку, куда будет вести баннер при нажатии на него

Сохраняем готовый код

 

3. Собираем все в архив

Но, прежде чем все собрать воедино, необходимо скачать плагин, который отвечает за анимацию

Его можно найти в той же папке Яндекс.Диска, где и код. Называется TweenMax.min.js

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

Теперь вы все знаете! Загружаем ингредиенты в архив. Проверьте наличие всех файлов в архиве, иначе баннер не будет кружиться:

  • код HTML
  • плагин TweenMax.min.js
  • 4 изображения

Заходим в созданный архив, открываем файл с кодом HTML. Должно получиться примерно вот так:

Image from Gyazo

Здорово, правда? 😍

4. Загружаем красоту в Google Ads

Заходим в нужную кампанию > Объявления и расширения > Нажимаем на “+” > Загрузить медийные объявления

 

Прописываем конечный URL и загружаем архив. Если ваш архив будет весить больше положенных 150 кб, Google начнет ругаться

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

Уверенны, что ваш аккаунт полностью соответствует требованиям, описанным в самом начале статьи, но у вас появилось сообщение “Не удалось загрузить объявление HTML5. В вашем аккаунте не поддерживается этот формат”? Обратитесь в тех.поддержку Google. Отправьте заявку на подключение данной функции. Рассмотрение заявки занимает ~5-7 рабочих дней

Все получилось? При нажатии на баннер откроется окно, проверьте, чтобы он вращался

 

Сохраняем объявление и наслаждаемся 😇

Удачных экспериментов!