Wybierz interesujące Cię rozwiązanie DAI
Dynamiczne wstawianie reklam z pełną obsługą
Z tego przewodnika dowiesz się, jak odtwarzać strumień z dynamicznym wstawianiem reklam za pomocą pakietu IMA CAF DAI SDK. Jeśli chcesz wyświetlić gotową przykładową integrację lub z niej skorzystać, pobierz przykład.
Zanim skorzystasz z tego przewodnika, zapoznaj się z protokołem odbiornika internetowego w ramach aplikacji Chromecasta. Ten przewodnik zakłada podstawową znajomość koncepcji odbiornika CAF, takich jak przechwytywanie wiadomości i obiekty mediaInformation, a także znajomość narzędzia Cast Command and Control do emulowania nadawcy CAF.
Aby korzystać z IMA DAI, musisz mieć konto Ad Managera 360. Jeśli masz konto Ad Managera, skontaktuj się z menedżerem konta, aby dowiedzieć się więcej. Informacje o rejestracji w Ad Managerze znajdziesz w Centrum pomocy Ad Managera.
Informacje o integracji z innymi platformami lub o korzystaniu z pakietów IMA SDK po stronie klienta znajdziesz w sekcji Pakiety Interactive Media Ads SDK.
Omówienie CAF DAI
Wdrażanie DAI za pomocą pakietu IMA CAF DAI SDK obejmuje 2 główne komponenty, które zostały opisane w tym przewodniku:
StreamRequest: obiekt, który definiuje żądanie strumienia do serwerów reklamowych Google. Żądania strumieniowania występują w 2 głównych odmianach:LiveStreamRequest: określa klucz pliku oraz inne opcjonalne parametry.VODStreamRequest: określa identyfikator źródła treści, identyfikator filmu oraz inne parametry opcjonalne.- Oba typy żądań mogą opcjonalnie zawierać klucz interfejsu API potrzebny do uzyskania dostępu do określonych strumieni oraz kod sieci Google Ad Managera, aby pakiet IMA SDK mógł obsługiwać identyfikatory reklam zgodnie z ustawieniami Google Ad Managera.
StreamManager: Obiekt, który obsługuje komunikację między strumieniem wideo a pakietem IMA DAI SDK, np. wysyła pingi śledzące i przekazuje zdarzenia strumienia do wydawcy.
Wymagania wstępne
- Konto w Konsoli programisty Cast z zarejestrowanym urządzeniem testowym.
- Hostowana aplikacja odbiornika internetowego zarejestrowana w Konsoli programisty Cast, którą można zmodyfikować, aby hostować kod podany w tym przewodniku.
- Aplikacja wysyłająca skonfigurowana do korzystania z aplikacji odbiornika internetowego. W tym przykładzie jako nadawca używane jest narzędzie do sterowania przesyłaniem.
Konfigurowanie obiektów MediaInfo nadawcy
Najpierw skonfiguruj obiekt MediaInfo aplikacji wysyłającej, aby zawierał te pola:
contentId
|
Unikalny identyfikator tego elementu multimedialnego. | |
contentUrl
|
Adres URL transmisji zastępczej, która ma się wczytać, jeśli żądanie DAI StreamRequest nie powiedzie się z jakiegokolwiek powodu. | |
streamType
|
W przypadku transmisji na żywo ta wartość powinna być ustawiona na „LIVE”. W przypadku strumieni VOD ta wartość powinna być ustawiona na „BUFFERED”. | |
customData
|
assetKey
|
Tylko transmisje na żywo. Określa transmisję na żywo, która ma zostać załadowana. |
contentSourceId
|
Tylko strumienie VOD. Określa plik danych o mediach, który zawiera żądany strumień. | |
videoId
|
Tylko strumienie VOD. Określa żądany strumień w podanym kanale multimedialnym. | |
networkCode
|
(Opcjonalnie) Twój kod sieci Google Ad Managera. | |
ApiKey
|
Opcjonalny klucz API, który może być wymagany do pobrania adresu URL strumienia z pakietu IMA DAI SDK. | |
senderCanSkip
|
Wartość logiczna informująca odbiorcę, czy urządzenie wysyłające może wyświetlać przycisk pomijania, co umożliwia obsługę reklam możliwych do pominięcia. | |
Aby skonfigurować te wartości w narzędziu do sterowania poleceniami przesyłania, kliknij kartę Load
Media i ustaw niestandardowy typ żądania wczytania na LOAD. Następnie zastąp dane JSON w obszarze tekstowym jednym z tych obiektów JSON:
NA ŻYWO
{
"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"
}
VOD
{
"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"
}
Ten niestandardowy obiekt żądania wczytywania można wysłać do odbiorcy, aby przetestować następujące kroki.
Tworzenie podstawowego odbiornika CAF
Zgodnie z przewodnikiem po podstawowym odbiorniku pakietu SDK CAF utwórz podstawowy odbiornik internetowy.
Kod odbiorcy powinien wyglądać tak:
<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>
Zaimportuj pakiet IMA DAI SDK i pobierz menedżera odtwarzacza
Dodaj tag skryptu, aby zaimportować do odbiornika internetowego pakiet IMA DAI SDK dla CAF, tuż po załadowaniu skryptu CAF. Pakiet CAF DAI SDK jest zawsze aktualny, więc nie musisz ustawiać konkretnej wersji. Następnie w tagu skryptu, który następuje po tym tagu, zapisz kontekst odbiornika i menedżera odtwarzacza jako stałe przed uruchomieniem odbiornika.
<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>
Inicjowanie Menedżera strumieni IMA
Zainicjuj StreamManager pakietu 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>
Utwórz przechwytywacz wiadomości o wczytaniu
Pakiet CAF DAI SDK używa interfejsu przechwytującego komunikat CAF load do wysyłania żądań strumienia i zastępowania adresu URL treści końcowym strumieniem DAI.
Przechwytywacz wiadomości wywołuje funkcję streamManager.requestStream(), która obsługuje ustawianie przerw na reklamy, wysyłanie żądania strumienia i zastępowanie istniejącego elementu contentURL.
Może być tylko jeden przechwytujący komunikat o wczytaniu, więc jeśli Twoja aplikacja wymaga jego użycia, musisz włączyć wszystkie funkcje niestandardowe do tego samego wywołania zwrotnego.
<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>
Tworzenie żądania strumienia
Aby dokończyć integrację CAF DAI, musisz utworzyć żądanie strumienia, korzystając z danych zawartych w obiekcie mediaInfo od nadawcy.
<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>
Możesz teraz wysyłać żądania strumieni DAI i je odtwarzać za pomocą pakietu CAF DAI SDK od Google. Więcej informacji o bardziej zaawansowanych funkcjach pakietu SDK znajdziesz w innych przewodnikach lub pobierając przykładowe aplikacje odbiornika.