Konfigurowanie banerów reklamowych

Wybierz platformę: Android iOS Unity Flutter Android (starsza wersja)

Banery reklamowe to prostokątne reklamy, które zajmują część układu aplikacji. Zakotwiczone banery adaptacyjne są zawsze widoczne na ekranie, zakotwiczone u góry lub u dołu ekranu, a ich maksymalna wysokość wynosi 20% rozmiaru ekranu (maksymalnie 150 pikseli). Aby zoptymalizować rozmiar reklamy na każdym urządzeniu, używaj banerów adaptacyjnych.

Z tego przewodnika dowiesz się, jak wczytać zakotwiczony adaptacyjny baner reklamowy do aplikacji na iOS.

Wymagania wstępne

Zanim przejdziesz dalej, skonfiguruj Google Mobile Ads SDK.

Zawsze przeprowadzaj testy z użyciem reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem na wczytanie reklam testowych jest użycie naszego dedykowanego identyfikatora testowej jednostki reklamowej na potrzeby banerów na iOS:

ca-app-pub-3940256099942544/2435281174

Została ona specjalnie skonfigurowana tak, aby zwracać reklamy testowe w przypadku każdego żądania. Możesz jej swobodnie używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby przed opublikowaniem aplikacji zastąpić go identyfikatorem własnej jednostki reklamowej.

Więcej informacji o tym, jak działają reklamy testowe Google Mobile Ads SDK, znajdziesz w artykule Reklamy testowe.

Tworzenie obiektu GADBannerView

Banery reklamowe są wyświetlane w obiektach GADBannerView, więc pierwszym krokiem do ich integracji jest uwzględnienie elementu GADBannerView w hierarchii widoków. Zwykle odbywa się to programowo lub za pomocą narzędzia Interface Builder.

Automatycznie

Można też utworzyć instancję GADBannerView bezpośrednio. Ten przykład tworzy GADBannerView:

Swift

// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])

SwiftUI

Aby użyć BannerView, utwórz UIViewRepresentable:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }

Dodaj UIViewRepresentable do hierarchii widoków, podając wartości height i width:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}

Objective-C

// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;

Kreator interfejsu

Możesz dodać GADBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodać ograniczenia pozycji tylko do banera. Na przykład podczas wyświetlania banera adaptacyjnego u dołu ekranu ustaw dół widoku banera na górę dolnego przewodnika po układzie i ustaw ograniczenie centerX równe centerX widoku nadrzędnego.

Ustawianie rozmiaru reklamy

Duże banery adaptacyjne to większy format przeznaczony do układów bez przewijania. W porównaniu ze standardowymi zakotwiczonymi banerami adaptacyjnymi te banery mają większą maksymalną wysokość (do 20% wysokości ekranu, od 50 do 150 punktów). Ta większa przestrzeń jest zoptymalizowana pod kątem treści wideo.

Poniższy przykład pokazuje, jak uzyskać rozmiar dużego zakotwiczonego banera adaptacyjnego:

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

Ustaw rozmiar reklamy mniejszy niż rozmiar ekranu urządzenia lub mu równy. Aby określić maksymalny rozmiar ekranu w systemie iOS 26 lub nowszym, użyj właściwości UIWindowScene.effectiveGeometry.coordinateSpace. W systemie iOS 18 i starszych użyj właściwości UIWindowScene.coordinateSpace. Szczegółowe informacje o ograniczeniach rozmiaru znajdziesz w artykule Wymagania dotyczące rozmiaru żądania reklamy.

Wczytywanie reklamy

Gdy GADBannerView jest na miejscu i jego właściwości, takie jak adUnitID, są skonfigurowane, czas wczytać reklamę. W tym celu wywołaj loadRequest: na obiekcie GADRequest:

Swift

func loadBannerAd(bannerView: BannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(Request())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

[self.bannerView loadRequest:[GADRequest request]];

Obiekty GADRequest reprezentują pojedyncze żądanie reklamy i zawierają właściwości, takie jak informacje o kierowaniu.

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnego żądania reklamy, gdy nie uda się jej wczytać. Google Mobile Ads SDK uwzględnia częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, wyślij nową prośbę. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Używanie opcji automatycznego odświeżania w przypadku banerów reklamowych.

Obsługa zmian orientacji

Gdy zmienia się orientacja ekranu aplikacji, np. z trybu portrait na poziomy, często zmienia się też dostępna szerokość banera. Aby mieć pewność, że w nowym układzie wyświetli się reklama o odpowiednim rozmiarze, poproś o nowy baner. Jeśli szerokość banera jest stała lub jeśli ograniczenia układu mogą obsłużyć zmianę rozmiaru, pomiń ten krok.

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}

Zdarzenia reklamowe

Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, takich jak zamknięcie reklamy lub opuszczenie aplikacji przez użytkownika.

Rejestrowanie zdarzeń związanych z banerami

Aby zarejestrować zdarzenia banera reklamowego, ustaw właściwość delegate w GADBannerView na obiekt, który implementuje protokół GADBannerViewDelegate. Zwykle klasa, która implementuje banery reklamowe, działa też jako klasa delegowana. W takim przypadku właściwość delegate można ustawić na self.

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

Implementowanie zdarzeń banera

Każda z metod w GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz zaimplementować tylko te metody, które chcesz. W tym przykładzie implementujemy każdą metodę i rejestrujemy komunikat w konsoli:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

Przykład implementacji metod delegowania banerów w aplikacji demonstracyjnej interfejsu API na iOS znajdziesz w przykładzie Ad Delegate.

Swift Objective-C

Przypadki użycia

Oto kilka przykładowych przypadków użycia tych metod zdarzeń reklamowych.

Dodawanie banera do hierarchii widoków po otrzymaniu reklamy

Możesz opóźnić dodanie elementu GADBannerView do hierarchii widoków do momentu otrzymania reklamy. Możesz to zrobić, nasłuchując zdarzenia bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Animowanie banera reklamowego

Możesz też użyć zdarzenia bannerViewDidReceiveAd:, aby animować baner reklamowy po jego zwróceniu, jak w tym przykładzie:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Wstrzymywanie i wznawianie aplikacji

Protokół GADBannerViewDelegate zawiera metody powiadamiania o zdarzeniach, np. gdy kliknięcie powoduje wyświetlenie lub zamknięcie nakładki. Jeśli chcesz sprawdzić, czy te zdarzenia były spowodowane przez reklamy, zarejestruj się w tych metodach GADBannerViewDelegate.

Aby wykrywać wszystkie typy prezentacji nakładek lub wywołań zewnętrznych przeglądarek, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać odpowiednich metod w UIViewController lub UIApplication. Oto tabela zawierająca odpowiedniki metod na iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:

Metoda GADBannerViewDelegate Metoda na iOS
bannerViewWillPresentScreen: viewWillDisappear: obiektu UIViewController
bannerViewWillDismissScreen: viewWillAppear: obiektu UIViewController
bannerViewDidDismissScreen: viewDidAppear: obiektu UIViewController

Dodatkowe materiały

Przykłady na GitHubie

Dalsze kroki

Banery zwijane

Zwijane banery reklamowe to banery, które początkowo wyświetlają się jako większa nakładka z przyciskiem umożliwiającym zmniejszenie reklamy. Rozważ użycie go, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w artykule Zwijane banery reklamowe.

Wbudowane banery adaptacyjne

Wbudowane banery adaptacyjne są większe i wyższe niż zakotwiczone banery adaptacyjne. Mają zmienną wysokość i mogą być tak wysokie jak ekran urządzenia. Wbudowane banery adaptacyjne są zalecane zamiast zakotwiczonych banerów adaptacyjnych w aplikacjach, które umieszczają banery reklamowe w przewijanych treściach. Więcej informacji znajdziesz w artykule o wbudowanych banerach adaptacyjnych.

Przeglądaj inne tematy