Google Web Designer: создаем HTML5 баннер для контекстной рекламы

Как часто вам приходилось ставить техническое задание веб-дизайнеру на разработку графических объявлений для контекстной рекламы в Яндекс.Директ и Google Реклама? Нечасто? Тогда, скорее всего, вы пользуетесь встроенным конструктором Яндекса, который позволяет автоматически создавать графические объявления в различных размерах (1000×120, 728×90, 480×320, 336×280 и т.д.), или не используете графические объявления в принципе.

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

выбор изображения и логотипа на баннер

Бывает такое, что изображения на сайте не находятся. Тогда их можно загрузить с компьютера или из фотобанка. Но можно поступить хитрее – создать графические объявления в Яндекс через конструктор, а далее выгрузить полученные изображения и загрузить баннеры в Google Ads. Однако есть различия в размерах графических объявлений. Те, которые подходят для Яндекса, не всегда подходят для Google, и наоборот. Лучший вариант – один раз заказать у специалиста креатив в различных размерах, отдельно для Google Рекламы, отдельно для Яндекс.Директ, и на время забыть об этом.

Все это верно, когда речь идет о статических объявлениях. Но самые «продвинутые» компании и рекламодатели используют в продвижении своих продуктов не только изображения, но и динамические форматы – видео, gif-ки, флеш, HTML5. О последнем формате контента и будем говорить подробнее.

HTML5 баннер — совокупность HTML-элементов с использованием анимации и приятного визуального оформления, адаптированных под различные устройства и браузеры.

Отличительной особенностью HTML от остальных видов баннеров является то, что:

  • они показываются схожим образом на всех типах устройств;
  • они меньше весят и быстрее загружаются, чем тот же flash;
  • HTML5 предоставляет больше возможностей для добавления в баннер различных интерактивных элементов — форм, кнопок, полей и т.д.;
  • HTML5 – тренд у специалистов по трафику последних 2-3 лет. Те, кто разбирался в HTML, CSS и JavaScript, имел существенное преимущество по сравнению с другими.
  •  
    Ключевое слово – ИМЕЛ. С появлением на рынке продукта Google Web Designer ситуация существенно поменялась. Теперь каждый из нас способен быстро и просто проектировать интерактивные объявления для контекстной рекламы без дополнительных знаний в HTML, CSS и JavaScript.

    Что такое Google Web Designer

     
    Бесплатная программа (выпущена в 2013 году), которая позволяет генерировать объявления в HTML5. Мы будем использовать ее для производства стильных анимированных объявлений в Яндекс.Директ и Google Ads под все типы устройств.

    В GWD есть и редактор кода, и визуальный редактор. В последнем можно строить картинки с использованием инструментов рисования, написания и добавления 3Д объектов, а также производить анимацию элементов и событий на временной шкале. В редакторе кода можно создавать файлы CSS, JavaScript, и XML.

    Переходим к скачиванию программы. Зайдите на сайт google.ru/webdesigner и тапните по кнопке «Скачать Google Web Designer».

    Поддерживаются Mac OS 10.10 (и более поздних версий), Windows 7 (и более поздних версий), 64-разрядная версия Linux (Debian/Ubuntu/Fedora/openSUSE). Подробнее о системных требованиях здесь.

    На следующем шаге примите пользовательское соглашение. Начнется автоматическая загрузка, после которой вам нужно будет установить программу на свой компьютер. После установки Google Web Designer поприветствует диалоговым окном, в котором можно:

  • создать новый файл;
  • использовать готовый шаблон объявления;
  • открыть существующий файл;
  • обратиться к справке Google.
  •  

    Нажав на «Использовать шаблон», вы попадаете в галерею шаблонов. На момент написания статьи (ноябрь 2018) их доступно 13 видов:

    1. Banner for Google Ads and AdMob;
    2. App Install;
    3. Banner for Display & Video 360;
    4. Data Driven for Display & Video 360;
    5. Demonstration
    6. Dynamic remarketing for Display & Video 360;
    7. Dynamic remarketing for Google Ads;
    8. Expandable;
    9. Floating;
    10. In-Stream video (YouTube);
    11. Interstitial & in-app;
    12. Lightbox;
    13. Rising star.

     
    При выборе одного из них слева открывается дополнительная информация по шаблону – на каких устройствах и платформе поддерживается, какие имеет размеры. Можно выбрать «Использовать макет» или сделать «Предварительный просмотр».

    Любой макет содержит достаточное количество элементов. Например, для Banner for Google Ads and AdMob размера 300×250 – это:

  • логотип;
  • заголовок и подзаголовок;
  • место под изображения;
  • призыв к действию (кнопка CTA).
  •  

     
    Вам останется только наполнить его своим контентом. В рамках текущей статьи мы создадим пользовательский (не шаблонный) HTML5 баннер для контекстной рекламы Google Ads и Яндекс.Директ формата 300×250. Вот так будет выглядеть баннер на выходе:

    Как я уже писал выше, лучше заказать один раз графические баннеры у специалиста (за 2000-3000 руб.), чем сидеть и самому заниматься разработкой дизайна. Предположим, мы это сделали, и у нас на руках есть готовые баннеры в формате .psd, где каждый элемент разложен по своим слоям. Это нужно для того, чтобы в Google Web Designer можно было наложить анимацию. Вот как это выглядит в Photoshop для нашего примера:

    Переходим в Google Web Designer, нажимаем «Файл – Создать». В появившемся окне мы будем использовать объявления типа «Баннер». Задаем следующие настройки:

  • Название (произвольно).
  • Место (куда следует сохранить работу).
  • Контекст – Google Ads (платформа, для которой создается документ).
  •  

    Каждая рекламная система поддерживает свой тип документов. Это надо иметь в виду при создании креативов.

  • Размеры – 300×250 (но можно задать произвольный, например, нестандартный под свой сайт).
  • Галочка «Адаптивный макет» позволяет начать работу с адаптивным документом, то есть если она стоит, то наш размер созданного документа будет не 300×250, а ширине и высоте присвоится значение в 100%. Поэтому для текущей работы не ставим ее.
  • Режим анимации – Расширенный (задает тип произвольной шкалы).
  •  

     
    Нажимаем «ОК». Наш файл создан. Перед вами интерфейс программы, который очень похож на привычный Adobe Photoshop:

    Теперь разберем панели инструментов Google Web Designer. Я разбил ее на 11 частей:

    1. Строка меню, которая состоит из:

    Файл – создание, сохранение, публикация объектов и шаблонов.

    Правка – копирование, вставка, вырезание, удаление, повторение команд, а также «Настройки».

    Настройки GWD содержат четыре вкладки:

  • Основные (настройки программы при первичном открытии, путь до шаблонов, тип объявления и контекст при создании файла);
  • Режим просмотра макета (то, как выглядит исходный экран, на скриншоте выше 11 элемент);
  • Режим просмотра кода (выбор цветовой темы и настройки редактора – отступы, автоматическое закрытие тегов, использование пробелов вместо табуляции и т.д.);
  • Расширенные (предварительный просмотр, ведение журналов и масштаб приложения).
  •  
    2. В правом верхнем углу находится панель просмотра, которая содержит:

  • Справка (классический вариант помощи Google);
  • Режим просмотра (режим, в котором мы по умолчанию находимся в процессе работы);
  • Просмотр кода (режим HTML-разметки документа, в котором вся информация по файлу, в том числе и по CSS и JavaScript);
  • Предварительный просмотр (выбор просмотра в определенном браузере – Chrome, Internet Explorer, Opera);
  • Опубликовать (публикация готового файла – локально на компьютер, в Google Диск или в DoubleClick Studio).
  •  
    После работы мы сохраним свой файл локально, а потом загрузим его в Google Ads и Яндекс.Директ.

    3. Панель инструментов

    По аналогии с Photoshop, здесь расположены все необходимые для работы с программой инструменты:

  • Инструмент выделения
  • Инструмент «Путь перемещения»
  • Поворот 3D-объекта
  • Инструмент работы с элементами
  • Инструмент «Перо»
  • Инструмент «Текст»
  • Заливка
  • Инструмент 3D-вращения рабочей области
  • Инструмент «Рука»
  • Инструмент «Масштаб»
  • Инструмент изменения размера области просмотра
  •  
    Подробнее об этом читайте здесь.

    4. Настройка инструментов

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

    5. Инспектор объявлений

    Показывает основные настройки и свойства файлов (контекст, общий размер), а также валидацию (проверку на соответствие всем требованиям).

    6. Панель №1

    В ней есть вкладки:

  • События (можно настраивать действия в объявлении или HTML-документе для определенных жестов пользователя, ключевых кадров на временной шкале и других изменений);
  • CSS (можно посмотреть стиль оформления любого выбранного элемента);
  • Динамическая (можно создавать динамические свойства – изменение цвета границы, кнопки и т.д.);
  • Адаптивные (можно создавать адаптивное содержимое и управлять им).
  •  
    Если на панели «Адаптивные» выбраны Главные правила, любые трансформации используются ко всему документу. В режиме главных правил следует осуществлять все действия, которые не переопределяют стиль CSS: вставлять или исключать объекты, компоненты или события и т. п.

    7. Панель №2

    В ней есть вкладки:

  • Цвет (можно изменять цвет заливки и контура элементов HTML);
  • Текст (позволяет добавлять в объявление или на HTML-страницу текстовые элементы);
  •  
    8. Панель №3

    Структурный редактор показывает схему всех элементов документа в виде дерева.

    9. Панель №4

    Состоит из следующих вкладок:

  • Библиотека объектов (изображения, аудио- и видеофайлы, которые используются в документе. Импортированные объекты хранятся в библиотеке, их можно просматривать и использовать повторно);
  • Свойства (набор свойств объекта — размер, положение и стиль);
  • Компоненты (встроенные модули, которые позволяют добавлять определенные функции в объявления или HTML-документы).
  •  
    Подробнее о компонентах читайте здесь.

    10. Временная шкала

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

    Быстрая шкала

    Расширенная шкала

    11. Рабочая область

    Центральная часть интерфейса Google Web Designer, на которой происходит вся визуализация. По бокам расположены линейки, справа снизу возможность изменить масштаб.

    Создание HTML5 баннера

     
    Чтобы открыть.psd макет в Google Web Designer, нам необходимо сохранить отдельные элементы макета в обычных png файлах. Это нужно для того, чтобы сделать потом красивую анимацию и переходы (отдельное появление логотипа, фона, кнопки и т.д.).

    На скриншоте выше в качестве примера я отключил слои кнопки и текст заголовка. Такой вид сохраняю в обычном .png. Проделываю это n-ое количество раз (как вы хотите).

    Результатом будет список отдельных файлов .png, сохраненных на вашем компьютере:

    Для того, чтобы добавить наши файлы в GWD, нажмите «Файл – Импортировать объекты». Выберите все файлы сразу и нажмите «Открыть». Теперь они доступны в библиотеке объектов и готовы к анимированию баннера.

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

    В качестве дополнительного материала рекомендую посмотреть базовый курс Базовый курс Google Web Designer в Academy for Ads. Есть много роликов на YouTube по работе с GWD. Я же здесь прикрепляю готовый вариант HTML5 баннера, который мы загрузим в рекламные кабинеты Яндекс.Директ и Google Ads.

    После создания файла можно перейти в режим просмотра в правом верхнем углу, выбрать нужный браузер (например, Chrome), и увидеть HTML5 в действии:

    Данный баннер был сделан за 2 минуты с помощью нескольких ключевых кадров и одного свойства – положение и размер. Вы можете создавать свои произведения искусства без каких-либо знания в HTML/CSS/JavaScript.

    Последний шаг – это сохранение баннера и его загрузка в Google Рекламу и Яндекс.Директ. Для этого нажмем в правом верхнем углу кнопку «Опубликовать».

    Нам GWD выдал сообщение о том, что проверка HTML5 баннера не удалась. Размер файла превышает допустимый для Google Ads в 150 кб.

    Это связано с тем, что мы использовали анимацию. Хотя до ее применения у нас 3 файла имели вес меньше 150 кб. Самый тяжелый (фон) – 130 кб, остальные менее 15 кб.

    Решение этой проблемы достаточно простое – пересохранить исходной слой (картинку) в фотошопе с меньшим размером.

    Теперь все в порядке! Нажимаем повторно «Опубликовать» и сохраняем наш .zip файл. Дополнительно к нашим картинкам в архиве появился index.html, в котором прописан весь код HTML5 баннера:

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

     
    Заходим в Google Ads и добавляем наше медийное объявление. Путь «Объявления и расширения» — «Загрузить медийное объявления – Выберите на компьютере».

    Ключевую роль играет конечный URL, так как при клике в любую область баннера (не только по нашей кнопке «Подробнее»), пользователь перейдет к нам на сайт по заданной ссылке. Нажимаем «Сохранить» и ждем рассмотрения объявления.

    Загрузка HTML5 баннера в Яндекс.Директ

     
    Если для медийных объявлений (HTML5) Google Ads есть Google Web Designer, то с Яндекс.Директ не все так просто. Попробовав загрузить готовые креативы в медийную кампанию, нам с большей долей вероятности вылезет ошибка, а точнее ряд:

    • Адрес перенаправления на домен рекламодателя должен воспроизводится вызовами метода yandexHTML5BannerApi.getClickURLNum()
    • В HTML-файле нет элемента <meta name=»ad.size»>
    • В баннере использованы внешние ссылки: [https://s0.2mdn.net/ads/studio/Enabler.js]

    Чтобы это исправить, обратим к тех. требованиям Яндекса, а затем к требованиям к HTML5-баннерам.

    Яндекс требует обозначать размер баннера в <meta>:

    А по клику на объявление открывается страница, размещенная в области «Ссылка на сайт» на странице создания или редактирования группы объявлений. Перенаправление на эту страницу генерируется в баннере вызовом метода yandexHTML5BannerApi.getClickNum(1).

    Переходим обратно в GWD и создаем новый файл, только в качестве контекста выбираем не Google Ads, а «Внешнее объявление».

    Из предыдущего баннера для Google Ads перенести все слои с временной шкалы путем выделения и копирования/вставки с помощью Ctrl+C и Ctrl+V (для Windows). Проблема с внешними ссылками решена.

    Теперь добавляем мета-тег Яндекса. Для этого переходим в режим кода и вставляем в шапку:

    У нас – ширина 300 и высота 250. У вас может быть другая, все зависит от исходного размера баннера.

    Теперь копируем код из справки с методом yandexHTML5BannerApi.getClickNum(1) и вставляем его в <body> как показано ниже.

    Закрывающий тег </a> после, скрипт с document.getElementById ниже. Публикуем на своем компьютере новый файл, а затем повторно загружаем его в медийную кампанию.

    Ошибок быть не должно. Далее для объявления указываете ссылку на сайт, добавляете пиксель и счетчик показов (при необходимости) и сохраняете.

    Поздравляю! Вы только что научились создавать свои первые HTML5 баннеры для контекстной рекламы без каких-либо знаний в HTML/CSS/JavaScript. И все это благодаря Google Web Designer.

    Добавить комментарий