Renderowanie reklam na iPhonie X

Z tego przewodnika dowiesz się, jak prawidłowo kodować aplikacje, aby wyświetlać w nich reklamy na iPhonie X.

Wymagania wstępne

Banery reklamowe muszą być umieszczone w „bezpiecznym obszarze”, aby nie zasłaniały ich zaokrąglone rogi, obudowa czujnika i wskaźnik powrotu do ekranu początkowego. Na tej stronie znajdziesz przykłady dodawania ograniczeń, które pozwalają umieścić baner u góry lub u dołu bezpiecznego obszaru. Ograniczenia w przypadku scenorysu i programowania są przedstawione w środowisku obsługującym iOS 9+ i Xcode 9+. Wskazano też obejścia dla wcześniejszych wersji iOS i Xcode.

Storyboard/Interface Builder

Jeśli aplikacja korzysta z Interface Builder, najpierw włącz wytyczne układu obszaru bezpiecznego. Aby to zrobić, musisz mieć Xcode w wersji 9 lub nowszej i kierować reklamy na iOS w wersji 9 lub nowszej.

Otwórz plik Interface Builder i kliknij scenę kontrolera widoku. Po prawej stronie zobaczysz opcje dokumentu Interface Builder. Zaznacz opcję Use Safe Area Layout Guides (Używaj wytycznych dotyczących układu bezpiecznego obszaru) i upewnij się, że kompilujesz aplikację na iOS 9.0 lub nowszy.

Zalecamy ograniczenie rozmiaru banera do wymaganego za pomocą ograniczeń szerokości i wysokości.

Teraz możesz wyrównać baner do góry bezpiecznego obszaru, ograniczając właściwość Top elementu GAMBannerView do góry bezpiecznego obszaru:

Podobnie możesz wyrównać baner do dołu bezpiecznego obszaru, ograniczając właściwość Bottom obiektu GAMBannerView do dołu bezpiecznego obszaru:

Ograniczenia powinny teraz wyglądać podobnie jak na zrzucie ekranu poniżej (rozmiar i położenie mogą się różnić):

ViewController

Oto prosty fragment kodu kontrolera widoku, który wykonuje minimum czynności potrzebnych do wyświetlenia banera w GAMBannerView skonfigurowanym w powyższym scenorysie:

Swift

class ViewController: UIViewController {

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

  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(AdManagerRequest())
  }

}

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];
}

Wyrównywanie banerów do krawędzi bezpiecznego obszaru

Jeśli chcesz, aby baner był wyrównany do lewej lub prawej strony i zajmował całą szerokość, ogranicz jego lewą lub prawą krawędź do lewej lub prawej krawędzi obszaru bezpiecznego, a nie do lewej lub prawej krawędzi widoku nadrzędnego.

Jeśli masz włączoną opcję Use Safe Area Layout Guides (Używaj wytycznych układu bezpiecznego obszaru), podczas dodawania ograniczeń do widoku konstruktor interfejsu będzie domyślnie używać krawędzi bezpiecznego obszaru.

Obsługa systemu iOS 8 i starszych

Jeśli chcesz obsługiwać system iOS 8 lub starszy za pomocą narzędzia Interface Builder, odznacz opcję Use Safe Area Layout Guides w przypadku plików narzędzia Interface Builder i tablic scenorysów.

Możesz teraz dodać ograniczenia do dolnej części górnego przewodnika układu (zamiast do górnej części bezpiecznego obszaru):

Dodaj też ograniczenia do górnej części dolnego układu (zamiast do dolnej części bezpiecznego obszaru):

W przypadku banerów o pełnej szerokości (na które bezpieczny obszar ma wpływ tylko w trybie poziomym) te wytyczne dotyczące układu nie istnieją. Bezpieczna opcja w Interface Builder polega na ustawieniu ograniczeń lewej i prawej krawędzi względem marginesów:

Dzięki temu krawędź banera będzie nieco odsunięta od krawędzi widoku nadrzędnego lub bezpiecznego obszaru, co zapewni, że baner nie będzie zasłonięty w orientacji poziomej na iPhonie X. Możesz też osiągnąć pożądany rezultat automatycznie.

Automatyczna

Jeśli Twoja aplikacja tworzy reklamy banerowe automatycznie, możesz zdefiniować ograniczenia i umieścić reklamę banerową w kodzie. Ten przykład (dla iOS w wersji 7.0 lub nowszej) pokazuje, jak ograniczyć baner, aby był wyśrodkowany poziomo u dołu bezpiecznego obszaru:

Swift

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    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(AdManagerRequest())
  }

  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

Powyższe techniki można łatwo wykorzystać do ograniczenia do górnej części bezpiecznego obszaru, modyfikując używane atrybuty i punkty zakotwiczenia.

Reklamy natywne

Jeśli Twoja aplikacja przypina reklamy natywne u góry lub u dołu ekranu, obowiązują te same zasady, co w przypadku banerów reklamowych. Główna różnica polega na tym, że zamiast dodawać ograniczenia do GAMBannerView, musisz dodać ograniczenia do GADNativeAppInstallAdView i GADNativeContentAdView (lub widoku zawierającego reklamę), aby zachować zgodność z wytycznymi układu obszaru bezpiecznego. W przypadku widoków natywnych zalecamy podanie bardziej szczegółowych ograniczeń rozmiaru.

Reklamy pełnoekranowe i reklamy z nagrodą

Pełnoekranowe formaty reklam, w tym reklamy pełnoekranowe i reklamy z nagrodą, są renderowane przez pakiet SDK do reklam mobilnych Google. Zaktualizujemy pakiet SDK do reklam mobilnych Google, aby elementy reklam, takie jak przycisk zamykania, były renderowane we właściwym miejscu. Gdy ta zmiana będzie dostępna, zaktualizujemy informacje o wersji i tę stronę dokumentacji.