back-arrow-iconBack to blog

Как маркетолог сети доставки суши делает сотни HTML5-баннеров для контекстной рекламы и не сходит с ума

html5-banners-sushi-case-01

Создание баннеров иногда превращается для интернет-маркетолога в головную боль, которая не проходит неделями. Особенно когда баннеры нужны с анимацией и для разных рекламных площадок. Планируя большую кампанию контекстной рекламы, в минской сети доставки суши задумались: а есть ли сервис, который сгенерирует им сотню анимированных HTML5-баннеров с кастомным дизайном и сразу под требования рекламных сетей? Такой сервис нашёлся, он называется Pikaban. Давайте посмотрим, как им воспользовались в этой сети доставки и что из этого получилось.

Проблема

Ребята из сети доставки хотели оформить баннеры в фирменном стиле, чтобы запомниться клиентам, и показывать на баннерах всё разнообразие меню, а не только самые популярные позиции. Как обычно, дьявол в деталях, а в случае этой сети доставки — в меню. В нём больше 40 видов суши, и каждому из них соответствует фотография, название и цена. Это означало, что критический минимум для рекламной кампании — полсотни баннеров. Уже немало, но это только верхушка айсберга.

HTML5-баннеры, подходящие для одной рекламной сети, не всегда подходят для другой. Например, Google Ads принимает баннеры весом до 150 кб, а «Яндекс.Директ» — до 120 кб. Поэтому при планировании размещения в нескольких сетях нужны вариации баннеров, учитывающие требования конкретной платформы.

Кроме того, размещать контекстную рекламу можно в разных форматах, причём не обязательно ограничиваться популярными размерами вроде 300х600 или 720х90. Ведь за размещение в менее популярных форматах не такая высокая конкуренция, а значит — ставки там ниже и рекламный бюджет можно сэкономить. Так что чем больше у баннеров вариаций разных размеров, тем лучше.

Маркетологи этой доставки суши планировали размещать в одной рекламной сети баннеры в 6 форматах, а в другой — в 9, причём у каждого баннера должно было быть как минимум по 2 версии с разными призывами к действию. Подсчитаем общее количество вариаций баннеров: 40 позиций меню * 15 размеров * 2 призыва к действию — 1200 файлов, и это только на начальном этапе. Если, например, добавить вариацию с третьим призывом к действию — станет на 600 файлов больше.

html5-banners-sushi-case-06

* Примечание: доставка суши — самая что ни на есть настоящая, но ребята попросили не упоминать название своей сети в баннерном кейсе.

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

И да: дизайнера и программиста, работавших над баннерами, приходилось бы звать на помощь всякий раз, когда в меню появятся акционные цены. Или если захочется поменять надпись на кнопке или вывести дополнительный ресайз.

«Мы понимали, что нам нужно не просто разработать дизайн, но ещё и подгонять его под разнообразные размеры, и время от времени менять контент. Готовь мы баннеры вручную, процесс был бы времязатратным, трудоёмким и просто неудобным», — поделились ребята из доставки суши

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

html5-banners-sushi-case-07

Решение

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

«Главное на этапе проверки макета — проверить, как в нём отображаются все продукты, а не только один тестовый. Ведь у одного продукта может оказаться больше символов в названии, у другого — фотография не в том масштабе. Нам с командой «Пикабана» хватило двух итераций, чтобы устранить такие погрешности и адаптировать макет под все продукты», — поделились опытом в сети доставки суши.

Затем согласовали анимацию для HTML5. Остановились на том, что фон в фирменном стиле будет приближаться к зрителю и отдаляться от него, ролл на фоне — вращаться, а цена каждые три секунды будет сменяться сообщением об акции: соевый соус за 1 копейку к каждой порции роллов. С учётом таких вводных в Pikaban разработали шаблоны анимированных HTML5-баннеров сразу под технические требования Google Ads и «Яндекс.Директ» — рекламных платформ, на которых эта сеть доставки суши планировала размещаться.

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

Дальше произошло самое важное. На Pikaban появился личный кабинет для ребят из сети доставки, в который команда Pikaban загрузила все шаблоны: макеты с кастомным дизайном, адаптированные фото роллов, параметры размеров баннеров для каждой рекламной сети. А весь текстовый контент для баннеров: названия роллов, цены, слоганы, тексты для кнопки — добавлялся уже маркетологом сети доставки, через интерфейс личного кабинета. Тексты и цены можно менять, добавлять и удалять в любой момент и за секунды: навыков работы с графическими редакторами не требуется. Это даёт много возможностей для A/B-тестирования баннеров: можно, например, проверять, на какой призыв к действию аудитория лучше откликается.

html5-banners-sushi-case-08

На скриншоте: интерфейс личного кабинета сети доставки суши в сервисе Pikaban. В колонке справа — редактируемые поля: добавляем текст — и он сразу подтягивается к графике.

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

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

Когда рекламная кампания уже была запущена, в меню доставки появились новые позиции: «Ролл с авокадо, креветкой и икрой» и «Филадельфия с икрой». Ребята передали в Pikaban фотографии новинок — и уже на следующий день маркетологи сети доставки могли генерировать баннеры всех нужных форматов с новыми позициями меню. Платить за это не пришлось: обновления такого типа входят в стоимость поддержки проекта на Pikaban.

Результат

Сеть доставки суши получила кастомные шаблоны анимированных баннеров в HTML5, в которые можно добавлять любые варианты текстов, выбирать размеры и скачивать баннеры, готовые к загрузке в рекламные сети.

«Рекламная кампания с баннерами из «Пикабана» идёт уже третий месяц и, по нашим наблюдениям, не «выгорает». С помощью настроек таргетинга мы можем показывать разным сегментам аудитории разные продукты, а наличие множества вариаций баннеров с разными блюдами даёт нам довольно много возможностей в этом направлении. А то, что не нужно никого дёргать для правок в текстах на баннерах, очень экономит нам время», — отметили в сети доставки суши.

Нужен баннер «Шапка-маки с креветкой» для «Яндекс.Директ» размером 720х90? Пара кликов, жмём «Скачать» и загружаем баннер в рекламную сеть.

Нужно указать акционные цены на «Бонито с лососем и огурцом» для Google Ads? Редактируем цену прямо в личном кабинете, а не в графическом редакторе, ставим галочки напротив нужных форматов — и zip-архив с HTML5-баннерами выбранных размеров готов к выгрузке.

К слову, скачивать все-все вариации баннеров про запас и организовывать их хранение на локальном компьютере или в облаке не обязательно. Выгрузить баннеры нужного формата можно из Pikaban в любой момент. А доступ к личному кабинету можно предоставить нескольким сотрудникам компании, причём у каждого будут свои логин и пароль.

На основе опыта создания баннеров для этой сети доставки команда Pikaban улучшила сервис. Теперь для клиента по умолчанию создаются сразу все возможные размеры для Google Ads и «Яндекс.Директ», а дополнительные размеры для размещения в других сетях добавляются по запросу клиента и бесплатно. Также Pikaban научился выводить баннеры в формате MP4, благодаря чему анимированный рекламный контент из Pikaban стало возможно размещать в Facebook и Twitter.

Узнать больше о Pikaban можно на сайте pikaban.com.

Contact us

Related articles

Popular articles

Как маркетолог сети доставки суши делает сотни HTML5-баннеров для контекстной рекламы и не сходит с ума

Multilingual marketing

7 minutes read

Анализируем SEO-продвижение. 9 вопросов по анализу данных Вебмастера

Multilingual marketing

12 minutes read

Продвижение сайта статьями: инвестиции в контент

Multilingual marketing

5 minutes read

Latest articles

SEO-план. Сколько времени занимает продвижение сайта в поиске?

10 minutes read

Онлайн реклама магазина автозапчастей — Кейс

5 minutes read

Настройки представления Google Analytics - Кейс

8 minutes read

Наши клиенты

Более 3000 компаний доверили нам свои проекты с 2004 года. У них отличные проекты. У вас – тоже. Мы хотим работать с вами.

Microsoft
Paradox Interactive
Under Armour
JetBrains
2checkout
TikTok
EPAM
Oracle
tinyBuild
OnePlus
Viber
Hewlett Packard
PeopleDoc
Warner Brothers
Muse group
Keenetic
Petcube
Zyxel
Planner 5D
Sumsub
Parimatch
neybox
Apptweak
Vizor
Itdesign
King_bird
Sana
Sufio
Nevosoft
App in the Air
Reaction Games
B4T Games
DocuWare
Tonsser
Red Panda Labs
EWA
Edkon Games
Odinsoft Inc.
Mystery Tag
Transporeon
Discourse
Speakap
Soundiiz
PosterMyWall
Character-Bank
Ricoh
Nihon
Hakali
S-game
Deus Craft
Eidolon
2Solar
Faceapp
Softline
Xsolla
Webmoney
Bitrix24
Yandex
MAPS.ME
Kaspersky
Aviasales
Itransition
Cryomed
Adriatic Marinas
Minto
Weestep
Alfacash
BamBoo
Alvadi
Kisa Phone
Promwad
King servers
Infatica
Ethplorer
Alfa Coins
Dhound
Boat rental d.o.o.
Solveig Multimedia
Spin Backup
East Imperial Soft
Conf.app
Aktiia
Tovie AI
HUB Parking
Vigr Games
InterSystems
Circuit
Adizes Institute
24 Hour Home Care
Onrizon Social Games
QS Solutions
Sportplus
Active Map
Aviloo
Beesender
Choco
Driivz
Mister_morris_games
Mod_io
Onde
Playwing
Soma

У вас есть проект?

Расскажите нам о нем подробнее. А мы вернемся с решением и расчетом стоимости.

Заполнить форму

Забронировать звонок
Чем мы можем помочь?*
Мне нужно локализовать приложение на 40 языков (список языков ниже), а также настроить непрерывную локализацию последующих апдейтов. Кроме того, мне нужен яркий трейлер и серия пре-роллов для Youtube
Обязательное поле
Загрузите файлы
Обязательное поле
Пожалуйста, введите корректный адрес эл. почты
Пожалуйста, введите корректный номер телефона
Обязательное поле
Обязательное поле

form-success-cat

Мяу!

Спасибо! Мы свяжемся с вами в ближайшее время для уточнения деталей!

form-success-cat

Мяу!

Что-то пошло не так...