Google Web Designer

Google Web Designer или как создавать восхитительные баннеры для динамического ремаркетинга

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

В данной статье рассмотрим, как с помощью графического редактора Google Web Designer создать анимированный баннер для динамического ремаркетинга в формате HTML5 и загрузить его в аккаунт AdWords.

Что такое Google Web Designer?

Google Web Designer (GWD) – это графический редактор, с помощью которого можно создавать объявления и другой онлайн-контент в HTML5 формате. В интерфейсе данного приложения присутствует визуальный редактор и редактор кода.

Как создать баннер в Google Web Designer?

Создание макета в GWD

Для начала работы с Google Web Designer (GWD) рекомендуем скачивать его с официального сайта.

В целях экономии времени можно выбрать уже готовый шаблон и внести в него свои корректировки. Открываем GWD и выбираем вкладку “Использовать шаблон”.

как создать баннер в google web designer

Так как мы будем создавать баннер для динамического ремаркетинга, из предложенных в галерее шаблонов выбираем “Dynamic remarketing for Adwords (Шаблон для динамического ремаркетинга под систему Google AdWords)”.

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

Галерея шаблонов в google web designer - OdesSeo

Из предложенных макетов выбираем желаемый макет.

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

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

Выбор макета в GWD - OdesSeo

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

выбор размера баннера и присваивание имени в google web designer - OdesSeo

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

рабочая область размера баннера в google web designer - OdesSeo

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

карточка товара в google web designer - OdesSeo

При двойном клике левой кнопкой мыши на “карточку продукта” перед нами появляются все ее составляющие (теги):

составляющие (теги) карточки товара в gwd - OdesSeo

Каждый шаг внесенных изменений можно посмотреть в предварительном просмотре.

предварительный просмотр в gwd

Также, для более удобной работы, выносим их за пределы “карточки товара”. Каждый из этих объектов (тегов) имеет свое значение:

  • div #item-cta-ctn-0 (кнопка призыва к действию);
  • div #item-cta-ctn-0 (цена);
  • ci-starratings #ci-starratings (рейтинг продавца, продукции);
  • div #item-name-ctn-0 (название);
  • gwd-image #item-img-0 (изображение продукции).

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

Информация с тегов, подтягивается из фида в gwd

Теперь, зная функции присутствующих тегов, можно разместить их в любом месте в пределах “карточки товара” так, как бы вы хотели ее видеть. Ненужные теги можно удалить.

размещение тегов на карточке товаров в gwd

Непосредственно в пределах самого баннера присутствует еще два тега:

  • gwd-taparea #headline-ctn (Заголовок);
  • div #footer-ctn (Логотип).

тег заголовок баннера и логотип в gwd

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

переход к свойствам определенного элемента в gwd

Подобрать необходимые цвета можно непосредственно в самой системе после загрузки шаблона.

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

редактирование элементов карточки товара в Google Web Designer

Экспериментируйте и не забывайте просматривать все свои действия в “предварительном просмотре”.

Также в GWD есть возможность менять все свойства с помощью каскадных таблиц стилей (CSS)

изменение свойств элемента с помощью каскадных таблиц стилей (CSS) в Google Web Designer

либо же в HTML-коде.

изменение свойств элемента с помощью HTML-кода в Google Web Designer

Мы уже разобрались со свойствами элементов баннера и возможностями его корректировки. Настраиваем каждую “карточку” отдельно, добавляем логотип и переходим к следующему этапу. Вот что получилось у меня.

карточка товаров в Google Web Designer

Добавление свойств анимации в GWD

Средствами GWD мы можем анимировать баннеры, планировать, с какой скоростью, динамикой и откуда будет появлятся рекламируемая продукция на баннер.

Для создания анимированного баннера, я вынесу каждую “карточку” за пределы баннера, в те места рабочей области, с которых я хочу видеть их появление.

создание анимированного баннера в Google Web Designer

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

Выделяем нужный нам объект, появление которого мы хотим видеть первым на баннере. Далее на временной шкале, соответствующего объекта, кликом отмечаем выбранное нами время (я выбрал 1 сек.) и клавишей “F6” фиксируем временной интервал (“F5” удаление выбранного временного интервала).

выбор времени появления карточки товара в Google Web Designer

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

выбор места появления карточки товара на баннере в Google Web Designer

После перемещения видим линию, которая характеризует траекторию движения.

траектория движения в GWD

Для оставшихся двух “карточек товара” делаем то же, что и для первой. Нужно только решить, в каком порядке они будут появлятся, последовательно или параллельно. Если последовательно, то выделяем необходимую “карточку” выставляем метку на временной шкале, фиксируем временной интервал.

порядок появления карточки товара на баннере в Google Web Designer

Если же вам подходит параллельное появление – выставляем одну и ту же метку для всех “карточек” на временной шкале.

Для проверки нажимаем кнопку “старт” на временной шкале.

параллельное появление карточек товара на баннере в GWD

Далее меняем динамику появления. Для изменения параметров динамики кликаем правой кнопкой мыши на временной интервал нужного нам элемента и переходим на раздел “параметры динамики”, либо же сразу выбираем предложенные шаблонные параметры (Linear, Ease, Ease-out, Ease-in, Ease-in-out, Step-end, Step-start). Рекомендую переходить на раздел “параметры динамики”, так как там можно задать пользовательские параметры.

изменение динамики появления карточек товара на баннере в GWD

Задаем либо свои параметры, либо выбираем стандартные.

изменение динамики появления карточек товара на баннере в GWD (настраиваем свою или выбираем стандартную)

Настраиваем динамику для каждого элемента (карточки товара) отдельно.

Проверяем проделанную работу в предварительном просмотре.

Проверяем проделанную работу в предварительном просмотре в GWD

Сохраняем и переходим к следующему этапу (выгрузка в Google AdWords).

анимированный баннер в GWD

Выгрузка в Google AdWords

Для загрузки созданных баннеров в систему AdWords, переходим на вкладку “опубликовать” – “локально”.

загрузка созданных баннеров в GWD в систему AdWords

Далее в интерфейсе Google AdWords создаем объявление на основе разработанного в веб-дизайнере макета.

создаем объявление в в интерфейсе Google AdWords на основе разработанного макета GWD

* К сожалению, по техническим причинам загрузка баннеров из Google Web Designer пока возможна лишь в старом интерфейсе AdWords.

динамическое объявление созданное с помощью Google Web Designer

Реализуйте свои самые смелые идеи динамических объявлений с Google Web Designer! Надеюсь, что моя статья была для вас полезной. Пишите свои отзывы и вопросы в комментариях.