Cette page a été traduite par l'API Cloud Translation.

Rendu des annonces iPhone X

Ce guide présente les bonnes pratiques à suivre pour coder vos applications afin qu'elles affichent correctement les annonces sur l'iPhone X.

Prérequis

Suivez les instructions de la section Commencer.

Bannières

Les bannières doivent être placées dans la zone de sécurité pour éviter qu'elles soient masquées par les angles arrondis, le boîtier du capteur et l'indicateur d'accueil. Cette page contient des exemples montrant comment ajouter des contraintes pour positionner une bannière en haut ou en bas de la zone de sécurité. Les contraintes de storyboard et de programmation sont illustrées dans un environnement compatible avec iOS 9 et Xcode 9 ou versions ultérieures. Des solutions de contournement pour les versions antérieures d'iOS et de Xcode sont également indiquées.

Storyboard/Interface Builder

Si votre application utilise Interface Builder, assurez-vous d'abord d'avoir activé les guides de mise en page de la zone de sécurité. Pour ce faire, vous devez exécuter Xcode 9 ou version ultérieure et cibler iOS 9 ou version ultérieure.

Ouvrez votre fichier Interface Builder et cliquez sur la scène de votre contrôleur de vue. Les options du document Interface Builder s'affichent à droite. Cochez Utiliser des guides de mise en page de zone sécurisée et assurez-vous de compiler pour iOS 9.0 ou version ultérieure au minimum.

Nous vous recommandons de limiter la bannière à la taille requise à l'aide de contraintes de largeur et de hauteur.

Vous pouvez maintenant aligner la bannière en haut de la zone de sécurité en limitant la propriété "Top" de la GAMBannerView en haut de la zone de sécurité:

De même, vous pouvez aligner la bannière en bas de la zone de sécurité en contraignant la propriété "Bottom" de GAMBannerView au bas de la zone de sécurité:

Vos contraintes doivent maintenant ressembler à la capture d'écran ci-dessous (la taille/le positionnement peut varier):

ViewController

Voici un extrait de code de contrôleur de vue simple qui effectue le minimum nécessaire pour afficher une bannière dans un GAMBannerView, comme configuré dans le storyboard ci-dessus:

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(GAMRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

Aligner les bannières sur le bord de la zone de sécurité

Si vous souhaitez avoir une bannière pleine largeur alignée à gauche ou à droite, limitez le bord gauche/droit de la bannière au bord gauche/droit de la zone de sécurité et non au bord gauche/droit de la supervue.

Si l'option Utiliser des guides de mise en page de la zone de sécurité est activée, l'outil de création d'interface utilise par défaut les bords de la zone de sécurité lorsque vous ajoutez des contraintes à la vue.

Compatibilité avec iOS 8 et versions antérieures

Si vous souhaitez prendre en charge iOS 8 ou version antérieure à l'aide d'Interface Builder, vous devez décocher Utiliser des guides de mise en page de la zone de sécurité pour vos fichiers et storyboards Interface Builder.

Vous pouvez désormais ajouter des contraintes au bas du guide de mise en page supérieur (au lieu du haut de la zone de sécurité):

Ajoutez également des contraintes en haut du guide de mise en page du bas (au lieu du bas de la zone de sécurité):

Pour les bannières pleine largeur (qui ne sont affectées que par la zone de sécurité en mode paysage), ces guides de mise en page n'existent pas. L'option sécurisée dans Interface Builder fait que les contraintes de bordure gauche et droite sont relatives aux marges:

Cela décalera légèrement le bord de la bannière du bord de la supervue/zone de sécurité, ce qui garantit que votre bannière ne sera pas masquée en mode paysage sur l'iPhone X. Vous pouvez également obtenir le résultat souhaité de manière programmatique.

Programmatique

Si votre application crée des bannières publicitaires de manière programmatique, vous pouvez définir des contraintes et positionner la bannière publicitaire dans le code. Cet exemple (pour iOS 7.0 et versions ultérieures) montre comment centrer horizontalement une bannière en bas de la zone de sécurité:

Swift

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GAMBannerView(adSize: kGADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(GAMRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToVIew:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

- (void)positionBannerViewAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeCenterX
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeCenterX
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

@end

Les techniques ci-dessus peuvent facilement être utilisées pour limiter la zone de sécurité en haut en modifiant les attributs et les ancrages utilisés.

Annonces natives

Si votre application ancre des annonces natives en haut ou en bas de l'écran, les mêmes principes s'appliquent aux annonces natives qu'aux bannières. La principale différence est qu'au lieu d'ajouter des contraintes à un GAMBannerView, vous devrez ajouter des contraintes à vos GADNativeAppInstallAdView et GADNativeContentAdView (ou à la vue contenant l'annonce) afin de respecter les guides de mise en page de la zone de sécurité. Pour les vues natives, nous vous recommandons de fournir des contraintes de taille plus explicites.

Annonces interstitielles et avec récompense

Les formats d'annonces plein écran, y compris les annonces interstitielles et avec récompense, sont affichés par le SDK Google Mobile Ads. Une mise à jour du SDK Google Mobile Ads sera effectuée pour s'assurer que les éléments d'annonce, comme le bouton de fermeture, s'affichent au bon endroit. Nous mettrons à jour les notes de version et cette page de documentation lorsque cette modification sera disponible.