Gewünschte Lösung für die dynamische Anzeigenbereitstellung auswählen
Dynamische Anzeigenbereitstellung mit Komplettservice
In dieser Anleitung wird gezeigt, wie Sie mit dem IMA CAF DAI SDK einen Stream für die dynamische Anzeigenbereitstellung wiedergeben. Wenn Sie sich eine fertige Beispielintegration ansehen oder an der Sie teilnehmen möchten. Beispiel herunterladen
Machen Sie sich mit Chromecast vertraut,
Web Receiver-Protokoll des Application Frameworks. Dieses
wird vorausgesetzt, dass Sie mit CAF-Empfängerkonzepten vertraut sind, z. B.
Nachricht
Interceptoren
und
mediaInformation
sowie der Verwendung des Cast-Befehls und der Steuerung
um einen CAF-Sender zu emulieren.
Damit Sie die dynamische Anzeigenbereitstellung von IMA verwenden können, benötigen Sie ein Ad Manager-Konto 360-Konto zu verknüpfen. Wenn Sie eine Anzeige Verwaltungskonto, wenden Sie sich an Ihren Account Manager, um weitere Informationen zu erhalten. Weitere Informationen zur Registrierung bei Ad Manager erhalten Sie in der Ad Manager-Hilfe .
Informationen zur Integration mit anderen Plattformen oder zur Verwendung des IMA clientseitige SDKs siehe Interactive Media Ads SDKs.
CAF-DAI – Übersicht
Die Implementierung der dynamischen Anzeigenbereitstellung mit dem IMA CAF DAI SDK umfasst zwei Hauptkomponenten: die in diesem Leitfaden erläutert werden:
StreamRequest
: Ein Objekt, das eine Streamanfrage an die Werbeserver von Google definiert. Es gibt zwei Hauptkategorien für Streamanfragen:LiveStreamRequest
: gibt einen Asset-Schlüssel und einen optionalen API-Schlüssel sowie andere optionale Parameter.VODStreamRequest
: Gibt eine ID der Contentquelle, eine Video-ID und eine optionale API an key sowie weitere optionale Parameter enthalten.
StreamManager
: Ein Objekt, das die Kommunikation zwischen dem Videostream und der dynamischen Anzeigenbereitstellung mit IMA SDK steuert SDK, um beispielsweise Tracking-Pings auszulösen und Streamereignisse an den Publisher.
Vorbereitung
- Ein Konto für die Cast Developer Console mit einer registriertes Testgerät.
- Gehosteter Webempfänger App, die die in Ihrer Cast Developer Console registriert sind und geändert werden können, Code aus diesem Leitfaden.
- Eine sendende App, die für die Verwendung Ihrer Webempfänger-App konfiguriert ist. Dieses Beispiel verwendet das Cast-Befehl und -Steuerung als Absender.
MediaInfo-Objekte des Absenders konfigurieren
Konfigurieren Sie zunächst die MediaInfo Objekt enthalten ist folgenden Feldern hinzu:
contentId
|
Eine eindeutige Kennung für dieses Medienelement | |
contentUrl
|
Die Fallback-Stream-URL, die geladen werden soll, wenn die Streamanfrage für die dynamische Anzeigenbereitstellung für einen der Grund | |
streamType
|
Bei Livestreams sollte dieser Wert auf „LIVE“ gesetzt sein. Bei VOD-Streams: Dieser Wert sollte auf „BUFFERED“ festgelegt werden | |
customData
|
assetKey
|
Nur Livestreams Identifiziert den zu ladenden Livestream |
contentSourceId
|
Nur VOD-Streams Bestimmt den Medien-Feed, der die der angeforderte Stream. | |
videoId
|
Nur VOD-Streams Identifiziert den angeforderten Stream im Medien-Feed angegeben ist. | |
ApiKey
|
Ein optionaler API-Schlüssel, der zum Abrufen der Stream-URL erforderlich sein kann IMA DAI SDK verwenden, | |
senderCanSkip
|
Boolescher Wert, der dem Empfänger mitteilt, ob das sendende Gerät die Möglichkeit, eine Schaltfläche zum Überspringen anzuzeigen, sodass überspringbare Anzeigen unterstützt werden. |
Klicken Sie zum Konfigurieren dieser Werte im Cast-Befehls- und Steuerungstool auf die Schaltfläche Laden
Medien und legen Sie als benutzerdefinierten Anfragetyp LOAD
fest. Ersetzen Sie dann
JSON-Daten im Textbereich mit einem der folgenden JSON-Objekte:
LIVE
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"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",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
Dieses benutzerdefinierte Ladeanfrageobjekt kann an den Empfänger gesendet werden, um die folgenden Schritten.
Einfachen CAF-Empfänger erstellen
Erstellen Sie gemäß dem CAF SDK Basic Receiver Guide einen einfachen Web Receiver.
Der Code des Empfängers sollte wie folgt aussehen:
<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 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. nachdem das CAF-Skript vom Script geladen wurde. Das CAF DAI SDK ist zeitlos. um eine bestimmte Version festzulegen. Speichern Sie dann im folgenden Skript-Tag Empfängerkontext und Spielermanager als Konstanten festlegen, bevor der Empfänger gestartet wird.
<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 initialisieren
Initialisieren Sie den Stream des CAF DAI SDK Administrator.
<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>
Abfangende von Ladenachrichten erstellen
Das CAF DAI SDK verwendet die CAF-Meldung
Interceptor
um Streamanfragen zu stellen und die Content-URL durch den finalen Stream für die dynamische Anzeigenbereitstellung zu ersetzen.
Das Abfangende von Nachrichten ruft streamManager.requestStream() auf, mit dem Daten verarbeitet werden.
das Festlegen von Werbeunterbrechungen, Anfordern des Streams und Ersetzen der
contentURL
Es kann nur ein Abfangende von Ladenachrichten geben. Wenn Ihre App die Verwendung des Abfangendes müssen alle benutzerdefinierten Funktionen in das Callback des Nutzers an.
<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>
Streamanfrage erstellen
Um die Integration der dynamischen Anzeigenbereitstellung von CAF abzuschließen, müssen Sie einen Stream erstellen.
Anfrage
Dabei werden die Daten aus dem mediaInfo
-Objekt des Absenders verwendet.
<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.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>
Sie können jetzt Streams für die dynamische Anzeigenbereitstellung mit dem CAF DAI SDK von Google anfordern und wiedergeben. Weitere Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden oder Beispielempfänger herunterladen Apps.