PPC 1 Min

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

Назар Пшеминский

19.02.2018

28 комментариев

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 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-taparea #headline-ctn (Заголовок);
• div #footer-ctn (Логотип).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выгрузка в Google Ads

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

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

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