Wählen Sie die gewünschte Lösung für die dynamische Anzeigenbereitstellung aus.
Dynamische Anzeigenbereitstellung für die Pod-Auslieferung
IMA SDKs vereinfachen die Integration von Multimedia-Anzeigen in Ihre Websites und Apps.
Mit IMA SDKs können Anzeigen von jedem VAST-kompatiblen Ad-Server angefordert und die Anzeigenwiedergabe in Ihren Apps verwaltet werden.
Mit IMA DAI SDKs stellen Apps eine Streamanfrage für Anzeigen- und Contentvideos für VOD- oder Livecontent. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie in Ihrer App nicht zwischen Anzeige- und Contentvideo wechseln müssen.
In dieser Anleitung wird gezeigt, wie Sie mit dem IMADAI SDK for CAF einen Pod-Auslieferungsstream der Live-Anzeigenbereitstellung wiedergeben.
Machen Sie sich mit dem Web Receiver-Protokoll des Chromecast Application Framework vertraut, bevor Sie diese Anleitung verwenden. In diesem Leitfaden wird vorausgesetzt, dass Sie grundlegende Konzepte von CAF-Empfängern (z. B. Nachrichtenabfangen und mediaInformation-Objekte) verstehen und mit dem Cast-Befehls- und Steuertool vertraut sind, um einen CAF-Absender zu emulieren.
Wenn Sie die Pod-Auslieferung mit der IMA dynamischen Anzeigenbereitstellung verwenden möchten, müssen Sie mit einem Pod-Auslieferungspartner zusammenarbeiten und ein erweitertes Ad Manager 360-Konto haben. Wenn Sie ein Ad Manager-Konto haben, wenden Sie sich an Ihren Account Manager, um weitere Informationen zu erhalten. Informationen zur Registrierung für Ad Manager finden Sie in der Ad Manager-Hilfe.
Informationen zur Integration in andere Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.
Pod-Auslieferung mit IMA3-Anzeigen – Übersicht
Das Implementieren der Pod-Auslieferung mit dem IMA CAF DAI SDK umfasst zwei Hauptkomponenten, die in dieser Anleitung beschrieben werden:
StreamRequest: Ein Objekt, das eine Streamanfrage an die Werbeserver von Google definiert. In den Anfragen sind ein Netzwerkcode, ein benutzerdefinierter Asset-Schlüssel, ein optionaler API-Schlüssel und weitere optionale Parameter angegeben.StreamManager: Ein Objekt, das die Kommunikation zwischen dem Videostream und dem IMA DAI SDK verwaltet, z. B. das Auslösen von Tracking-Pings und das Weiterleiten von Streamereignissen an den Publisher.
Voraussetzungen
- Ein Cast Developer Console-Konto mit registrierten Testgeräten
- Eine gehostete Webempfänger-App, die in Ihrer Cast Developer Console registriert ist und so geändert werden kann, dass der in dieser Anleitung bereitgestellte Code gehostet wird.
- Eine Sende-App, die für die Verwendung Ihrer Webempfänger-App konfiguriert ist. In diesem Beispiel verwenden Sie das Cast-Befehls- und Kontrolltool als Absender.
MediaInfo-Objekte des Absenders konfigurieren
Konfigurieren Sie zuerst das MediaInfo-Objekt Ihrer Senderanwendung so, dass es die folgenden Felder enthält:
| Field | Inhalt | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
Eine eindeutige Kennung für dieses Medienelement.
CONTENT_ID |
||||||||||
contentUrl
|
Optional. URL des Back-up-Streams, der wiedergegeben wird, wenn der Stream für die dynamische Anzeigenbereitstellung nicht geladen werden kann.
BACKUP_STREAM_URL |
||||||||||
contentType
|
Optional. MIME-Typ der Content-Backup-Streams. Nur für DASH-Streams erforderlich.
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
Das für diesen Wert verwendete Stringliteral oder die Konstante variiert je nach Absenderplattform. | ||||||||||
customData
|
Das Feld customData enthält einen Speicher für Schlüssel/Wert-Paare, der zusätzliche Pflichtfelder enthält.
|
Hier sind einige Codebeispiele, die Ihnen den Einstieg erleichtern:
Web
Erstellen Sie zum Konfigurieren dieser Werte in einem Cast-Websender zuerst ein MediaInfo-Objekt mit den erforderlichen Daten und senden Sie dann eine Ladeanfrage an den Webempfänger.
// 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 = {
manifestUrl: "MANIFEST_URL",
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
Zum Konfigurieren dieser Werte in einem Cast-Websender erstellen Sie zuerst ein MediaInfo-Objekt mit den erforderlichen Daten und senden dann eine Ladeanfrage an den Webempfänger.
JSONObject customData = new JSONObject()?
.put("manifestUrl", "MANIFEST_URL")
.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)
Erstellen Sie zum Konfigurieren dieser Werte in einem Cast-Websender zuerst ein GCKMediaInformation-Objekt mit den erforderlichen Daten und senden Sie dann eine Ladeanfrage an den Webempfänger.
NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
@"manifestUrl": @"MANIFEST_URL",
@"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)
Erstellen Sie zum Konfigurieren dieser Werte in einem Cast-Websender zuerst ein GCKMediaInformation-Objekt mit den erforderlichen Daten und senden Sie dann eine Ladeanfrage an den Webempfänger.
let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
print("invalid mediaURL")
return
}
let customData = [
"liveConfigID": "MANIFEST_URL",
"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
}
CAC-Tool
Klicken Sie zum Konfigurieren dieser Werte im Tool „Cast-Befehl und Steuerung“ auf den Tab „Medien laden“ und setzen Sie den benutzerdefinierten Anfragetyp zum Laden auf „LOAD“. Ersetzen Sie dann die JSON-Daten im Textbereich durch diese JSON:
{
"media": {
"contentId": "CONTENT_ID",
"contentUrl": "BACKUP_STREAM_URL",
"contentType": ""CONTENT_STREAM_MIMETYPE"",
"streamType": "LIVE",
"customData": {
"liveConfigID": "MANIFEST_URL",
"networkCode": "NETWORK-CODE",
"customAssetKey": "CUSTOM_ASSET_KEY",
"oAuthToken": "API_KEY"
}
}
}
Diese benutzerdefinierte Ladeanfrage kann an den Empfänger gesendet werden, um die restlichen Schritte zu testen.
Einfachen CAF-Empfänger erstellen
Erstellen Sie einen benutzerdefinierten Webempfänger, wie im CAF SDK – Handbuch für benutzerdefinierte Webempfänger beschrieben.
Der Code des Empfängers sollte wie folgt aussehen:
<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>
IMA DAI SDK importieren und Player-Manager abrufen
Fügen Sie ein Skript-Tag hinzu, um das IMA DAI SDK für CAF in Ihren Webempfänger zu importieren, sobald das Skript CAF geladen hat. Speichern Sie den Empfängerkontext und den Spielermanager im Skript-Tag als Konstanten, bevor Sie den Empfänger starten.
<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>
IMA Stream Manager initialisieren
Initialisieren Sie den IMA Stream Manager.
<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>
Load Interceptor im Stream Manager erstellen
Bevor die Medienelemente an CAF übergeben werden, erstellen Sie die Streamanfrage in einem LOAD-Nachrichtenabfangprogramm.
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();
Streamanfrage erstellen
Führen Sie die Funktion createStreamRequest aus, um einen Pod-Bereitstellungsstream basierend auf der CAF-Ladeanfrage zu erstellen.
/**
* 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 streamRequest = new google.ima.cast.dai.api.PodStreamRequest();
const customData = castRequest.media.customData;
streamRequest.customAssetKey = customData.customAssetKey;
streamRequest.networkCode = customData.networkCode;
streamRequest.apiKey = customData.apiKey;
return streamRequest;
};
Ersetzen Sie die Inhalts-URL durch die Manifest-URL und die Stream-ID.
Wenn die Streamanfrage erfolgreich ist, verwenden Sie streamManager.getStreamId(), um die ID des Streams abzurufen, und fügen Sie sie in Ihre Manifest-URL ein. Ersetzen Sie dabei [[STREAMID]]. Ersetzen Sie dann das vorhandene contentUrl durch das neue manifestUrl, damit CAF den Livestream mit den gestitchten Anzeigen-Pods abspielt.
/**
* 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.');
const media = castRequestWithPodStreamData.media;
const manifestUrl = media.customData.manifestUrl || "";
if (manifestUrl) {
console.log('Replacing the contentURL with the manifest URL and stream ID');
const streamId = streamManager.getStreamId();
castRequestWithPodStreamData.media.contentUrl = manifestUrl.replace('[[STREAMID]]', streamId);
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;
});
};
Sie können jetzt Pod-Auslieferungsstreams mit dem Cast Application Framework und dem IMA DAI SDK für CAF anfordern und wiedergeben.