Renderowanie reklam na iPhonie X

W tym przewodniku przedstawiamy sprawdzone metody kodowania aplikacji w taki sposób, aby prawidłowo renderować reklamy na iPhonie X.

Wymagania wstępne

Banery reklamowe muszą być umieszczone w „bezpiecznym obszarze”, aby nie były zasłonięte zaokrąglonymi rogami, obudową czujnika i wskaźnikiem ekranu głównego. Na tej stronie znajdziesz przykłady tego, jak dodać ograniczenia, by umieścić baner na górze lub na dole bezpiecznego obszaru. Ograniczenia dotyczące scenorysu i automatyzacji są przedstawione w środowisku obsługującym iOS w wersji 9 lub nowszej i Xcode 9 lub nowszej. Wymienione są również obejścia we wcześniejszych wersjach iOS i Xcode.

Kreator scenorysów/interfejsów

Jeśli Twoja aplikacja korzysta z Kreatora interfejsów, najpierw upewnij się, że masz włączone przewodniki po układzie bezpiecznego obszaru. W tym celu musisz korzystać z Xcode 9 lub nowszej wersji i kierować reklamy na iOS 9 lub nowszy.

Otwórz plik konstruktora interfejsów i kliknij scenę kontrolera widoku. Po prawej stronie zobaczysz opcje Interface Builder Document. Zaznacz opcję Używaj prowadnic do bezpiecznego układu przestrzeni i upewnij się, że tworzysz kompilację co najmniej na iOS 9.0 i nowsze wersje.

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

Teraz możesz go wyrównać do górnej części bezpiecznego obszaru, ograniczając właściwość Top GAMBannerView do górnej części bezpiecznego obszaru:

I podobnie, baner można wyrównać do dolnej krawędzi bezpiecznego obszaru, umieszczając właściwość dolną w widoku GAMBannerView w dolnej części bezpiecznego obszaru:

Ograniczenia powinny teraz wyglądać podobnie do tego na zrzucie ekranu poniżej (rozmiary i pozycjonowanie mogą się różnić):

ViewController

Oto prosty fragment kodu kontrolera widoku, który spełnia minimum potrzebne do wyświetlenia banera w obiekcie GAMBannerView (zgodnie z konfiguracją powyżej):

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 = "/6499/example/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 = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

dopasowując banery do krawędzi bezpiecznego obszaru.

Baner o pełnej szerokości, wyrównanym do lewej lub prawej ogranicz lewą/prawą krawędź bezpiecznego obszaru, a nie lewą/prawą krawędź widoku superwidoku.

Jeśli włączysz funkcję Używaj prowadnic bezpiecznego układu, kreator interfejsów domyślnie użyje krawędzi bezpiecznego obszaru podczas dodawania ograniczeń do widoku.

Obsługa systemu iOS 8 i starszych wersji

Jeśli chcesz umożliwić obsługę systemu iOS 8 lub starszego za pomocą Kreatora interfejsów, odznacz opcję Użyj bezpiecznego układu przewodnika w przypadku plików i scenorysów utworzonych w narzędziu do tworzenia interfejsów.

Teraz możesz dodawać ograniczenia na dole górnego przewodnika po układzie (zamiast na górze bezpiecznego obszaru):

Dodaj też ograniczenia na górze dolnego przewodnika po układzie (a nie na dole bezpiecznego obszaru):

W przypadku banerów o pełnej szerokości (tylko w przypadku bezpiecznego obszaru w orientacji poziomej) te przewodniki dotyczące układu nie są dostępne. Bezpieczną opcją w Kreatorze interfejsów jest ustawienie ograniczeń lewej i prawej krawędzi względem marginesów:

Spowoduje to odsunięcie krawędzi banera od krawędzi widoku superwidoku/bezpiecznego obszaru, dzięki czemu baner na iPhonie X nie będzie zasłonięty w orientacji poziomej. Możesz też osiągnąć pożądany efekt automatycznie.

Automatyczna

Jeśli Twoja aplikacja automatycznie tworzy banery reklamowe, możesz określić ograniczenia i ustalić ich pozycję w kodzie. Ten przykład (na iOS w wersji 7.0 i nowszych) pokazuje, jak zablokować baner, aby był wyśrodkowany w poziomie u dołu bezpiecznego obszaru:

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 = "/6499/example/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 = @"/6499/example/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

Opisane wyżej techniki pozwalają łatwo ograniczyć się do górnej części bezpiecznego obszaru, modyfikując używane atrybuty i kotwice.

Reklamy natywne

Jeśli 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 nie musisz dodawać ograniczeń do elementu GAMBannerView. Musisz je dodać do elementów GADNativeAppInstallAdView i GADNativeContentAdView (lub do widoku zawierającego reklamę), zgodnie z wytycznymi dotyczącymi układu bezpiecznego obszaru. W przypadku widoków natywnych zalecamy określenie wyraźnie ograniczeń rozmiaru.

Reklamy pełnoekranowe i reklamy z nagrodą

Formaty reklam pełnoekranowych, w tym reklamy pełnoekranowe i reklamy z nagrodą, są renderowane przez pakiet SDK do reklam mobilnych Google. W ramach pakietu SDK do reklam mobilnych Google wprowadzimy aktualizację, dzięki której elementy reklamy, takie jak przycisk zamykania, będą renderowane we właściwym miejscu. Gdy zmiana będzie dostępna, zaktualizujemy informacje o wersji i tę stronę dokumentacji.