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 à n'importe quel ad server compatible avec la norme VAST et gérer la lecture des annonces dans vos applications.
Avec les SDK IMA pour l'insertion dynamique d'annonce, les applications envoient une demande de flux pour les annonces et les vidéos de contenu destinées à la VOD ou au contenu en direct. Le SDK renvoie ensuite un flux vidéo combiné, ce qui vous évite d'avoir à gérer le basculement entre les annonces et les vidéos de contenu dans votre application.
Ce guide explique comment lire un flux de diffusion de séries d'annonces pour l'insertion dynamique d'annonce en direct à l'aide du SDK IMA pour l'insertion dynamique d'annonce pour CAF.
Avant d'utiliser ce guide, familiarisez-vous avec le protocole Web Receiver du framework d'application Chromecast. Ce guide suppose que vous connaissez les concepts de base des récepteurs CAF, tels que les intercepteurs de messages et les objets mediaInformation, et que vous savez utiliser l'outil de commande et de contrôle Cast pour émuler un expéditeur CAF.
Pour utiliser la diffusion de séries d'annonces pour l'insertion dynamique d'annonce IMA, vous devez collaborer avec un partenaire de diffusion de séries d'annonces et disposer d'un compte Ad Manager 360 avancé. Si vous possédez 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 SDK Interactive Media Ads.
Présentation de l'insertion dynamique de séries d'annonces via le SDK IMA
L'implémentation de la diffusion de séries d'annonces à l'aide du SDK IMA CAF DAI implique deux composants principaux, présentés dans ce guide:
StreamRequest: objet qui définit une requête de flux vers les serveurs publicitaires de Google. Les requêtes spécifient un code de réseau, une clé d'élément personnalisé 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'annonce, comme le déclenchement des pings de suivi et le transfert des événements de flux à l'éditeur.
Prérequis
- Un compte de la console de développement Cast avec des appareils de test enregistrés
- Une application de récepteur Web hébergée, enregistrée auprès de votre console de développement Cast et qui peut être modifiée pour héberger le code fourni par ce guide.
- Une application d'envoi configurée pour utiliser votre application de réception 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 afin d'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 si le flux d'insertion dynamique d'annonce ne se charge pas.
BACKUP_STREAM_URL |
||||||||||
contentType
|
Facultatif. Type MIME des flux de sauvegarde de contenu. Nécessaire uniquement pour les flux DASH.
CONTENT_STREAM_MIMETYPE |
||||||||||
streamType
|
La constante ou le littéral de chaîne utilisé pour cette valeur varie selon la plate-forme de l'expéditeur. | ||||||||||
customData
|
Le champ customData contient un magasin de paires clé-valeur de champs obligatoires supplémentaires.
|
Voici quelques exemples de code pour vous aider à démarrer:
Web
Pour configurer ces valeurs dans un expéditeur Web Cast, commencez par créer 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 expéditeur Web Cast, commencez par créer 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 expéditeur Web Cast, commencez par créer 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 expéditeur Web Cast, commencez par créer 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 fichier 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 de votre 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 obtenir 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 de CAF par le script. Dans le tag de script, stockez le contexte du récepteur et le player Manager 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 de transmettre vos éléments multimédias à CAF, créez votre requête de flux dans un intercepteur de messages de chargement.
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 requête de flux aboutit, utilisez streamManager.getStreamId() pour récupérer l'ID du flux et insérez-le dans votre manifestUrl, en remplaçant [[STREAMID]]. Remplacez ensuite le contentUrl existant par le nouveau manifestUrl afin 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 pods à l'aide du framework d'application Cast et du SDK IMA DAI pour CAF.