Rich Media: как устроены интерактивные рекламные форматы

Обычный баннер чаще всего работает по простой схеме:

Показ
-
клик
-
переход на сайт

Rich media расширяет эту модель.

Пользователь может взаимодействовать с рекламой ещё до перехода на сайт:

раскрыть блок
посмотреть видео
переключить карточку
запустить анимацию
ответить на вопрос
поиграть
повернуть объект
посмотреть товар

Поэтому rich media полезно рассматривать не как "баннер с красивой анимацией", а как небольшое интерактивное приложение, встроенное в рекламное размещение.

В рекламной индустрии термин rich media обычно означает цифровой креатив с расширенными возможностями взаимодействия: видео, аудио, анимацией, изменением размера, несколькими состояниями или реакцией на действия пользователя.

Google определяет rich media как рекламу с расширенными возможностями вроде видео, аудио и интерактивных элементов. IAB описывает HTML5-рекламу как небольшие web-страницы, где могут использоваться JavaScript, CSS, SVG, видео и другие web-технологии.

Технически rich media находится на пересечении трёх областей:

Web development
+
Advertising technology
+
Interaction design

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

1. Чем rich media отличается от обычного баннера

Статическое изображение содержит готовый результат.

Например:

banner.jpg

Браузеру остаётся только показать картинку.

Rich media чаще представляет собой набор ресурсов:

index.html
styles.css
script.js
images/
fonts/
video/

После загрузки среда должна выполнить код и собрать интерфейс.

Поэтому rich media гораздо ближе к небольшой web-странице.

Обычный display banner

Может содержать:

• изображение;
• текст;
• одну ссылку;
• простую анимацию.

Основное действие пользователя:

кликнуть
или
не кликнуть

Rich media

Креатив может иметь внутренние состояния.

Например:

состояние 1
-
показывается автомобиль

пользователь свайпает
-
меняется цвет

пользователь нажимает "Салон"
-
открывается интерьер

пользователь нажимает CTA
-
переходит на сайт

Здесь взаимодействие существует до перехода.

Это основное различие.

2. Rich media, HTML5-реклама и видео - не одно и то же

Эти понятия часто смешивают.

HTML5 ad

HTML5 описывает технический способ построения креатива.

Он может использовать:

HTML
CSS
JavaScript
SVG
Canvas
video
audio

Но простой HTML5-баннер с одной анимацией не обязательно является сложным rich media форматом.

Video ad

Видео является отдельным медиатипом.

Оно может быть частью rich media:

баннер
-
пользователь раскрывает его
-
внутри запускается video player

Но обычный preroll сам по себе не обязательно rich media.

Rich media

Здесь важнее характер взаимодействия:

креатив имеет несколько состояний
+
пользователь взаимодействует с ним
+
система может измерять эти действия

3. Основные форматы rich media

Rich media не является одним стандартным баннером.

Expandable

Изначально креатив занимает небольшую область.

После действия пользователя:

300x250
-
expand
-
600x500

Внутри могут появиться:

• видео;
• каталог;
• форма;
• галерея;
• дополнительная информация.

Interstitial

Креатив занимает значительную часть экрана между этапами работы пользователя с сайтом или приложением.

Особенно распространён в мобильных приложениях.

Interactive banner

Креатив остаётся внутри своего рекламного блока, но реагирует на:

• hover;
• click;
• swipe;
• drag;
• выбор варианта;
• изменение состояния.

Playable ad

Это мини-игра или интерактивная демонстрация продукта.

Типичный сценарий:

пользователь пробует механику
-
понимает принцип продукта
-
получает CTA

Carousel / product gallery

Внутри одного placement пользователь переключает товары или варианты продукта.

Video-rich creative

Видео встроено в интерактивный интерфейс.

Пользователь может:

• запустить;
• остановить;
• развернуть;
• перейти к другому состоянию;
• продолжить взаимодействие после просмотра.

4. Из чего технически состоит rich media

Минимальный HTML5-креатив может выглядеть как небольшой frontend-проект:

creative/
├── index.html
├── styles.css
├── script.js
└── assets/
    ├── product.webp
    ├── logo.svg
    └── video.mp4

HTML

Определяет структуру:

<div class="creative">
  <img
    src="assets/product.webp"
    alt="Product"
  >

  <button id="cta">
    Подробнее
  </button>
</div>

CSS

Отвечает за:

• расположение;
• размеры;
• адаптивность;
• анимации;
• состояния элементов.

JavaScript

Реализует поведение:

const button = document.querySelector("#cta");

button.addEventListener("click", () => {
  openLandingPage();
});

Именно JavaScript чаще всего превращает статический креатив в интерактивный.

5. Состояния rich media креатива

Даже небольшой rich media блок удобно рассматривать как state machine.

Например:

collapsed
-
expanded
-
video
-
product
-
exit

Пользователь вызывает transition:

click expand
-
collapsed -> expanded

click video
-
expanded -> video

click close
-
expanded -> collapsed

Это важная архитектурная идея.

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

6. Как rich media попадает пользователю

Креатив не существует отдельно от рекламной инфраструктуры.

Упрощённая цепочка:

Advertiser
-
Creative platform / Ad server
-
Publisher
-
Browser или mobile app
-
Ad container
-
Rich media creative

Ad server

Хранит или обслуживает:

• creative;
• campaign settings;
• tracking;
• click URLs;
• event data.

Publisher

Сайт или приложение, где показывается реклама.

Ad container

Среда, внутри которой выполняется сторонний creative.

В web это часто iframe.

В mobile app могут использоваться WebView и специальные рекламные API.

Контейнер важен потому, что рекламный JavaScript не должен получать неограниченный доступ к странице или приложению.

7. Почему rich media часто выполняется в iframe

Представим, что рекламодатель может выполнить любой JavaScript прямо внутри сайта издателя.

Тогда сторонний код потенциально может:

• менять DOM страницы;
• конфликтовать с JavaScript сайта;
• получать лишний доступ к данным;
• ломать интерфейс;
• перенаправлять пользователя.

Поэтому рекламу часто помещают в изолированный контекст:

Publisher page
-
iframe
-
creative

iframe создаёт границу между:

страницей publisher

и:

сторонним рекламным кодом

Но изоляция создаёт другую задачу.

Креативу иногда нужно попросить контейнер:

увеличить размер
открыть URL
перейти в fullscreen
узнать состояние видимости
получить доступ к разрешённой функции устройства

Для этого появляются стандартизированные интерфейсы.

8. MRAID

MRAID - Mobile Rich Media Ad Interface Definitions.

Это стандартный API IAB Tech Lab для rich media рекламы внутри мобильных приложений.

Проблема без стандарта:

App A
-
свой advertising SDK

App B
-
другой SDK

App C
-
третий SDK

Если у каждого SDK свой интерфейс, один creative приходится адаптировать под каждую среду.

MRAID создаёт общий слой:

Rich media creative
-
MRAID API
-
Ad SDK
-
Mobile application

Креатив может использовать стандартизированные операции.

Концептуально:

mraid.open(url);

Также API связан с:

• resize;
• expand;
• orientation;
• visibility;
• доступными возможностями среды.

На момент подготовки материала IAB Tech Lab продолжает публиковать MRAID 3.0 и инструменты проверки совместимости.

9. Что такое SHARC

У web и mobile исторически существовали разные механизмы безопасного запуска rich media.

Например:

SafeFrame
-
web

MRAID
-
mobile apps

IAB Tech Lab разработал SHARC, Secure HTML Ad Rich-media Container.

Его идея:

Один HTML rich media creative должен иметь стандартный безопасный интерфейс в разных средах.

SHARC описывает контейнер, в котором creative изолирован от чувствительных данных страницы или приложения и взаимодействует со средой через стандартный API.

Для вводного понимания достаточно зафиксировать общую эволюцию:

HTML5 creative
-
изолированное выполнение
-
стандартизированный API между creative и host environment

10. Что можно измерять внутри rich media

Главное аналитическое преимущество rich media - возможность измерять не только impression и click.

Например:

creative_loaded
creative_viewable
expanded
collapsed
video_started
video_completed
product_selected
game_started
game_completed
cta_clicked

Теперь можно анализировать внутренний путь пользователя.

Пример:

100 000 impressions
-
65 000 viewable impressions
-
8 000 interactions
-
3 500 video starts
-
1 900 video completions
-
700 exits

Это позволяет отвечать не только на вопрос:

Сколько пользователей кликнуло?

Но и:

Как пользователи взаимодействовали с самим креативом?

11. Impression и viewability

Эти метрики нельзя считать одинаковыми.

Impression

Рекламная система зарегистрировала показ.

Но это не гарантирует, что пользователь фактически видел креатив.

Например, placement мог находиться ниже видимой области страницы.

Viewability

Показывает, был ли creative фактически видим пользователю по правилам конкретной рекламной системы или принятому стандарту измерения.

Поэтому аналитическую цепочку полезно представлять так:

impression
-
viewable impression
-
interaction
-
exit
-
conversion

12. Interaction rate

Условно:

[ InteractionRate = \frac{Interactions} {EligibleImpressions} ]

Но конкретное определение interaction зависит от рекламной платформы.

Например:

hover

может не считаться полноценным взаимодействием,

а:

expand
video play
game interaction

может считаться.

Поэтому метрику нельзя интерпретировать без определения конкретной платформы.

13. Exit

В rich media вместо одного click может быть несколько выходов.

Например:

Подробнее
Купить
Посмотреть каталог
Найти магазин

Каждому действию можно назначить отдельное событие:

exit_product
exit_catalog
exit_store

Это помогает понять, какое действие внутри creative оказалось наиболее востребованным.

14. Custom events

Сложный creative может передавать собственные события.

Например, автомобильный конфигуратор:

color_selected
wheel_selected
interior_opened
configuration_completed

Но tracking нужно проектировать заранее.

Если сначала запустить кампанию, а потом решить:

Хотим узнать, какой цвет выбирали пользователи

эту информацию уже нельзя восстановить, если событие не собиралось.

Поэтому аналитическая схема является частью разработки креатива.

15. Rich media как frontend-приложение

Технически полезно думать так:

Rich media
=
маленький frontend
+
жёсткие ограничения рекламной среды

У него есть:

• DOM;
• CSS;
• JavaScript;
• assets;
• state;
• events;
• network constraints;
• runtime API.

Но в отличие от обычного сайта:

creative должен быть компактным
creative должен быстро загрузиться
creative работает в чужой среде
creative может быть sandboxed
creative должен поддерживать tracking

16. Производительность

Rich media легко сделать слишком тяжёлым.

Например:

2 MB JavaScript
8 MB video
4 MB images
несколько fonts
сложные animations

Тогда пользователь может увидеть пустой блок до того, как креатив загрузится.

IAB в рекомендациях по HTML5-рекламе отдельно уделяет внимание оптимизации assets и скорости загрузки.

Что оптимизируют

• изображения;
• видео;
• SVG;
• JavaScript;
• CSS;
• fonts;
• количество network requests.

17. Initial load и polite loading

Полезно разделять:

что нужно для первого отображения

и:

что можно загрузить позже

Например:

сразу
-
фон
логотип
CTA

после первого отображения
-
видео
галерея
дополнительные assets

Такой подход часто называют polite loading.

Основной creative появляется быстро, а тяжёлые ресурсы подгружаются позже.

18. Изображения

Для web-креатива могут использоваться:

• WebP;
• AVIF, если среда поддерживает;
• SVG;
• PNG;
• JPEG.

Но реальный выбор зависит от требований рекламной платформы.

Нельзя исходить только из возможностей современного браузера. Ad server может накладывать собственные ограничения на creative package.

19. Видео

Видео обычно является самым тяжёлым asset.

Нужно учитывать:

• autoplay policy;
• muted autoplay;
• codec support;
• размер файла;
• buffering;
• viewability;
• poster frame.

Нельзя рассчитывать, что браузер автоматически разрешит воспроизведение звука.

Поэтому rich media часто запускает видео без звука или после явного действия пользователя.

20. Анимация

Основные варианты:

CSS transitions
CSS animations
JavaScript
Canvas
SVG
WebGL

Для большинства креативов достаточно CSS и requestAnimationFrame.

Canvas и WebGL оправданы, если действительно нужна сложная графика.

Сложность рендера влияет на:

• CPU;
• GPU;
• battery;
• frame rate.

На мобильных устройствах это особенно заметно.

21. Адаптивность

Обычный сайт работает с viewport браузера.

Rich media часто существует внутри placement:

300x250
320x50
728x90

Поэтому есть два уровня:

страница
-
имеет собственный viewport

creative
-
имеет собственный container

Нужно учитывать:

• container dimensions;
• orientation;
• expandable state;
• safe areas;
• device pixel ratio.

22. Interaction design

Rich media легко превратить в раздражающий формат.

Плохой creative:

сам раскрывается
перекрывает контент
непонятно как закрыть
автоматически включает звук
ловит случайные taps

Хороший creative сохраняет контроль за пользователем.

Основные принципы:

• понятный CTA;
• очевидный close;
• предсказуемое поведение;
• отсутствие ложных системных элементов;
• отсутствие неожиданного звука;
• интерактивность должна быть связана с задачей продукта.

23. Accessibility

Интерактивная реклама тоже является интерфейсом.

Стоит учитывать:

• контраст;
• читаемый текст;
• keyboard focus там, где среда это допускает;
• alt text;
• отсутствие информации только через цвет;
• reduced motion;
• понятные controls.

Accessibility не перестаёт быть важной только потому, что интерфейс является рекламным.

24. Безопасность

Rich media выполняет сторонний код.

Это создаёт риски:

• вредоносный JavaScript;
• redirect;
• сбор лишних данных;
• доступ к page context;
• загрузка стороннего кода;
• подмена destination URL.

Изоляция iframe, sandbox и стандартизированные APIs уменьшают эти риски.

Но безопасность должна учитываться по всей цепочке:

creative build
-
creative validation
-
ad server
-
publisher
-
runtime container

25. Privacy

Rich media может генерировать много interaction events.

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

Нужно разделять:

анонимное событие
-
video_completed

и:

идентифицирующие данные пользователя

Чем сложнее tracking, тем важнее:

• data minimization;
• consent;
• retention;
• контроль доступа;
• понятная цель обработки.

26. Как проектировать rich media creative

Хороший процесс начинается не с анимации.

Шаг 1. Определить задачу

Например:

познакомить пользователя с новой моделью автомобиля

Не:

сделать интерактивный баннер

Технология не является целью.

Шаг 2. Определить основное действие

Например:

посмотреть конфигурации

или:

пройти мини-демо

Шаг 3. Определить состояния

intro
-
product
-
details
-
CTA

Шаг 4. Определить события аналитики

product_opened
variant_selected
cta_clicked

Шаг 5. Собрать первый экран

Он должен отображаться быстро и быть понятным даже до загрузки тяжёлого контента.

Шаг 6. Добавить интерактивность

После того, как понятна структура.

Шаг 7. Подключить platform API

Например MRAID для in-app среды.

Шаг 8. Проверить ограничения платформы

• размер package;
• допустимые file types;
• внешние requests;
• click handling;
• video rules;
• sandbox;
• tracking API.

Шаг 9. Протестировать

На:

• разных размерах;
• разных browsers;
• мобильных устройствах;
• медленном соединении;
• orientation change;
• interrupted loading.

27. Минимальный пример интерактивного креатива

HTML:

<div class="card">
  <img
    id="product"
    src="product.webp"
    alt="Product"
  >

  <button id="next">
    Следующий вариант
  </button>

  <button id="cta">
    Подробнее
  </button>
</div>

JavaScript:

const images = [
  "product-1.webp",
  "product-2.webp",
  "product-3.webp",
];

let index = 0;

const product = document.querySelector(
  "#product"
);

const nextButton = document.querySelector(
  "#next"
);

nextButton.addEventListener(
  "click",
  () => {
    index = (index + 1) % images.length;

    product.src = images[index];

    track("variant_selected", {
      index,
    });
  }
);

Это уже отличается от обычного баннера.

У creative появляется:

state
+
interaction
+
tracking

28. Tracking layer

Лучше не разбрасывать analytics calls по всему коду.

Можно создать отдельный слой:

function track(
  eventName,
  payload = {}
) {
  console.log(
    "track",
    eventName,
    payload
  );
}

Позже реализация может использовать API конкретной рекламной платформы.

Тогда interaction logic не привязана напрямую к одному tracking provider.

29. Click handling

Нельзя считать, что всегда достаточно:

window.location.href = url;

Рекламная платформа может требовать собственный механизм, чтобы:

• зарегистрировать exit;
• открыть браузер корректно;
• соблюдать sandbox;
• применить tracking URL.

В MRAID-среде используется API контейнера.

Поэтому destination logic должна учитывать platform contract.

30. Что тестировать

Визуально

• clipping;
• overflow;
• text;
• animation;
• orientation;
• размеры.

Функционально

• buttons;
• expand;
• collapse;
• close;
• video;
• CTA.

Аналитика

• impression;
• interaction;
• custom events;
• exits.

Производительность

• initial load;
• asset size;
• CPU;
• dropped frames.

Ошибки

• asset не загрузился;
• video недоступно;
• platform API отсутствует;
• пользователь быстро закрыл creative.

31. Fallback

Rich media должен корректно деградировать.

Например:

JavaScript и platform API работают
-
полная интерактивность

возможности недоступны
-
статический fallback

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

32. Rich media и landing page

Rich media не заменяет полноценный landing page.

Креатив работает внутри ограниченного placement.

Его задача:

заинтересовать
-
дать короткое взаимодействие
-
подвести к следующему действию

Landing page может содержать:

• длинный контент;
• форму;
• каталог;
• checkout;
• подробные характеристики.

Если попытаться поместить весь сайт внутрь баннера, creative становится тяжёлым и перегруженным.

33. Когда rich media оправдан

Формат особенно полезен, когда продукт можно раскрыть через действие.

Например:

автомобиль
-
сменить цвет

мебель
-
переключить интерьер

игра
-
показать механику

сервис
-
пройти мини-сценарий

кино
-
посмотреть trailer

Интерактивность должна давать пользователю дополнительный опыт или информацию.

34. Когда простой banner лучше

Если задача:

сообщить скидку
+
дать CTA

сложный rich media может только добавить:

• стоимость разработки;
• вес;
• риск ошибок;
• время тестирования.

Технологическая сложность сама по себе не является ценностью.

35. Rich media и A/B testing

Можно сравнивать:

static creative
против
rich media

Но одной CTR недостаточно.

Rich media меняет сам путь взаимодействия.

Полезно смотреть:

• viewability;
• interaction rate;
• exit rate;
• video completion;
• conversion after interaction;
• time spent.

При этом primary metric нужно определить заранее.

Иначе после кампании легко выбрать ту метрику, которая случайно выглядит лучше.

36. Архитектура production-креатива

Хороший production creative можно разделить на слои:

Presentation
-
HTML + CSS

State
-
текущее состояние интерфейса

Interaction
-
event handlers

Platform adapter
-
MRAID / ad platform API

Analytics
-
tracking events

Assets
-
images / video / fonts

Такое разделение упрощает перенос между платформами.

37. Creative adapter

Допустим, остальной код вызывает:

openUrl(url);

В web preview реализация может делать:

window.open(url);

В MRAID:

mraid.open(url);

В другой рекламной платформе:

platform.exit(url);

Остальная business logic creative не меняется.

Creative logic
-
adapter
-
platform API

Это обычный архитектурный принцип frontend-разработки, применённый к рекламе.

38. Debug logging и рекламная аналитика

Для разработки полезны события:

creative_init
platform_ready
assets_loaded
interaction
exit
error

Но debug logging и marketing analytics решают разные задачи.

console error
-
нужен разработчику

video_completed
-
нужен аналитике

Не стоит смешивать эти потоки без необходимости.

39. Типичные ошибки

Интерактивность ради интерактивности

Пользователю дают много действий, но они не помогают понять продукт.

Слишком тяжёлый initial load

Креатив загружается после того, как пользователь уже пролистал placement.

Tracking добавляется в конце

Часть важных действий невозможно измерить.

Нет state model

Код превращается в набор случайных DOM handlers.

Platform API вызывается напрямую по всему проекту

Перенос creative становится дорогим.

Нет fallback

В неподдерживаемой среде пользователь видит пустой блок.

Автоматический звук

Конфликтует и с browser policies, и с пользовательским опытом.

Слишком маленькие controls

Особенно критично на мобильных устройствах.

40. Rich media как часть рекламной системы

Полезно смотреть шире самого creative.

Креатив
-
Ad server
-
Publisher
-
User interaction
-
Tracking
-
Analytics
-
Campaign optimization

Если creative технически хороший, но:

• неправильно измеряется;
• долго загружается;
• ломается в publisher environment;
• события невозможно связать с кампанией,

то задача всё равно решена плохо.

Rich media является не просто design asset, а компонентом рекламной инфраструктуры.

41. Как rich media связан с обычной web-разработкой

Практически все базовые web concepts остаются актуальны:

DOM
CSS
JavaScript
events
state
network
performance
security
accessibility

Но добавляются adtech-ограничения:

sandbox
creative size
platform APIs
tracking
click handling
viewability
publisher compatibility

Поэтому frontend-разработчику войти в rich media относительно просто, если он уже понимает web platform.

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

42. Что важно запомнить

Rich media - не название одной технологии.

Это класс интерактивных рекламных форматов.

Типичный creative технически выглядит так:

HTML
+
CSS
+
JavaScript
+
assets
+
ad platform API
+
tracking

Он выполняется внутри рекламного контейнера и должен:

• быстро загружаться;
• корректно работать в ограниченной среде;
• безопасно взаимодействовать с publisher;
• отслеживать ключевые события;
• иметь fallback;
• сохранять контроль за пользователем.

Главное отличие от обычного display:

обычный banner
-
основное действие пользователя происходит через click

rich media
-
часть пользовательского опыта происходит внутри creative

Именно из этого появляются:

• состояния;
• события;
• video;
• игровые механики;
• expand;
• custom analytics;
• MRAID;
• требования к производительности;
• требования к безопасности.