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

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

Как снизить затраты на создание баннеров благодаря 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 и скачать бесплатно и проверить возможности, которые он предлагает.

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

Похожие

Как перенести PDF из iBooks в Adobe Reader
Привет, Спасибо за ваш отзыв. Вы только что сказали правильно, поскольку Adobe Reader появился в iTunes Store, большинство поклонников яблок хотели бы использовать это приложение для чтения файлов PDF вместо iBooks. С одной стороны, Adobe Reader - это полнофункциональная программа просмотра PDF для iPad, iPhone и других устройств, которая дает вам возможность открывать файлы различных типов, такие как файлы, защищенные паролем, портфолио PDF и другие документы, связанные с PDF-файлами.
Fortnite 2FA Boogie Down: как включить двухфакторную аутентификацию БЕСПЛАТНО Fortnite Emote
... ная аутентификация (2FA), вы найдете его ниже по странице. Дело в том, что, конечно, есть те, кто не замечает этого. Но агрессивное поощрение игроков к висящей морковке свободной эмоции является беспроигрышной для всех. Игроки получают бесплатные вещи и больше безопасности. В Epic Games есть игроки (и технически клиенты) с улучшенной безопасностью аккаунта. Что такое 2FA? Вот как Epic Games описывает двухфакторную аутентификацию (2FA):
Блог Обзора артиллерии Как получить карты для приложения планирования
Все в море о получении карт для планирования приложений? Мы подумали, что было бы полезно предоставить краткое руководство, которое поможет разобраться во всем этом. Независимо от того, строите ли вы дом или целый жилой комплекс, для всех приложений планирования требуется карта, называемая «План расположения», показывающая предложение в его окружающем контексте. Некоторым местным органам власти также может потребоваться «План блокировки» (иногда называемый планом площадки), который описывает
Как установить Steam в Ubuntu
Steam - самая популярная игровая онлайн-платформа для ПК. Linux также очень популярен. Только в Linux для Steam доступно более 2000 игр. Несмотря на то, что Steam доступен через официальные репозитории Ubuntu, многие новые пользователи Linux были сбиты с толку в процессе установки. Это не так, как в Windows, по крайней мере, не совсем. Прежде чем пытаться установить Steam, вы должны убедиться, что у вас установлены и настроены последние версии драйверов для вашей видеокарты. Частично
Как белорусский гражданин может создать единоличное предприятие в Польше
Уважаемые читатели, в своих статьях я хотел бы обсудить процесс регистрации индивидуального бизнеса в Польше. В интернете есть множество статей на эту тему, хотя последовательного и понятного описания того, что делать шаг за шагом, - недостаток. Остаются только платные услуги юриста или записи на форуме.
Как совершать звонки через Skype через ваш браузер
Реклама Узнайте, как сделать звонок из Skype Outlook.com всего за несколько простых шагов. Потому что некоторые моменты как раз для Skype. Создайте пару простых вещей, и вы скоро сможете перевести всех своих друзей в Outlook одним щелчком мыши. Если вы всегда в своем браузере и ненавидите открывать приложения, вы, вероятно, поняли, что Skype - это одна из тех вещей, которую вы обычно забыли открыть. Ну, это просто изменилось. Вы
Достичь кросс-браузерной функциональности с HTML5 и CSS3
... навания новых элементов HTML5. К счастью, общедоступный файл JavaScript с именем html5shim - скрипт, поддерживающий HTML5 Internet Explorer, - помогает распознавать и стилизовать элементы HTML5, которые не отображаются должным образом. Чтобы включить этот файл JavaScript, просто включите код, показанный в Листинг 1 в блоке <head> вашего HTML-файла выше любого используемого вами CSS. Листинг 1. html5shim, HTML5-скрипт, поддерживающий
Простой пользовательский ввод файлов с помощью JavaScript и CSS - Input-file.js
Автор: pb03 Просмотров всего: 2650 Официальная страница: Перейти на сайт Последнее обновление: 5 ноября 2018 г. Лицензия: MIT Предварительный просмотр: Описание: Input-file.js - сверхлегкий
Как запустить Windows 10 с USB-накопителя
Ты бежишь Windows 10 на вашем собственном компьютере, но теперь вы используете другое устройство, оснащенное более старой операционной системой. Если вы предпочитаете использовать более новую версию, вы можете создать и использовать USB-накопитель, работающий непосредственно под Windows 10. Вам понадобится флэш-накопитель USB с не менее 16 ГБ свободного места, но предпочтительно 32 ГБ. Вам также понадобится лицензия
Что такое Google Pay, как он работает и какие банки поддерживают
... благодаря новой функциональности от Google Pay Send (ранее Google Wallet), вы можете использовать Google Pay, чтобы мгновенно отправлять деньги друзьям. Если у них есть адрес электронной почты или номер телефона, вы можете оплатить их с помощью Google Pay. И это будет работать через Google Assistant, тоже. Вы просто скажете: «Хорошо, Google, отправь [сумму денег] [имя друга] по [причине]. Итак,« ОК, Google, отправь Грегу 25 долларов за билеты на концерт ». Какие устройства
Коллекция Street Fighter 30th Anniversary (для ПК)
Любители кино полагаются на коллекцию Criterion, чтобы брать жизненно важные классические и современные фильмы и представлять их в продуманном, наполненном информацией пакете для современной аудитории. До недавнего времени 40-летняя индустрия видеоигр не имела собственной коллекции Criterion, что позволяло забыть о важном вкладе в поп-культуру из-за несовместимых форматов оборудования и программного обеспечения, просроченных лицензий и простого пренебрежения. К счастью, Digital Eclipse взяла

Комментарии

Как астрономы измеряют расстояния до звезд?
Как астрономы измеряют расстояния до звезд? Регистрация параллакса с помощью цифровой камеры - это точный и аутентичный метод, который можно использовать на уроках. Астрономы - это наблюдатели, которые разделяют огромные пространства от изучаемых объектов. Знание расстояния, на котором расположены небесные тела, является ключевым: оно обеспечивает наиболее важный фактор для отличия очень ярких, удаленных объектов от более близких, но по своей природе менее ярких, то есть для определения
Как работает создание карты ума?
Как работает создание карты ума? Если вы хотите создать карту разума самостоятельно, сначала вы должны ознакомиться с принципом работы карты разума. По сути, речь идет о графическом упрощении конкретной темы, чтобы вы могли сразу увидеть тему, основные и подпункты. Таким образом, вы можете лучше представить, как это работает, я хочу принцип, основанный на планировании отпуска. Б. альпинизм - представляю. 1. Подготовка Mindmap: определение основных точек
Но как мы можем получить текст там?
Но как мы можем получить текст там? Будем ли мы получать от службы технической поддержки обновление Active Directory каждый раз, когда кто-то захочет изменить свой текст? Конечно, нет! Нам нужен способ, позволяющий персоналу обновлять это для себя. Именно здесь приходит SharePoint. Мы создаем новое свойство профиля пользователя, задаем ему подходящие параметры, чтобы люди могли просматривать и обновлять его, а также создаем сопоставление свойств для синхронизации с Active Directory.
Как это исправить?
Как это исправить? Есть несколько вещей, которые вы можете сделать, чтобы решить эту проблему; однако решения во многом зависят от обстоятельств ошибки сокета 10060. Если вы получите эту ошибку при доступе к своему почтовому клиентскому программному обеспечению, то решения для ее исправления будут существенно отличаться от людей, испытывающих трудности с доступом к определенным веб-сайтам. Так что имейте это в виду при прохождении различных лекарств ниже. Удалить программное
Шаг за шагом, или как использовать PayByNet?
Шаг за шагом, или как использовать PayByNet? При совершении покупок в Интернете выберите «PayByNet» при выборе типа платежа и после просмотра веб-сайта выполните поиск Кооперативного банка в Олаве (сначала выберите «Банк СГБ», затем «Ассоциация СГБ», найдите Нижнюю Силезию и выберите BS из Олавы в списке). , Выполняется автоматическое перенаправление на страницу банка логистики кооперативного банка в Олаве. После успешного входа система попросит вас принять
Как Google Pay работает на сайтах?
Как Google Pay работает на сайтах? Для оплаты на поддерживаемых сайтах с помощью Google Pay выполните следующие действия: Вы можете использовать Goole Pay в любом браузере. При оформлении заказа на поддерживаемом сайте просто нажмите кнопку покупки Google Pay. Вас могут попросить выбрать способ оплаты или ввести адрес доставки перед подтверждением вашего заказа. Учить больше
Нам легко вставить одну фотографию в Excel, но если вы хотите вставить много фотографий одновременно, чтобы сэкономить много времени, как это сделать?
Нам легко вставить одну фотографию в Excel, но если вы хотите вставить много фотографий одновременно, чтобы сэкономить много времени, как это сделать? Вставьте пакет из нескольких фотографий, соответствующих содержимому ячейки в Excel , Сопоставить импортируемые изображения функция Kutools for Excel - это фантастический инструмент, который может
Это также хорошая идея, чтобы дать любимому человеку Photo Calendar , Вы спросите меня, как ?
Как Google Pay работает в магазинах? Для совершения покупок в магазине с помощью Google Pay выполните следующие действия: Ищите символ Google Pay или символ бесконтактного платежа в терминале бесконтактных платежей рядом с оформлением заказа. Разблокируй свой телефон. Поднесите телефон к терминалу и дождитесь появления галочки. Вот и все. Не нужно даже открывать приложение Google Pay. Когда Google впервые представил Google
Как вы находите нужных людей?
Как вы находите нужных людей? Еще раз, я сыграл роль владельца магазина, который ищет кого-то, чтобы сделать графический дизайн . Я много искал и скажу, что это нелегко. Возможно, я удалил слишком много компаний. А именно - я отказался от компаний, занимающихся дизайном магазина для конкретных платформ (они часто проектируют как часть ограничений платформы и, на мой взгляд, не являются полностью инновационными и креативными). Я пропустил отдельных
Тогда нужно подумать о том, как перенести файлы из приложения iBooks в приложение Adobe Reader для iPhone 6?
Тогда нужно подумать о том, как перенести файлы из приложения iBooks в приложение Adobe Reader для iPhone 6? Вот так. Способ первый: сторонний программный менеджер телефона Apowersoft Phone Manager - это удобное приложение для управления всеми мобильными данными на вашем ПК, которое можно использовать для реализации переноса PDF-файлов из iBooks в Adobe Reader. Это не просто, потому что все, что вам нужно сделать, это всего лишь несколько кликов. Ниже приведены подробные
Вам дали устройство марки Acer, такое как монитор или смартфон, и нужны ли вам драйверы, чтобы оно правильно распознавалось вашим компьютером?
Вам дали устройство марки Acer, такое как монитор или смартфон, и нужны ли вам драйверы, чтобы оно правильно распознавалось вашим компьютером? Не отчаивайтесь: я знаю способ решить проблему в четыре и четыре. Подключившись к веб-сайту драйвера Acer , вы сможете найти все самые последние версии программного обеспечения для устройств тайваньской компании. Все, что вам нужно сделать, это ввести серийный номер (или модель) в соответствующей форме, загрузить необходимые драйверы

Как это сделать?
Как сделать это эффективно, не неся при этом больших затрат?
А что, если у нас есть обширное предложение различных продуктов и одного сообщения недостаточно?
А что если бы мы создали отдельное сообщение для 10, 20, 50 различных предложений или продуктов?
Конечный результат?
Что такое 2FA?
Как астрономы измеряют расстояния до звезд?
Как работает создание карты ума?
Но как мы можем получить текст там?
Будем ли мы получать от службы технической поддержки обновление Active Directory каждый раз, когда кто-то захочет изменить свой текст?