Premiers pas avec le SDK IMA DAI

Les SDK IMA permettent d'intégrer facilement des annonces multimédias à vos sites Web et applications. Les SDK IMA peuvent demander des annonces à n'importe quel ad server conforme à 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 les annonces et les vidéos de contenu (VOD ou contenu en direct). Le SDK renvoie ensuite un flux vidéo combiné, de sorte que vous n'ayez pas à gérer le basculement entre l'annonce et le contenu vidéo dans votre application.

Sélectionnez la solution de publicité display in-app qui vous intéresse.

Insertion dynamique de séries d'annonces

Ce guide explique comment intégrer le SDK IMA DAI dans une application de lecteur vidéo simple. Si vous souhaitez consulter ou suivre un exemple d'intégration terminé, téléchargez PodServingExample sur GitHub.

Présentation de l'insertion dynamique d'annonces IMA

L'implémentation de la publicité display interactive IMA implique quatre principaux composants du SDK, comme indiqué dans ce guide:

  • IMAAdDisplayContainer : objet conteneur situé au-dessus de l'élément de lecture vidéo et contenant les éléments d'UI de l'annonce.
  • IMAAdsLoader : objet qui demande des flux et gère les événements déclenchés par des objets de réponse de requête de flux. Vous ne devez instancier qu'un seul chargeur d'annonces, qui peut être réutilisé tout au long de la durée de vie de l'application.
  • IMAStreamRequest : IMAPodVODStreamRequest ou IMAPodStreamRequest.
  • IMAStreamManager : objet qui gère les flux d'insertion dynamique d'annonces et les interactions avec le backend de l'insertion dynamique d'annonces. Le gestionnaire de flux gère également les pings de suivi et transfère les événements de flux et d'annonce à l'éditeur.

De plus, pour lire des flux de diffusion de pod, vous devez implémenter un gestionnaire VTP personnalisé. Ce gestionnaire VTP personnalisé envoie l'ID de flux à votre partenaire technique vidéo (VTP), ainsi que toutes les autres informations dont il a besoin pour renvoyer un fichier manifeste de flux contenant à la fois du contenu et des annonces assemblées. Votre VTP vous fournira des instructions sur l'implémentation de votre gestionnaire VTP personnalisé.

Prérequis

Avant de commencer, vous avez besoin des éléments suivants :

Vous avez également besoin des paramètres utilisés pour demander votre flux à partir du SDK IMA.

Paramètres de diffusion en direct
Code réseau Code de réseau de votre compte Ad Manager 360.
Exemple: 51636543
Clé d'élément personnalisée Clé d'élément personnalisée qui identifie votre événement de diffusion de série dans Ad Manager 360. Il peut être créé par votre outil de manipulation du fichier manifeste ou par un partenaire tiers de diffusion de séries d'annonces.
Exemple: google-sample
Paramètres de flux VOD
Code réseau Code de réseau de votre compte Ad Manager 360.
Exemple: 51636543

Créer un projet Xcode

Dans Xcode, créez un projet iOS à l'aide d'Objective-C nommé "PodServingExample".

Ajouter le SDK IMA DAI au projet Xcode

Utilisez l'une des trois méthodes suivantes pour installer le SDK IMA DAI.

Installer le SDK à l'aide de CocoaPods (recommandé)

CocoaPods est un gestionnaire de dépendances pour les projets Xcode. Il s'agit de la méthode recommandée pour installer le SDK IMA DAI. Pour en savoir plus sur l'installation ou l'utilisation de CocoaPods, consultez la documentation CocoaPods. Une fois que vous avez installé CocoaPods, suivez les instructions ci-dessous pour installer le SDK IMA DAI:

  1. Dans le même répertoire que votre fichier PodServingExample.xcodeproj, créez un fichier texte appelé Podfile et ajoutez la configuration suivante:

    Podfile 
    source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '14'

target 'PodServingExample' do
  pod 'GoogleAds-IMA-iOS-SDK'
end

    Podfile

  2. Dans le répertoire contenant le fichier Podfile, exécutez la commande suivante:

    pod install --repo-update

Installer le SDK à l'aide de Swift Package Manager

Le SDK Interactive Media Ads est compatible avec le gestionnaire de paquets Swift à partir de la version 3.18.4. Pour importer le package Swift, procédez comme suit :

  1. Dans Xcode, installez le package Swift du SDK IMA DAI en accédant à File > Add Packages (Fichier > Ajouter des packages).

  2. Dans l'invite qui s'affiche, recherchez le dépôt GitHub du package Swift du SDK IMA DAI:

    https://github.com/googleads/swift-package-manager-google-interactive-media-ads-ios

  3. Sélectionnez la version du package Swift du SDK IMA DAI que vous souhaitez utiliser. Pour les nouveaux projets, nous vous recommandons d'utiliser l'option Jusqu'à la prochaine version majeure.

Lorsque vous avez terminé, Xcode résout les dépendances de vos packages et les télécharge en arrière-plan. Pour en savoir plus sur l'ajout de dépendances de package, consultez l'article d'Apple.

Télécharger et installer manuellement le SDK

Si vous ne souhaitez pas utiliser Swift Package Manager ou CocoaPods, vous pouvez télécharger le SDK IMA DAI et l'ajouter manuellement à votre projet.

Créer un lecteur vidéo simple

Implémentez un lecteur vidéo dans votre contrôleur de vue principal, à l'aide d'un lecteur AV encapsulé dans une vue d'interface utilisateur. Le SDK IMA utilise la vue de l'UI pour afficher les éléments de l'UI des annonces.

ViewController.m 
#import "ViewController.h"

#import <AVKit/AVKit.h>

/// Content URL.
static NSString *const kBackupContentUrl =
    @"http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";

@interface ViewController ()
/// Play button.
@property(nonatomic, weak) IBOutlet UIButton *playButton;

@property(nonatomic, weak) IBOutlet UIView *videoView;
/// Video player.
@property(nonatomic, strong) AVPlayer *videoPlayer;
@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  self.view.backgroundColor = [UIColor blackColor];

  // Load AVPlayer with the path to your content.
  NSURL *contentURL = [NSURL URLWithString:kBackupContentUrl];
  self.videoPlayer = [AVPlayer playerWithURL:contentURL];

  // Create a player layer for the player.
  AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:self.videoPlayer];

  // Size, position, and display the AVPlayer.
  playerLayer.frame = self.videoView.layer.bounds;
  [self.videoView.layer addSublayer:playerLayer];
}

- (IBAction)onPlayButtonTouch:(id)sender {
  [self.videoPlayer play];
  self.playButton.hidden = YES;
}

@end

ViewController.m

Initialiser le chargeur d'annonces

Importez le SDK IMA dans votre contrôleur de vue et adoptez les protocoles IMAAdsLoaderDelegate et IMAStreamManagerDelegate pour gérer les événements du chargeur d'annonces et du gestionnaire de flux.

Ajoutez ces propriétés privées pour stocker les principaux composants du SDK IMA:

  • IMAAdsLoader : gère les requêtes de flux pendant toute la durée de vie de votre application.
  • IMAAdDisplayContainer : gère l'insertion et la gestion des éléments d'interface utilisateur des annonces.
  • IMAAVPlayerVideoDisplay : permet de communiquer entre le SDK IMA et votre lecteur multimédia, et gère les métadonnées temporelles.
  • IMAStreamManager : gère la lecture du flux et déclenche des événements liés aux annonces.

Initialisez le chargeur d'annonces, le conteneur d'affichage des annonces et l'affichage vidéo une fois la vue chargée.

ViewController.m 
@import GoogleInteractiveMediaAds;

// ...

@interface ViewController () <IMAAdsLoaderDelegate, IMAStreamManagerDelegate>
/// The entry point for the IMA DAI SDK to make DAI stream requests.
@property(nonatomic, strong) IMAAdsLoader *adsLoader;
/// The container where the SDK renders each ad's user interface elements and companion slots.
@property(nonatomic, strong) IMAAdDisplayContainer *adDisplayContainer;
/// The reference of your video player for the IMA DAI SDK to monitor playback and handle timed
/// metadata.
@property(nonatomic, strong) IMAAVPlayerVideoDisplay *imaVideoDisplay;
/// References the stream manager from the IMA DAI SDK after successful stream loading.
@property(nonatomic, strong) IMAStreamManager *streamManager;

// ...

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // ...

  self.adsLoader = [[IMAAdsLoader alloc] initWithSettings:nil];
  self.adsLoader.delegate = self;

  // Create an ad display container for rendering each ad's user interface elements and companion
  // slots.
  self.adDisplayContainer =
      [[IMAAdDisplayContainer alloc] initWithAdContainer:self.videoView
                                          viewController:self
                                          companionSlots:nil];

  // Create an IMAAVPlayerVideoDisplay to give the SDK access to your video player.
  self.imaVideoDisplay = [[IMAAVPlayerVideoDisplay alloc] initWithAVPlayer:self.videoPlayer];
}
ViewController.m

Envoyer une requête de streaming

Lorsqu'un utilisateur appuie sur le bouton de lecture, envoyez une nouvelle requête de flux. Utilisez la classe IMAPodStreamRequest pour les diffusions en direct. Pour les flux VOD, utilisez la classe IMAPodVODStreamRequest.

La demande de flux nécessite vos paramètres de flux, ainsi qu'une référence à votre conteneur d'affichage d'annonces et à l'affichage vidéo.

ViewController.m 
- (IBAction)onPlayButtonTouch:(id)sender {
  [self requestStream];
  self.playButton.hidden = YES;
}

- (void)requestStream {
  // Create a stream request.
  IMAStreamRequest *request;
  if (kStreamType == StreamTypeLive) {
    // Live stream request. Replace the network code and custom asset key with your values.
    request = [[IMAPodStreamRequest alloc] initWithNetworkCode:kNetworkCode
                                                customAssetKey:kCustomAssetKey
                                            adDisplayContainer:adDisplayContainer
                                                  videoDisplay:self.videoDisplay
                                         pictureInPictureProxy:nil
                                                   userContext:nil];
  } else {
    // VOD request. Replace the network code with your value.
    request = [[IMAPodVODStreamRequest alloc] initWithNetworkCode:@kNetworkCode
                                               adDisplayContainer:adDisplayContainer
                                                     videoDisplay:self.videoDisplay
                                            pictureInPictureProxy:nil
                                                      userContext:nil];
  }
  [self.adsLoader requestStreamWithRequest:request];
}
ViewController.m

Écouter les événements de chargement de flux

La classe IMAAdsLoader appelle les méthodes IMAAdsLoaderDelegate en cas d'initialisation réussie ou d'échec de la requête de flux.

Dans la méthode de délégué adsLoadedWithData, définissez votre IMAStreamManagerDelegate. Transmettez l'ID de flux à votre gestionnaire VTP personnalisé, puis récupérez l'URL du fichier manifeste de flux. Pour les diffusions en direct, chargez l'URL du fichier manifeste dans votre écran vidéo et lancez la lecture. Pour les flux VOD, transmettez l'URL du fichier manifeste à la méthode loadThirdPartyStream du gestionnaire de flux. Cette méthode demande des données d'événements d'annonce à Ad Manager 360, puis charge l'URL du fichier manifeste et lance la lecture.

Dans la méthode déléguée failedWithErrorData, consignez l'erreur. Vous pouvez également lire le flux de sauvegarde. Consultez les bonnes pratiques concernant les API DAI.

ViewController.m 
- (void)adsLoader:(IMAAdsLoader *)loader adsLoadedWithData:(IMAAdsLoadedData *)adsLoadedData {
  NSLog(@"Stream created with: %@.", adsLoadedData.streamManager.streamId);
  self.streamManager = adsLoadedData.streamManager;
  self.streamManager.delegate = self;

  // Build the Pod serving Stream URL.
  NSString *streamID = adsLoadedData.streamManager.streamId;
  // Your custom VTP handler takes the stream ID and returns the stream manifest URL.
  NSString *urlString = gCustomVTPHandler(streamID);
  NSURL *streamUrl = [NSURL URLWithString:urlString];
  if (kStreamType == StreamTypeLive) {
    // Load live streams directly into the AVPlayer.
    [self.videoDisplay loadStream:streamUrl withSubtitles:@[]];
    [self.videoDisplay play];
  } else {
    // Load VOD streams using the `loadThirdPartyStream` method in IMA SDK's stream manager.
    // The stream manager loads the stream, requests metadata, and starts playback.
    [self.streamManager loadThirdPartyStream:streamUrl streamSubtitles:@[]];
  }
}

- (void)adsLoader:(IMAAdsLoader *)loader failedWithErrorData:(IMAAdLoadingErrorData *)adErrorData {
  // Log the error and play the backup content.
  NSLog(@"AdsLoader error, code:%ld, message: %@", adErrorData.adError.code,
        adErrorData.adError.message);
  [self.videoPlayer play];
}
ViewController.m

Implémenter votre gestionnaire VTP personnalisé

Le gestionnaire VTP personnalisé envoie l'ID de flux du spectateur à votre partenaire technique vidéo (VTP), ainsi que toutes les autres informations dont votre VTP a besoin pour renvoyer un fichier manifeste de flux contenant à la fois du contenu et des annonces assemblées. Votre VTP vous fournira des instructions spécifiques sur l'implémentation de votre gestionnaire VTP personnalisé.

Par exemple, un VTP peut inclure une URL de modèle de fichier manifeste contenant la macro [[STREAMID]]. Dans cet exemple, le gestionnaire insère l'ID de flux à la place de la macro et renvoie l'URL du fichier manifeste généré.

ViewController.m 
/// Custom VTP Handler.
///
/// Returns the stream manifest URL from the video technical partner or manifest manipulator.
static NSString *(^gCustomVTPHandler)(NSString *) = ^(NSString *streamID) {
  // Insert synchronous code here to retrieve a stream manifest URL from your video tech partner
  // or manifest manipulation server.
  // This example uses a hardcoded URL template, containing a placeholder for the stream
  // ID and replaces the placeholder with the stream ID.
  NSString *manifestUrl = @"YOUR_MANIFEST_URL_TEMPLATE";
  return [manifestUrl stringByReplacingOccurrencesOfString:@"[[STREAMID]]"
                                                withString:streamID];
};
ViewController.m

Écouter des événements publicitaires

IMAStreamManager appelle les méthodes IMAStreamManagerDelegate pour transmettre les événements de flux et les erreurs à votre application.

Pour cet exemple, consignez les événements d'annonces principaux dans la console:

ViewController.m 
- (void)streamManager:(IMAStreamManager *)streamManager didReceiveAdEvent:(IMAAdEvent *)event {
  NSLog(@"Ad event (%@).", event.typeString);
  switch (event.type) {
    case kIMAAdEvent_STARTED: {
      // Log extended data.
      NSString *extendedAdPodInfo = [[NSString alloc]
          initWithFormat:@"Showing ad %ld/%ld, bumper: %@, title: %@, description: %@, contentType:"
                         @"%@, pod index: %ld, time offset: %lf, max duration: %lf.",
                         (long)event.ad.adPodInfo.adPosition, (long)event.ad.adPodInfo.totalAds,
                         event.ad.adPodInfo.isBumper ? @"YES" : @"NO", event.ad.adTitle,
                         event.ad.adDescription, event.ad.contentType,
                         (long)event.ad.adPodInfo.podIndex, event.ad.adPodInfo.timeOffset,
                         event.ad.adPodInfo.maxDuration];

      NSLog(@"%@", extendedAdPodInfo);
      break;
    }
    case kIMAAdEvent_AD_BREAK_STARTED: {
      NSLog(@"Ad break started");
      break;
    }
    case kIMAAdEvent_AD_BREAK_ENDED: {
      NSLog(@"Ad break ended");
      break;
    }
    case kIMAAdEvent_AD_PERIOD_STARTED: {
      NSLog(@"Ad period started");
      break;
    }
    case kIMAAdEvent_AD_PERIOD_ENDED: {
      NSLog(@"Ad period ended");
      break;
    }
    default:
      break;
  }
}

- (void)streamManager:(IMAStreamManager *)streamManager didReceiveAdError:(IMAAdError *)error {
  NSLog(@"StreamManager error with type: %ld\ncode: %ld\nmessage: %@", error.type, error.code,
        error.message);
  [self.videoPlayer play];
}
ViewController.m

Nettoyer les composants d'insertion dynamique d'annonces IMA

Pour arrêter la lecture du flux, arrêter tout suivi des annonces et libérer tous les composants de flux chargés, appelez IMAStreamManager.destroy().

Exécutez votre application. Si elle fonctionne, vous pouvez demander et lire des flux d'insertion dynamique d'annonces Google avec le SDK IMA. Pour en savoir plus sur les fonctionnalités avancées du SDK, consultez les autres guides listés dans la barre latérale de gauche ou les exemples sur GitHub.