Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Как снизить затраты на создание баннеров благодаря HTML5?

Вернуться в блог

У вас есть много разных продуктов и вы хотите рекламировать их в AdWords, на Facebook или через платформу RTB? Тем не менее, вы не можете себе представить создание различных графических произведений для всех этих продуктов и затрат, которые поэтому придется нести? Есть способ. Используйте HTML5 и сократите затраты на создание баннеров. Как это сделать?

В отличие от текстовой рекламы, графические объявления требуют большего участия, но они также имеют более широкое поле выражения. Сам текст не может полностью отразить внешний вид товара, на нем не будут отображаться фотографии из поездки в далекую страну. Добавьте к этому тот факт, что AdWords, хотя и является большой рекламной сетью, не единственный. Его основным конкурентом является Facebook, а также медиарынок, продаваемый издателями и порталами (согласно отчету IAB AdEx 2016Q3 приходится 49,2% расходов СМИ). В этой ситуации вопрос не в том, «стоит ли платить за графическую рекламу», а только в том, почему мне не выгодно игнорировать графическую рекламу. Даже мелкие предприятия (микро- и малые предприятия) благодаря простому ремаркетингу могут снова достичь потенциального клиента. Как сделать это эффективно, не неся при этом больших затрат?

Производство графических баннеров во многих форматах, а также, предпочтительно, во многих версиях для A / B-тестов, требует больших затрат на графику, копирайтер и, возможно, на программиста, если мы говорим о мультимедийной рекламе. Кроме того, недостаточно подготовить один размер, а несколько или дюжину, чтобы получить наибольшее покрытие в контекстно-медийной сети. В результате подготовка одной креативной линии обычно требует:

  • мастер-версия для принятия клиентом;
  • внесение клиентских исправлений;
  • переформатирование в другие размеры;
  • повторно проверка.

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

А что, если у нас есть обширное предложение различных продуктов и одного сообщения недостаточно? Например:

  • туристическое агентство имеет десятки направлений на выбор
  • Магазин электроники имеет много разных категорий
  • компания B2B имеет широкий спектр услуг

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

Давайте предположим, что нам было поручено продвигать 5 направлений для туристического агентства. Это требует подготовки 5 отдельных творческих строк с соответствующей фотографией и копией. Кроме того, он переформатирован в самые популярные размеры. выбор Стандарт IAB у нас есть 8 размеров рабочего стола и 6 мобильных размеров - всего 14 размеров. В результате это дает нам:

5 строк х 14 размеров = 70 объявлений

Если предположить, что создание концепции займет 1 час, а переформатирование - каждые 0,5 часа, это даст нам 8 часов графической работы. Предположим, что один час графики стоит 100 злотых. В результате продвижение по 5 направлениям обойдется нам в 800 злотых.

А что если бы мы создали отдельное сообщение для 10, 20, 50 различных предложений или продуктов? Объем работ растет, а вместе с ним и затраты, что легко можно проиллюстрировать на графике зависимости количества творческих строк от стоимости (для целей данной статьи я предполагаю, что время и стоимость труда такие же, как это редко бывает в жизни):

Если мы хотим подготовить серию баннеров с совершенно другим визуальным слоем, к сожалению, в большинстве случаев это потребует утомительной графической работы. Однако, если объявления изменяют только текст или фотографии продукта, вы можете автоматизировать производство, используя HTML5 и Google Web Designer.

Как правило, создание креатива HTML5 занимало бы часы веб-разработки с аналогичной работой, но благодаря Google Web Designer весь процесс превращается в «перетаскивание». Более того - сам инструмент настолько прост в использовании, что он не является препятствием для графических дизайнеров, знакомых с инструментами Adobe.

Выше у нас есть главное окно редактора, где для целей статей за несколько минут я обработал домашнюю страницу Bluerank на тройном билборде 750 × 300. Я использовал метод drag-n-drop, чтобы добавить фоновую фотографию и логотип. Затем для добавления текста и рамки в качестве холста HMTL5 необходимо только выбрать цвет, шрифт и размер. Целое заняло дюжину или около того минут, чтобы создать. В результате Google Web Designer сгенерировал исходный код вместе со структурой файлов:

В результате Google Web Designer сгенерировал исходный код вместе со структурой файлов:

Мы можем добавить ваши собственные теги или сценарии в редакторе кода, что даст вам еще больший контроль над креативом или веб-сайтом. Конечный результат - готовый баннер для выпуска:

Конечный результат - готовый баннер для выпуска:

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

У нас было 17 размеров графики и 21 категория, каждая с отдельным текстом, описывающим группу продуктов и копию, призывающую к действию. Это дает нам 357 различных отдельных графических изображений. Чтобы ускорить процесс и сократить расходы, мы предложили создать единый шаблон объявления, в котором будут заменены фон, текст и названия продуктов. Благодаря этой «многоуровневой» конструкции вы можете свободно заменять элементы для создания нескольких версий творения.

Мы создали 17 основных размеров объявлений с одним экземпляром и фоном для продукта. Вначале потребовалось приложить немного больше усилий, чтобы графический дизайнер и специалист создавали готовые zip-пакеты с HTML5-объявлениями. Тогда достаточно было клонировать готовые творения и, благодаря простому текстовому редактору, например Sublime Text 2, отредактировать исходный код объявления.

Тогда достаточно было клонировать готовые творения и, благодаря простому текстовому редактору, например Sublime Text 2, отредактировать исходный код объявления

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

Конечный результат? Работа с графикой в ​​дальнейшем требует создания креативной концепции и ее преобразования в шаблон HTML5, но позже изменение текста в креативах происходит в несколько кликов. Время, потраченное на внесение небольших изменений, резко падает.

В этом случае я создал очень простой баннер и, конечно, я не затронул более продвинутые функции веб-дизайнера, такие как:

  • анимации
  • взаимодействие с баннером
  • динамические элементы, загруженные из DoubleClick Studio или других источников
  • 3D эффекты
  • и даже простые браузерные игры целые сайты

Рекомендую ознакомиться с возможностями Google Web Designer и скачать бесплатно и проверить возможности, которые он предлагает.

Вернуться в блог