Акция!
Подсветите горячие лиды Скорингом за полцены и звоните тем, кто уже готов к покупке.
Реклама ООО «Колтач Солюшнс»
ИНН 7703388936
erid: 2VtzqxQZMr8
Как создать баннер для сайта: пошаговая инструкция Подробное руководство по созданию баннера для сайта. Какие виды существуют и для чего они нужны? Как сделать эффективный рекламный баннер, где его разместить и как добавить на страницы сайта? Как сделать баннер для сайта самостоятельно
Средняя оценка 2.5 Общее количество оценок 11
18 января 2019
Нет времени читать?
Отправить статью на почту
Главная | Блог | Темы | Маркетинг | Как сделать баннер для сайта самостоятельно

Как сделать баннер для сайта самостоятельно

18 января 2019
12 мин на чтение
72 549
Как сделать баннер для сайта самостоятельно
author__photo

Вопрос о том, как сделать баннер — один из старейших в рекламном бизнесе рунета. Именно с баннеров, в частности, начинался промоушн в отечественном сегменте сети. В их славную историю мы не будем подробно вдаваться. Достаточно об основах баннерной рекламы мы рассказали в материалах Какие есть виды рекламы в интернете и Что такое медийная реклама в интернете. В этой статье мы опишем, как именно делать баннеры с учётом новых реалий.

Основная задача баннеров — обеспечить приток аудитории. Заранее позаботьтесь о том, чтобы точно измерять и анализировать эффективность рекламы с помощью нашего инструмента:

Calltouch
Привлекайте, конвертируйте
и анализируйте ваших клиентов
Платформа омниканального маркетинга
Подробнее

Виды баннеров

Бывает несколько основных видов баннеров:

  • Графический баннер. Прямоугольное изображение, по клику ведущее на рекламируемую страницу.
  • Слайдер. Несколько изображений, сменяющихся по таймеру и по клику.
  • HTML-баннер. Интерактивный элемент, который может содержать несколько изображений, анимацию и HTML-код. Воспроизводит различные сценарии и ведёт на разные страницы в зависимости от клика в определённую область.

Все эти разновидности размещаются в стандартных контейнерах определённых размеров. Их насчитывается около двух десятков и все мы приводить не будем. Для примера: 160×600, 240×400, 240×600.

Также существует множество более сложных баннеров, таких как HTML MPU — несколько HTML-креативов, Expandable — растягивающийся, Rich-media — баннер, содержащий сразу несколько медиа-форматов, и другие. Их создают и размещают профессионалы. Такие баннеры, в основном, разрабатываются отдельно для каждого проекта, в отличие от перечисленных выше, пригодных для использования в массовых рекламных сетях, также называемых баннерными.

Размещение баннеров

Есть несколько способов разместить баннер в интернете. Раньше это была процедура сугубо ручная — на сайте создавался блок, в котором администратором размещался тот или иной креатив.

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

Далее баннер адресуется не какому-то заранее определённому сайту. Работает RTB-алгоритм. Real Time Bidding — технология, с помощью которой осуществляется целевой показ рекламных объявлений. В зависимости от того, к какому потребительскому сегменту принадлежит посетитель страницы, которому будет продемонстрирован баннер, аукцион подбирает для него наиболее подходящее объявление согласно настройкам рекламодателя. Последний в рабочем кабинете определяет, какие именно сегменты пользователей будут видеть его баннеры, а площадки управления данными подбирают ту аудиторию, которая по результатам анализа подходит под описание. В результате, происходит моментальный подбор баннера — только в последние доли секунды загрузки страницы становится понятно, какой именно баннер система отобразит в блоке.

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов
Подробнее

Площадки

В частных случаях вам может понадобиться только статичное размещение на одном или нескольких сайтах. Необходимо создать баннер подходящего формата — графический, слайдер или HTML, чтобы разместить его в блоке на сайте. В случае, если вы владелец ресурса, то вы сами решаете, какое место займёт баннер, и загружаете его в каталог. Либо вы договариваетесь с владельцем сайта о месте размещения, передавая ему исходники баннера.

Баннерные сети

Размещение баннеров в интернете обеспечивает перечень баннерных сетей, у каждой из которых свои требования к креативам.

Например, Rotaban.ru всё ещё принимает flash-баннеры, но запрещает HTML.

Более серьёзный игрок Adfox.ru предлагает широкий выбор. Рекламодатель вправе разместить графические и HTML-баннеры. В первом случае допустимы форматы png, gif, jpg, svg и файлы весом не более 300 Кб.

Сеть GinAds.com работает с разнообразными форматами, например: Топлайн, Слайдер, Видео, Боттомлайн, Fullscreen, HTML-баннеры.

Яндекс.Директ

Яндекс внедрил целый набор баннерных размещений для рекламодателей.

  • Летом 2016 в РСЯ помимо текстово-графических объявлений появилась возможность показывать сугубо графические баннеры.
  • Медийная кампания позволяет показывать баннеры с оплатой за показы.
  • Смарт-баннеры, работающие в сетях, основаны на фиде — списке товаров. На его основе генерируется динамический контент под конкретного пользователя.
  • Баннеры на поиске — новое слово в контекстной рекламе. Теперь большой графический баннер можно разместить не только в сетях, но также на странице поисковой выдачи.

Google Ads

Более скромные, но вполне реальные возможности размещения баннеров предоставляет также Google. В рекламном кабинете можно обнаружить, что при создании кампании в КМС — контекстно-медийной сети — вам доступна загрузка баннеров. Тем не менее, в то время как графические объявления с анимацией и без разрешаются любому рекламодателю, HTML5 будет доступен только по запросу и при соблюдении требований:

  • Аккаунт с хорошей репутацией в аспекте соблюдения правил и оплаты услуг;
  • Общие затраты с момента запуска аккаунта — не менее 1000 долларов США.

Вместе с тем, летом 2018 Google по примеру других игроков создал формат адаптивных медийных объявлений. Эти объявления подстраиваются под пользователя с помощью динамического контента и могут быть созданы на основе фида.

Как сделать баннер для сайта и сетей

Начнём с того, что вам может понадобиться с наибольшей вероятностью.

Яндекс.Директ

  • Графическое объявление

Создаётся в меню Текстово-Графических объявлений. Загрузка креатива возможна с устройства, а также предусмотрено создание баннера с помощью конструктора.

После задания настроек показов перейдите на шаг создания объявлений. Выберите вверху тип Графическое. В разделе Креатив появится выпадающий список. Из списка выберите подходящий вариант — например, Создать новые по шаблону.

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

  • Медийная кампания

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

Для HTML-баннера необходимо подготовить zip-архив с кодом и креативами.

  • Смарт-баннеры

Необходимо пройти модерацию сайта, предварительно отправив документы: лицензии и сертификаты на продажу размещаемой и рекламируемой продукции.

Далее — загрузить фид — прайс-лист, составленный по шаблону.

  • Баннер на поиске

Креатив создаётся предварительно пользователем. Требования:

  • 120 Кб
  • JPG, PNG или GIF
  • 240×400 px

Google Ads

Создание адаптивного медийного объявления начинается с меню Объявления и расширения. В нём необходимо кликнуть иконку плюса и выбрать Адаптивное медийное объявление.

Можно загрузить до 15 изображений и до 5 логотипов. Требования:

  • Горизонтальная ориентация. Соотношение сторон – 1,91:1; минимальный размер – 600 x 314. Не более 5 МБ.
  • Квадрат. Соотношение сторон – 1:1 (квадрат), минимальный размер – 300 x 300. Не более 5 МБ.
  • Логотип (необязательно). Соотношение сторон – 1:1 (квадрат), минимальный размер – 128 x 128 (рекомендуемый формат – 1200 x 1200). Не более 5 МБ.
  • Избыточный текст. Не более 20 % изображения.

Сами объявления состоят из настраиваемых элементов:

  • Короткий заголовок (как минимум один, до пяти; каждый — до 30 символов)
  • Длинный заголовок (до 90 символов)
  • Описание (как минимум одно, до пяти)
  • Название компании или бренда
  • Конечный URL
  • Параметры отслеживания или специальные параметры (необязательно)
  • Текст призыва к действию (необязательно)  
  • Рекламный текст и префикс цены

Баннер с нуля

Специалисты рекомендуют различный софт, который позволяет делать баннеры самостоятельно — в том числе, HTML-баннеры, в которых код генерируется самой программой.

Так, среди популярного программного обеспечения выделяют:

  • Adobe Animate CC

  • Google Web Designer

Если у вас есть навыки вёрстки, то лучше самостоятельно прописать компоненты на CSS, javascript и HTML.

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

Коллтрекинг
Отслеживайте источники звонков
с рекламы для ее оценки
Вкладывайте в ту рекламу, которая приводит клиентов. Слушайте звонки и улучшайте работу менеджеров.
Перейти

Редактор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нравится наш блог?
Давайте дружить!
Медиакит
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]

Повышаем конверсию на каждом этапе воронки

Чтобы клиент шел по своему пути точно к цели, маркетологу нужны информация и сервисы – свои на каждом этапе. Инструменты Calltouch могут закрыть все потребности маркетинга на пути клиента.

У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить