Как настроить динамическую вставку объявлений в режиме полного обслуживания

Выберите платформу: HTML5 Android iOS tvOS Cast Roku

В этом руководстве рассказывается, как воспроизвести поток с динамической вставкой объявлений, используя IMA CAF DAI SDK. Если вы хотите посмотреть пример интеграции, скачайте его.

Прежде чем использовать это руководство, ознакомьтесь с протоколом веб-приемника Chromecast Application Framework. Предполагается, что вы знакомы с основными понятиями CAF Receiver, такими как перехватчики сообщений и объекты mediaInformation, а также умеете использовать инструмент Cast Command and Control для эмуляции CAF Sender.

Чтобы использовать IMA DAI, у вас должен быть аккаунт Менеджера рекламы 360. Если у вас есть аккаунт Менеджера рекламы, обратитесь к менеджеру по работе с клиентами. Информацию о том, как зарегистрироваться в Менеджере рекламы, можно найти в Справочном центре.

Информацию об интеграции с другими платформами или об использовании клиентских IMA SDK можно найти в статье Interactive Media Ads SDK.

Общие сведения о динамической вставке объявлений в CAF

Реализация динамической вставки объявлений с помощью IMA CAF DAI SDK включает два основных компонента, как показано в этом руководстве:

  • StreamRequest – объект, определяющий запрос потока к рекламным серверам Google. Запросы потоков бывают двух основных типов:

    • LiveStreamRequest – указывает ключ объекта, а также другие необязательные параметры.
    • VODStreamRequest – указывает идентификатор источника контента, идентификатор видео и другие необязательные параметры.
    • В запросы обоих типов можно добавить ключ API, необходимый для доступа к определенным потокам, и код сети Google Менеджера рекламы, чтобы IMA SDK мог обрабатывать идентификаторы объявлений в соответствии с настройками Менеджера рекламы.

  • StreamManager – объект, который обеспечивает обмен данными между видеопотоком и IMA DAI SDK, например отправляет запросы ping для отслеживания и передает издателю информацию о событиях в потоке.

Требования

  • Аккаунт Cast Developer Console с зарегистрированным тестовым устройством.
  • Размещенное веб-приложение получателя, зарегистрированное в Cast Developer Console. В него можно добавить код, приведенный в этом руководстве.
  • Приложение-отправитель, настроенное для использования вашего веб-приложения-получателя. В этом примере в качестве отправителя используется инструмент Cast Command and Control.

Настройка объектов MediaInfo отправителя

Сначала настройте объект MediaInfo приложения-отправителя, включив в него следующие поля:

contentId Уникальный идентификатор этого мультимедийного объекта.
contentUrl URL резервного потока, который загружается, если StreamRequest динамической вставки объявлений по какой-либо причине не выполняется.
streamType Для прямых трансляций это значение должно быть LIVE, а для видео по запросу – BUFFERED.
customData assetKey Только трансляции. Идентификатор трансляции, которую нужно загрузить.
contentSourceId Только видео по запросу. Идентификатор фида мультимедиа, в котором содержится запрашиваемый поток.
videoId Только видео по запросу. Идентифицирует запрашиваемый поток в указанном фиде медиаконтента.
networkCode Код сети Google Менеджера рекламы (необязательно).
ApiKey Необязательный ключ API, который может потребоваться для получения URL потока из IMA DAI SDK.
senderCanSkip Логическое значение, которое сообщает получателю, может ли отправляющее устройство показывать кнопку пропуска, то есть поддерживает ли оно объявления с возможностью пропуска.

Чтобы настроить эти значения в инструменте управления трансляцией, откройте вкладку Load Media (Загрузка медиаконтента) и задайте для типа запроса на загрузку значение LOAD. Затем замените данные JSON в текстовом поле одним из следующих объектов JSON:

LIVE

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Видео по запросу

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2548831",
      "videoId": "tears-of-steel",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Этот объект запроса на пользовательскую загрузку можно отправить получателю, чтобы протестировать следующие шаги.

Создание базового приемника CAF

Следуя руководству по базовому веб-приемнику CAF SDK, создайте базовый веб-приемник.

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

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

Импортируйте IMA DAI SDK и получите Player Manager

Добавьте тег script, чтобы импортировать IMA DAI SDK для CAF в веб-приемник, сразу после скрипта, загружающего CAF. CAF DAI SDK обновляется автоматически, поэтому указывать версию не нужно. Затем в следующем теге script сохраните контекст приемника и менеджер проигрывателя в виде констант, прежде чем запускать приемник.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();

    castContext.start();
  </script>
</body>
</html>

Инициализируйте IMA Stream Manager

Инициализируйте Stream Manager в CAF DAI SDK.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    castContext.start();
  </script>
</body>
</html>

Создайте перехватчик сообщений о загрузке

CAF DAI SDK использует перехватчик сообщений о загрузке CAF, чтобы отправлять запросы потоков и заменять URL контента на конечный поток с динамической вставкой объявлений. Перехватчик сообщений вызывает метод streamManager.requestStream(), который настраивает рекламные паузы, запрашивает поток и заменяет существующий элемент contentURL.

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

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => null;

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                this.broadcast('Stream request successful.');
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

Создайте запрос трансляции

Чтобы завершить интеграцию CAF DAI, вам нужно создать запрос потока, используя данные, которые были включены в объект mediaInfo от отправителя.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    const getStreamRequest = (request) => {
      const imaRequestData = request.media.customData;
      let streamRequest = null;
      if (imaRequestData.assetKey) {
        // Live stream
        streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
        streamRequest.assetKey = imaRequestData.assetKey;
      } else if (imaRequestData.contentSourceId) {
        // VOD stream
        streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
        streamRequest.contentSourceId = imaRequestData.contentSourceId;
        streamRequest.videoId = imaRequestData.videoId;
      }
      if (streamRequest && imaRequestData.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      if (streamRequest && imaRequestData.ApiKey) {
        streamRequest.ApiKey = imaRequestData.ApiKey;
      }
      if (streamRequest && imaRequestData.senderCanSkip) {
        streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
      }
      return streamRequest;
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, (request) => {
          return streamManager.requestStream(request, getStreamRequest(request))
              .then((request) => {
                return Promise.resolve(request);
              })
              .catch((error) => {
                this.broadcast('Stream request failed.');
                return Promise.resolve(request);
              });
        });

    castContext.start();
  </script>
</body>
</html>

Теперь вы можете запрашивать и воспроизводить потоки с динамической вставкой объявлений, используя CAF DAI SDK от Google. Чтобы узнать больше о расширенных функциях SDK, ознакомьтесь с другими руководствами или скачайте примеры приложений-приемников.