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.
Я теперь себя дауном чувствую.
Очень сложно разобраться даже с шаблоном.
спасибо большое за эту статью!