Блог Алконост

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

Written by Наташа Шухман | 05.10.21 13:35

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

Проблема

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

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

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

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

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

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

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

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

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

Решение

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

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

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

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

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

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

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

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

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

Результат

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

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

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

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

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

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

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