Google Web Designer или как создавать восхитительные баннеры для динамического ремаркетинга
Скорее всего, каждый специалист задумывался о том, как можно было бы вместо стандартных вариантов создать свой макет баннера для динамических объявлений в контекстно-медийной сети системы 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! Надеюсь, что моя статья была для вас полезной. Пишите свои отзывы и вопросы в комментариях.
Люблю такие статьи. От А до Я все по полочкам. Спасибо авторам.
Отличная статья!
А как Вы его на своем сайте разместили????????
Здравствуйте. В данной статье описывается способ создания баннера для динамического ремаркетинга, который используется только в системе Google ads (Google Adwords). Такого типа баннер не подходит для размещения напрямую на сайте.
Назар, спасибо за помощь!
http://prntscr.com/sbiev7 вот такой шаблон выбрала 300*250
http://prntscr.com/sbigcd
http://prntscr.com/sbihon — вот так в гугл эдс в предпросмотре отображается
Выделите элемент «Круговая галерея» (двойной клик), после чего у вас появится возможность изменять ее свойства. Далее вам необходимо перейти на вкладку «Свойства» и изменить масштаб. Вариант, который выбран по-умолчанию — «Кадрировать», попробуйте изменить на другие варианты. http://prntscr.com/sbosxl.
Аналогичное действие необходимо проделать по каждому элементу галереи http://prntscr.com/sbov9g
Добрый день!
Вы отвечали на мой вопрос ранее про обрезание изображений в шаблоне: В Google Web Designer решить это не получится. Изображения подтягиваются из фида данных, которые в свою очередь попадают в фид из вашего ресурса (сайта). Поэтому рекомендуется использовать изображения размером до 300 x 300 пикселей и разрешением до 72 точек на дюйм.
Спасибо!
Изображения проработали, сейчас в фид тянутся изображения 160*256 -вроде как соответствуют требованиям, а по итогу в предпросмотре все равно обрезаются и все выглядит оч коряво(( Может быть у вас есть еще идеи как можно решить эту проблему?
Т.к. тех.поддержка гугла, услышав про Гугл веб дизайнер, сказала, что не могут ничем помочь, мол изучайте ГВД проблема в нем, что-то вы не так настроили значит в шаблоне.
Ольга, Здравствуйте. Скиньте, пожалуйста, скрин шаблона, который вы выбрали в Google Web Designer, мы попробуем разобраться в данной проблеме.
Хочу научиться работать на этой платформе
Здравствуйте. Рекомендуем вам начать с изучения информации со справочного центра https://support.google.com/webdesigner/#topic=3227692 и практиковаться в процессе изучения возможностей Google Web Designer.
Подскажите, у нас есть фид yml. Как на его основе сделать json набор данных чтобы добавить его в Google Web Designer?
Здравствуйте. Аналогичный вопрос:
Столкнулась с проблемой выбора отрасли при выборе шаблона. Какие товары относятся к отрасли «Розничная деятельность» и динамической тематике «Retail»? При использовании данного шаблона возникла проблема при отправке баннера на модерацию: «ZIP-файл содержит объявления для неподходящего вида деятельности. Кампания и загружаемые в нее объявления должны относиться к одному и тому же виду деятельности».
У нас продукты (интернет-магазин фермерских продуктов)
Здравствуйте. «Какие товары относятся к отрасли «Розничная деятельность» и динамической тематике «Retail»» — рекомендую уточнить у поддержки Google. В 2018 году таких «строгих» требований как сейчас не было, т.е. для интернет-магазинов (розничная торговля) подходили баннеры с тематики «Travel» и, как видно на изображениях в статье, не было «Динамической тематики».
Поэтому, если вы хотите сэкономить время, рекомендую использовать шаблон с динамической тематикой «Custom». В идеале было бы создание баннера «с нуля», где можно выбрать и отрасль и тематику согласно вашему проекту.
Назар, спасибо за предыдущий ответ — помогли!
Еще один вопрос возник: в шаблоне не все изображения корректно подтягиваются, часть обрезается http://prntscr.com/rubwtt. Можно ли решить эту проблему в гугл веб дизайнере?
В Google Web Designer решить это не получится. Изображения подтягиваются из фида данных, которые в свою очередь попадают в фид из вашего ресурса (сайта). Поэтому рекомендуется использовать изображения размером до 300 x 300 пикселей и разрешением до 72 точек на дюйм. С более подробной информацией по требованиям к динамическим медийным объявлениям можно ознакомиться по ссылке https://support.google.com/adspolicy/answer/7181012?hl=ru
Здравствуйте. Спасибо за статью! При использовании данного шаблона возникла проблема при загрузке баннера в Гугл Эдс: «ZIP-файл содержит объявления для неподходящего вида деятельности. Кампания и загружаемые в нее объявления должны относиться к одному и тому же виду деятельности».
В чем может быть проблема?
Создавались объявления для интернет-магазина.
Здравствуйте. Рекомендую использовать стандартные шаблоны, они подходят для любого рода деятельности http://prntscr.com/rs6ijd
у вас можно заказать такой баннер?
мы выбрали шаблон который нам подходит но хотели бы его подкорректировать
Василий, здравствуйте! К сожалению, отдельно баннеры мы не делаем. Только в рамках комплексного долгосрочного сотрудничества по проекту.
И еще вопрос: где-то задается/меняется формат цены? У меня в фиде указано «50 грн», а тут выводит (и передается в аккаунт рекламы) «UAH 50.00».
Здравствуйте!
1. Необходимо выделить нужный нам элемент и перейти в “Структурный редактор” (правый нижний угол) и разблокировать слой, который нам необходим, кликнув на него правой клавишей мыши http://prntscr.com/qn34r3. Далее во вкладке “Свойства” можно изменить цвет границы http://prntscr.com/qn36bu.
2. Это та же граница что и в первом случае. Главное разблокировать доступ к необходимым слоям и тогда появляется больше возможностей для редактирования.
3. На баннер подтягивается цена в таком виде, в котором она указана в фиде. Если в фиде цена указана «50.00 UAH», то на баннере она должна отобразится в виде «50 грн.» . Скорее всего, в фиде у Вас указана цена в неправильном формате.
Здравствуйте!
Использую тот же шаблон, который Вы описали в статье. Однако, за 2 года он изменился.
1. Как убрать или изменить цвет у дурацкой голубенькой рамочки у товаров и фон под ценой (насколько я понял, под ценой есть небольшой div)?
2. Как убрать другую синюю дурацкую рамочку, которая «бегает» по очереди по каждому товару (в Вашем примере она тоже есть на последнем слайде, где конечный результат)?
Добрый день! Столкнулся с проблемой. Как настроить страницу перехода если товар берется с фида есль отрасль «Розничная торговля»
Добрый день. Уточните, пожалуйста, ваш вопрос, вы создаете баннер «с нуля» или используете шаблон?
Столкнулась с проблемой выбора отрасли при выборе шаблона. Какие товары относятся к отрасли «Розничная деятельность» и динамической тематике «Retail»? При использовании данного шаблона возникла проблема при отправке баннера на модерацию: «ZIP-файл содержит объявления для неподходящего вида деятельности. Кампания и загружаемые в нее объявления должны относиться к одному и тому же виду деятельности».
Здравствуйте! Подскажите, под какие товары вы создавали баннер?
Всю голову сломал, как отредактировать текст на кнопке не заходя в код????
Здравствуйте! Спасибо за вопрос.
В режиме «Инструмент выделения» http://prntscr.com/l9ia3r двойным кликом выбираем необходимую нам кнопку http://prntscr.com/l9ib16 и переходим в режим «Текст» http://prntscr.com/l9ibhp. Далее кликаем на текст кнопки и редактируем его http://prntscr.com/l9ie67. Также, в Google Web Designer есть возможность редактировать основные свойства текста http://prntscr.com/l9ifrc.
Я теперь себя дауном чувствую.
Очень сложно разобраться даже с шаблоном.
спасибо большое за эту статью!