Sélectionnez la solution d'insertion dynamique d'annonce qui vous intéresse
Insertion dynamique de séries d'annonces
Les SDK IMA simplifient l'intégration d'annonces multimédias dans vos sites Web et applications.
Les SDK IMA peuvent demander des annonces à partir de n'importe quel ad server compatible avec la norme VAST et gérer la lecture des annonces dans vos applications.
Avec les SDK IMA DAI, les applications envoient une demande de flux pour des annonces et des contenus vidéo en VOD ou en direct. Le SDK renvoie ensuite un flux vidéo combiné afin que vous n'ayez pas à gérer le basculement entre l'annonce et la vidéo de contenu dans votre application.
Ce guide explique comment lire un flux de diffusion de séries d'annonces en direct pour l'insertion dynamique d'annonces à l'aide du SDK IMA DAI pour CAF.
Avant d'utiliser ce guide, familiarisez-vous avec le protocole Web Receiver du framework d'application Chromecast. Ce guide suppose une compréhension de base des concepts de base des récepteurs CAF, tels que les intercepteurs de messages et des objets mediaInformation, et une bonne connaissance de l'outil de commande et de contrôle Cast pour émuler un expéditeur CAF.
Pour utiliser la diffusion de séries d'annonces avec l'insertion dynamique de séries d'annonces IMA, vous devez travailler avec un partenaire de diffusion de séries d'annonces et disposer d'un compte Ad Manager 360 Advanced. Si vous disposez d'un compte Ad Manager, contactez votre responsable de compte pour en savoir plus. Pour en savoir plus sur l'inscription à Ad Manager, consultez le Centre d'aide Ad Manager.
Pour en savoir plus sur l'intégration à d'autres plates-formes ou sur l'utilisation des SDK IMA côté client, consultez la page SDK Interactive Media Ads.
Présentation de l'insertion dynamique de séries d'annonces d'IMA
L'implémentation de la diffusion de séries d'annonces à l'aide du SDK IMA CAF pour l'insertion dynamique d'annonces implique deux composants principaux, qui sont illustrés dans ce guide:
StreamRequest: objet qui définit une requête de flux adressée aux serveurs publicitaires de Google. Les requêtes spécifient un code de réseau, une clé d'élément personnalisée et une clé API facultative, ainsi que d'autres paramètres facultatifs.StreamManager: objet qui gère la communication entre le flux vidéo et le SDK IMA pour l'insertion dynamique d'annonces, par exemple pour déclencher des pings de suivi et transmettre les événements de flux à l'éditeur.
Conditions préalables
- Un compte Console développeur de Cast avec des appareils de test enregistrés
- Une application réceptrice Web hébergée, enregistrée auprès de votre Developer Console Cast et pouvant être modifiée pour héberger le code fourni par ce guide.
- Une application émettrice configurée pour utiliser votre application réceptrice Web. Pour les besoins de cet exemple, utilisez l'outil de commande et de contrôle Cast comme expéditeur.
Configurer les objets MediaInfo de l'expéditeur
Commencez par configurer l'objet MediaInfo de votre application émettrice pour inclure les champs suivants:
| Champ | Sommaire | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
contentId
|
Identifiant unique de cet élément multimédia.
CONTENT_ID |
||||||||||
contentUrl
|
Facultatif. URL du flux de substitution à lire en cas d'échec du chargement du flux pour l'insertion dynamique d'annonce.
BACKUP_STREAM_URL |
||||||||||
contentType
|
Facultatif. Type MIME des flux de sauvegarde de contenu. Nécessaire uniquement pour les flux DASH.
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
Le littéral de chaîne ou la constante utilisé pour cette valeur varie selon la plate-forme de l'émetteur. | ||||||||||
customData
|
Le champ customData contient un magasin clé-valeur de champs obligatoires supplémentaires.
|
Voici quelques exemples de code pour vous aider à démarrer:
Web
Pour configurer ces valeurs dans un émetteur Web Cast, créez d'abord un objet MediaInfo avec les données requises, puis envoyez une requête de chargement au récepteur Web.
// 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
Pour configurer ces valeurs dans un émetteur Web Cast, créez d'abord un objet MediaInfo avec les données requises, puis envoyez une requête de chargement au récepteur Web.
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)
Pour configurer ces valeurs dans un émetteur Web Cast, créez d'abord un objet GCKMediaInformation avec les données requises, puis envoyez une requête de chargement au récepteur Web.
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)
Pour configurer ces valeurs dans un émetteur Web Cast, créez d'abord un objet GCKMediaInformation avec les données requises, puis envoyez une requête de chargement au récepteur Web.
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
}
Outil CAC
Pour configurer ces valeurs dans l'outil de commande et de contrôle Cast, cliquez sur l'onglet "Load Media" (Charger le contenu multimédia), puis définissez le type de requête de chargement personnalisé sur LOAD. Remplacez ensuite les données JSON dans la zone de texte par ce code 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"
}
}
}
Cette requête de chargement personnalisé peut être envoyée au récepteur pour tester le reste des étapes.
Créer un récepteur CAF de base
Créez un récepteur Web personnalisé, comme indiqué dans le Guide du récepteur Web personnalisé du SDK CAF.
Le code du récepteur devrait se présenter comme suit:
<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>
Importer le SDK IMA DAI et télécharger le Gestionnaire de lecteurs
Ajoutez un tag de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement du script CAF. Dans le tag de script, stockez le contexte du récepteur et le gestionnaire de lecteurs en tant que constantes avant de démarrer le récepteur.
<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>
Initialiser le gestionnaire de flux IMA
Initialisez le gestionnaire de flux 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>
Créer l'intercepteur de charge du gestionnaire de flux
Avant que vos éléments multimédias ne soient transmis au CAF, créez votre requête de flux dans un intercepteur de messages 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();
Créer la demande de flux
Exécutez la fonction createStreamRequest pour créer un flux de diffusion de pods basé sur la requête de chargement 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 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;
};
Remplacer l'URL de contenu par l'URL du fichier manifeste et l'ID de flux
Si votre demande de flux aboutit, utilisez streamManager.getStreamId() pour récupérer l'ID du flux et insérez-le dans votre fichier manifestUrl, en remplaçant [[STREAMID]]. Remplacez ensuite le contentUrl existant par le nouveau manifestUrl pour que CAF lance la diffusion en direct avec les séries d'annonces assemblées.
/**
* 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;
});
};
Vous pouvez désormais demander et lire des flux de diffusion de séries d'annonces avec le framework d'application Cast et le SDK IMA DAI pour CAF.