Советы по созданию рекламы в Web-истории

Web-истории — полноэкранные, пролистываемые касанием истории, обеспечивающие эффект глубокого погружения в контент. Реклама, размещаемая в Web-историях, должна обладать цельным дизайном, согласованным с UX Web-историй, для того чтобы избежать ощущения «прерывистости» просмотра истории. В данном руководстве рассказывается, как создать рекламу для Web-историй.

Принципы рекламы в Web-историях

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

Реклама в Web-историях соответствует следующим принципам:

Корректно сформированная реклама на AMPHTML: следует тем же техническим спецификациям, что и классическая реклама на AMPHTML.
С упором на визуальную составляющую: смелая, контекстуальная и вовлекающая с первого кадра.
Нативная: размер страницы рекламы совпадает с размером органической страницы истории.
Единая модель взаимодействия: пользователь переходит на следующую страницу так же, как с обычной страницы истории.
Быстрая: реклама никогда не отображается в полузагруженном состоянии.

Для обеспечения согласованности с этими принципами среда выполнения Web-историй определяет подходящее размещение рекламной страницы в пределах Web-истории. Подробнее о принципах размещения рекламы читайте в статье Размещение рекламы в Web-историях.

Образец рекламы в Web-истории

Реклама в Web-историях представляет собой AMPHTML-рекламу, которая, однако, соответствует установленным спецификациям макета и содержит требуемые UI-элементы и теги meta. Реклама для Web-историй всегда содержит кнопку призыва к действию (CTA), а также отметку «Реклама», представленную в виде текстового уведомления вверху страницы.

Для согласованности впечатлений пользователя рендеринг отметки «Реклама» и кнопки CTA осуществляется самой средой выполнения Web-историй.

ВАЖНО! В рекламе для Web-историй кликабельной является только кнопка CTA; учитывайте это при разработке креатива.

Данные в тегах meta

Данные в тегах meta информируют, что реклама соответствует формату AMP-историй, устанавливают перечисляемый тип (enum), содержащий тексты для кнопки CTA, указывают, куда кнопка рекламы перенаправляет пользователя, а также каким типом страницы является документ.

<html amp4ads>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <!-- Specifies where the user is directed -->
    <meta name="amp-cta-url" content="%%CLICK_URL_UNESC%%%%DEST_URL%%">

    <!-- Specifies the call to action button text enum -->
    <meta name="amp-cta-type" content="EXPLORE">

    <!-- Specifies what type of landing page the user is direct to -->
    <meta name="amp-cta-landing-page-type" content="NONAMP">

    <style amp4ads-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
     amp-img {height: 100vh}
    </style>
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

  </head>
  <body>
    <amp-img src=%%FILE:JPG1%% layout="responsive" height="1280" width="720"></amp-img>
  </body>
</html>

При выборе доступных вариантов кнопки CTA рекомендуем использовать тег amp-cta-type. В нужный момент AMP автоматически выполняет локализацию предопределенных вариантов.

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

Перечисляемый тип (enum) с текстами для кнопки призыва к действию

Кнопку призыва к действию можно выбрать из готового списка вариантов:

APPLY_NOW: «Подать заявку»
BOOK_NOW: «Забронировать»
BUY_TICKETS: «Купить билеты»
DOWNLOAD: «Скачать»
EXPLORE: «Интересное»
GET_NOW: «Получить»
INSTALL: «Установить»
LISTEN: «Слушать»
MORE: «Еще»
OPEN_APP: "Открыть приложение"
ORDER_NOW: «Заказать»
PLAY: «Играть»
READ: «Читать»
SHOP: «В магазин»
SHOWTIMES: «Расписание сеансов»
SIGN_UP: «Зарегистрироваться»
SUBSCRIBE: «Подписаться»
USE_APP: «Использовать приложение»
VIEW: «Посмотреть»
WATCH: «Смотреть»
WATCH_EPISODE: «Смотреть выпуск»

ПРИМЕЧАНИЕ. Диплинки, ведущие в приложения, не поддерживаются, однако ссылки на страницы App Store и Google Play поддерживаются по протоколам http и https. Тип enum с текстами для кнопки CTA включается в полезную нагрузку ответа на запрос рекламы.

Если вам требуется помощь c применением самостоятельно созданного перечисления текстовых значений для кнопки CTA, создайте задачу на GitHub.

Целевая страница рекламы

При указании целевой страницы рекламы в AMP-историях вы можете использовать один из трех вариантов.

STORY: целевая страница является рекламной историей.
AMP: целевая страница является корректно сформированной AMP-страницей.
NONAMP: целевая страница является веб-страницей любого другого типа.

Компоновка

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

Размеры оверлея

Отметка «реклама» отображается на фоне темной градиентной панели во всю ширину рекламы с высотой 46px от верхней кромки экрана.

Расположение CTA — 32px снизу, центровка по горизонтали; размер CTA — 120px на 36px.

Изображения и видео

Изображения и видео, включенные в рекламу в AMP-историях, должны быть в полноэкранном формате с соотношением сторон 4:3. В рекламе, содержащей видео, должна использоваться обложка. Рекомендуемые размеры обложки — 720p (720 в ширину x 1280 в высоту) .

<amp-video controls
  width="720"
  height="1280"
  layout="responsive"
  poster="images/kitten-playing.png">

  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Изображения

Фоновые изображения можно масштабировать на весь экран. Приведенный ниже код CSS позволяет обрезать и центрировать видео и изображения.

<style amp-custom>
    amp-img, amp-video {
        height: 100vh;
    }
    amp-video video {
        object-fit: cover;
    }
    amp-img img{
        object-fit: cover;
    }
</style>

Видео

Укажите `<source>` vs `src`

При указании источника для amp-video

Пример: указание файлов с несколькими источниками

<amp-video id="video-page1" autoplay loop
  layout="fill" poster="https://example.com/media/poster.jpg">

  <source src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl" />
  <source src="https://amp-example.com/media/movie.mp4"
    type="video/mp4" />
</amp-video>

Размер и длительность видео

Для оптимальной производительности старайтесь использовать видео размером не более 4 МБ. Чем меньше размер файла, тем быстрее он скачивается, поэтому стремитесь к тому, чтобы медиаобъекты были как можно меньше.

Форматы видео

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

ПРИМЕЧАНИЕ. Видеоформат HLS не поддерживается в десктопной версии Chrome (даже посредством эмуляции), поэтому для получения трафика с компьютеров необходимо указать MP4 в качестве запасного варианта. Для отладки видео HLS потребуется использовать реальное мобильное устройство с применением отладки по USB.

Разрешение видео

Видео в составе Web-историй всегда вертикальные (т. е. в портретной ориентации) с ожидаемым соотношением сторон экрана 16:9. Используйте рекомендуемое разрешение в зависимости от типа потоковой передачи видео:

Тип потокового видео	Разрешение
Неадаптивное	720 x 1280 px
Адаптивное	720 x 1280 px 540 x 960 px 360 x 480 px

ПРИМЕЧАНИЕ. На мобильных устройствах, соотношение сторон экрана которых отличается от 16:9, видео может быть обрезано по горизонтали или по вертикали, чтобы соответствовать размерам viewport.

Кодек видео

Для MP4 используйте H.264.
Для WEBM используйте VP9.
Для HLS или DASH используйте H.264.

Качество видео

Оптимизация транскодирования

Существуют различные утилиты для кодирования видео и регулировки его качества в процессе кодирования. Вот несколько из них:

Утилита	Примечания
FFmpeg	Рекомендуемые оптимизации: Для MP4 используйте `-crf 23`. Для WEBM используйте `-b:v 1M`.
avconv	Рекомендуемые оптимизации: Для MP4 используйте `-crf 23`. Для WEBM используйте `-b:v 1M`.
Shaka Packager	Кодер, который также может выводить формат HLS со списком воспроизведения.

Размер сегмента HLS

Старайтесь, чтобы размер сегментов HLS не превышал 10 секунд.

Анимация

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

Чтобы помочь решить подобные проблемы, AMP добавляет в тело вашего креатива специальный атрибут amp-story-visible, когда креатив становится центральным объектом внимания во всех возможных вариантах отображения. Запуск анимаций рекомендуется инициировать на основании именно этого сигнала.

Пример: данная анимация запустится, когда страница станет центральным объектом внимания, и перезапустится, если пользователь кликнет на другую страницу истории, но вернется.

<style amp-custom>
    body[amp-story-visible] .my-animation-class {
      animation: 2s my-animation-name;
    }
</style>

Рекламная история

Рекламная история существует в виде сетевого URL, на который поступает пользовательский трафик с кнопки призыва к действию, размещенной в рекламе в AMP-истории. Рекламная история — это тоже AMP-история, однако целиком посвященная рекламе.

Подробнее о том, как создать Web-историю, читайте здесь.