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

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