Aby omawiać nasze usługi i przekazywać opinie na ich temat, dołącz do oficjalnego kanału Discord usługi Ad Manager na serwerze społeczności Google Ads i pomiarów.

Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Konfigurowanie z wyświetlaniem bloków reklamowych w ramach dynamicznego wstawiania reklam

Wybierz platformę: HTML5 Android iOS tvOS Cast Roku

Pakiety IMA SDK upraszczają integrację reklam multimedialnych z witrynami i aplikacjami.

Pakiety IMA SDK mogą żądać reklam z dowolnego serwera reklam zgodnego ze specyfikacją VAST i zarządzać odtwarzaniem reklam w aplikacjach.

Dzięki pakietom IMA DAI SDK aplikacje wysyłają żądanie strumienia dotyczące reklam i treści wideo na żądanie lub na żywo. Pakiet SDK zwraca następnie połączony strumień wideo, dzięki czemu nie musisz zarządzać przełączaniem się między reklamą a treścią wideo w aplikacji.

Z tego przewodnika dowiesz się, jak odtwarzać strumień wyświetlania bloków reklamowych z DAI za pomocą pakietu IMA DAI SDK na potrzeby CAF.

Zanim skorzystasz z tego przewodnika, zapoznaj się z protokołem Web Receiver w Chromecast Application Framework. W tym przewodniku zakładamy, że znasz podstawowe pojęcia związane z odbiornikiem CAF, takie jak przechwytywacze wiadomości i obiekty mediaInformation, oraz że potrafisz używać narzędzia Cast Command and Control do emulowania nadawcy CAF.

Aby korzystać z wyświetlania bloków reklamowych w ramach IMA DAI, musisz współpracować z partnerem, który oferuje tę funkcję, i mieć konto Ad Managera 360 Advanced. Jeśli masz konto Ad Managera, skontaktuj się z menedżerem konta, aby dowiedzieć się więcej. Informacje o rejestracji w usłudze Ad Manager znajdziesz w Centrum pomocy Ad Managera.

Informacje o integracji z innymi platformami lub o korzystaniu z pakietów SDK IMA po stronie klienta znajdziesz w artykule Pakiety SDK Interactive Media Ads.

Omówienie wyświetlania bloków reklamowych w ramach dynamicznego wstawiania reklam w pakiecie IMA DAI

Wdrażanie wyświetlania bloków reklamowych za pomocą pakietu IMA CAF DAI SDK obejmuje 2 główne komponenty, które opisujemy w tym przewodniku:

StreamRequest: obiekt, który definiuje żądanie strumienia do serwerów reklamowych Google. Żądania określają kod sieci, niestandardowy klucz zasobu i opcjonalny klucz interfejsu API, a także inne opcjonalne parametry.
StreamManager: obiekt, który obsługuje komunikację między strumieniem wideo a pakietem IMA DAI SDK, np. uruchamia pingi śledzące i przekazuje zdarzenia strumienia do wydawcy.

Wymagania wstępne

Konto w Konsoli programisty Cast z zarejestrowanymi urządzeniami testowymi.
Hostowana aplikacja odbiornika internetowego zarejestrowana w Konsoli programisty Cast, którą można zmodyfikować, aby hostowała kod podany w tym przewodniku.
Aplikacja wysyłająca skonfigurowana do korzystania z aplikacji odbiornika internetowego. Na potrzeby tego przykładu jako nadawcy użyj narzędzia Cast Command and Control.

Konfigurowanie obiektów MediaInfo nadawcy

Najpierw skonfiguruj obiekt MediaInfo aplikacji nadawczej, aby zawierał te pola:

Pole Spis treści

contentId

Unikalny identyfikator tego elementu multimedialnego.

CONTENT_ID

contentUrl

Opcjonalnie: Adres URL zapasowej transmisji, która ma zostać odtworzona, jeśli nie uda się wczytać transmisji DAI.

BACKUP_STREAM_URL

contentType

Opcjonalnie: Typ MIME strumieni kopii zapasowej treści. Wymagane tylko w przypadku transmisji DASH.

CONTENT_STREAM_MIMETYPE

streamType Literał ciągu znaków lub stała używana dla tej wartości różni się w zależności od platformy nadawcy.

customData

Pole customData zawiera magazyn klucz-wartość dodatkowych wymaganych pól. W tym przykładzie zawiera on parametry strumienia DAI. W aplikacji produkcyjnej możesz zamiast tego przekazać identyfikator, którego aplikacja odbiornika Cast będzie używać do pobierania tych parametrów za pomocą żądania po stronie serwera.

Pole	Spis treści
`daiStreamType`	Typ strumienia DAI. Jedna z wartości: `"LIVE"` lub `"VOD"`. `DAI_STREAM_TYPE`
`networkCode`	Kod sieci konta Google Ad Managera 360. `NETWORK_CODE`
`customAssetKey`	To pole jest wymagane tylko w przypadku transmisji na żywo. Niestandardowy klucz zasobu, który identyfikuje wydarzenie z wyświetlaniem bloku reklamowego w usłudze Google Ad Manager 360. `CUSTOM_ASSET_KEY`
`apiKey`	Opcjonalny klucz interfejsu API do pobierania identyfikatora strumienia z pakietu IMA DAI SDK. `API_KEY`

Oto kilka przykładowych kodów, które pomogą Ci zacząć:

Sieć

Aby skonfigurować te wartości w nadajniku internetowym Cast, najpierw utwórz obiekt MediaInfo z wymaganymi danymi, a następnie wyślij żądanie wczytania do odbiornika internetowego.

// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "CONTENT_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.LIVE;
mediaInfo.customData = {
  daiStreamType: "DAI_STREAM_TYPE",
  networkCode: "NETWORK-CODE",
  customAssetKey: "CUSTOM_ASSET_KEY",
  apiKey: "API_KEY"
};

// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  () => { console.log('Load succeed'); },
  (errorCode) => { console.log('Error code: ' + errorCode); });

Android

Aby skonfigurować te wartości w nadajniku internetowym Cast, najpierw utwórz obiekt MediaInfo z wymaganymi danymi, a następnie wyślij żądanie wczytania do odbiornika internetowego.

JSONObject customData = new JSONObject()?
  .put("daiStreamType", "DAI_STREAM_TYPE")
  .put("networkCode", "NETWORK-CODE")
  .put("customAssetKey", "CUSTOM_ASSET_KEY")
  .put("apiKey", "API_KEY");
MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("CONTENT_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_LIVE)
  .setCustomData(customData)
  .build();

RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());

iOS (Obj-C)

Aby skonfigurować te wartości w nadajniku internetowym Cast, najpierw utwórz obiekt GCKMediaInformation z wymaganymi danymi, a następnie wyślij żądanie wczytania do odbiornika internetowego.

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"daiStreamType": @"DAI_STREAM_TYPE",
  @"networkCode": @"NETWORK-CODE",
  @"customAssetKey": @"CUSTOM_ASSET_KEY",
  @"apiKey": @"API_KEY"};
mediaInfoBuilder.customData = customData;

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeLive;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];

GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
  request.delegate = self;
}

iOS (Swift)

Aby skonfigurować te wartości w nadajniku internetowym Cast, najpierw utwórz obiekt GCKMediaInformation z wymaganymi danymi, a następnie wyślij żądanie wczytania do odbiornika internetowego.

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "daiStreamType": "DAI_STREAM_TYPE",
  "networkCode": "NETWORK-CODE",
  "customAssetKey": "CUSTOM_ASSET_KEY",
  "region": "API_KEY"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = @"CONTENT_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()

guard let mediaInfo = mediaInformation else {
  print("invalid mediaInformation")
  return
}

if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia
(mediaInfo) {
  request.delegate = self
}

Narzędzie CAC

Aby skonfigurować te wartości w narzędziu Cast Command and Control, kliknij kartę Load Media (Wczytaj multimedia) i ustaw typ niestandardowego żądania wczytywania na LOAD (WCZYTAJ). Następnie zastąp dane JSON w obszarze tekstowym tym kodem JSON:

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": ""CONTENT_STREAM_MIMETYPE"",
    "streamType": "LIVE",
    "customData": {
      "daiStreamType": "DAI_STREAM_TYPE",
      "networkCode": "NETWORK-CODE",
      "customAssetKey": "CUSTOM_ASSET_KEY",
      "oAuthToken": "API_KEY"
    }
  }
}

To niestandardowe żądanie wczytania można wysłać do odbiornika, aby przetestować pozostałe kroki.

Tworzenie podstawowego odbiornika CAF

Utwórz niestandardowy odbiornik internetowy zgodnie z instrukcjami podanymi w przewodniku po niestandardowych odbiornikach internetowych w pakiecie CAF SDK.

Kod odbiornika powinien wyglądać tak:

<html>
<head>
  <script
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    // ...
  </script>
</body>
</html>

Importowanie pakietu IMA DAI SDK i pobieranie menedżera odtwarzacza

Dodaj tag skryptu, aby zaimportować pakiet IMA DAI SDK dla CAF do odbiornika internetowego, zaraz po skrypcie wczytującym CAF. W tagu skryptu zapisz kontekst odbiornika i menedżera odtwarzacza jako stałe przed uruchomieniem odbiornika.

<html>
<head>
  <script
      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>

Inicjowanie menedżera strumieni IMA

Zainicjuj menedżera strumieni IMA.

<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>

Tworzenie przechwytywacza obciążenia menedżera strumieni

Zanim elementy multimedialne zostaną przekazane do CAF, utwórz żądanie strumienia w przechwytywaczu wiadomości LOAD.

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a livestream request object for a Pod Serving stream.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => { /* ... */};

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithPodStreamData) => {
            console.log('Successfully made DAI stream request.');
            // ...
            return castRequestWithPodStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, createDAICastRequest);

    castContext.start();

Tworzenie żądania strumienia

Uzupełnij funkcję createStreamRequest, aby utworzyć strumień wyświetlania bloków reklamowych na podstawie żądania wczytania CAF.

    /**
     * Creates a livestream request object for a Pod Serving stream.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => {
      const customData = castRequest.media.customData;
      let streamRequest;
      if (customData.daiStreamType == "LIVE") {
        streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
        streamRequest.customAssetKey = customData.customAssetKey;
        streamRequest.networkCode = customData.networkCode;
        streamRequest.apiKey = customData.apiKey;
      } else if (customData.daiStreamType == "VOD") {
        streamRequest = new google.ima.cast.dai.api.PodVodStreamRequest();
        streamRequest.networkCode = customData.networkCode;
        streamRequest.apiKey = customData.apiKey;
      }
      return streamRequest;
    };

Pobieranie połączonego pliku manifestu z VTP

Jeśli żądanie strumienia zostanie rozpatrzone pozytywnie, użyj streamManager.getStreamId(), aby pobrać identyfikator strumienia. Twój partner techniczny ds. wideo lub niestandardowy manipulator pliku manifestu przekaże instrukcje dotyczące pobierania adresu URL pliku manifestu za pomocą tego identyfikatora strumienia.

Gdy uzyskasz adres URL pliku manifestu, zastąp dotychczasowy adres contentUrl nowym adresem manifestUrl.

Na koniec, przed zwróceniem zmodyfikowanego pliku manifestu strumienia, wywołaj metodę loadStreamMetadata na obiekcie streamManager, aby poinformować pakiet IMA SDK, że może bezpiecznie żądać metadanych strumienia. To wywołanie jest konieczne tylko w przypadku strumieni VOD.

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithPodStreamData) => {
            console.log('Successfully made DAI stream request.');

            // This is a sample VTP integration. Consult your VTP documentation
            // for how to retrieve an ad-stitched stream manifest URL.
            const manifestTemplate = "https://.../manifest.m3u8?gam_stream_id=[[STREAMID]]";
            const streamId = streamManager.getStreamId();
            const manifestUrl = manifestTemplate.replace('[[STREAMID]]', streamId)
            // Assign your manifestUrl to the request's content URL.
            castRequestWithPodStreamData.media.contentUrl = manifestUrl;

            // After generating the manifest URL, VOD streams must notify the
            // IMA SDK that it is safe to request ad pod metadata.
            // This is only necessary for VOD streams. It is a no-op for
            // livestreams, so no conditional is needed.
            streamManager.loadStreamMetadata();

            return castRequestWithPodStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

Czyszczenie zasobów IMA DAI

Po pomyślnym zakończeniu żądania i wyświetlania reklam displayowych w strumieniu z obsługą wyświetlania bloków reklamowych za pomocą pakietu IMA DAI SDK zalecamy wyczyszczenie wszystkich zasobów po zakończeniu sesji wyświetlania bloków reklamowych. Wywołaj StreamManager.destroy(), aby zatrzymać odtwarzanie strumienia, zatrzymać śledzenie reklam i zwolnić wszystkie wczytane zasoby strumienia.