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 i mają maksymalną wysokość 20% rozmiaru ekranu, ale nie więcej niż 150 pikseli. Aby zoptymalizować rozmiar reklamy na każdym urządzeniu, użyj banerów adaptacyjnych.

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

Wymagania wstępne

Zanim przejdziesz dalej, skonfiguruj Google Mobile Ads SDK.

Zawsze testuj reklamy testowe

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam rzeczywistych. Jeśli tego nie zrobisz, możemy zawiesić Twoje konto.

Najłatwiejszym sposobem na wczytanie reklam testowych jest użycie naszego specjalnego identyfikatora jednostki reklamowej na banery na iOS:

ca-app-pub-3940256099942544/2435281174

Jest on specjalnie skonfigurowany tak, aby zwracać reklamy testowe w odpowiedzi na każde żądanie. Możesz go używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić go własnym identyfikatorem jednostki reklamowej.

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

Tworzenie elementu GADBannerView

Banery reklamowe są wyświetlane w GADBannerView obiektach. Pierwszym krokiem do zintegrowania banerów reklamowych jest więc umieszczenie elementu GADBannerView w hierarchii widoków. Zwykle robi się to programowo lub za pomocą narzędzia Interface Builder.

Programowo

Element GADBannerView można też utworzyć bezpośrednio. Poniższy przykład tworzy element 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ć elementu BannerView, utwórz element 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 element UIViewRepresentable do hierarchii widoków, określają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;

Interface Builder

Możesz dodać element GADBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodać tylko ograniczenia pozycji banera. Na przykład, podczas wyświetlania banera adaptacyjnego u dołu ekranu ustaw dolną krawędź widoku banera na górną krawędź dolnego przewodnika układu i ustaw centerX ograniczenie na wartość centerX nadwidoku.

Ustawianie rozmiaru reklamy

Duże banery adaptacyjne mają 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 pobiera 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 lub równy rozmiarowi ekranu urządzenia. Aby określić maksymalny rozmiar ekranu w systemie iOS 26 lub nowszym, użyj UIWindowScene.effectiveGeometry.coordinateSpace właściwości. W systemie iOS 18 lub starszym użyj UIWindowScene.coordinateSpace właściwości. Więcej informacji o ograniczeniach rozmiaru znajdziesz w artykule Wymagania dotyczące rozmiaru żądania reklamy.

Wczytywanie reklamy

Gdy element GADBannerView jest na swoim miejscu i jego właściwości, np. adUnitID, są skonfigurowane, możesz wczytać reklamę. Aby to zrobić, wywołaj metodę 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 dotyczące m.in. informacji 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 odświeżanie nie jest włączone, wyślij nowe żądanie. 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 orientacja ekranu aplikacji się zmieni, np. z portrait na poziomą, często zmienia się też dostępna szerokość banera. Aby mieć pewność, że wyświetlasz reklamę o odpowiednim rozmiarze w nowym układzie, poproś o nowy baner. Jeśli szerokość banera jest statyczna lub jeśli ograniczenia układu mogą obsługiwać 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ą protokołu GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, np. gdy reklama zostanie zamknięta lub użytkownik opuści aplikację.

Rejestrowanie zdarzeń banerów

Aby zarejestrować zdarzenia banerów reklamowych, ustaw właściwość delegate w elemencie GADBannerView na obiekt, który implementuje protokół GADBannerViewDelegate. Zwykle klasa, która implementuje banery reklamowe, pełni też funkcję klasy delegata. 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ń banerów

Każda z metod w protokole GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz zaimplementować tylko te metody, których potrzebujesz. Ten przykład implementuje każdą metodę i rejestruje 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");
}

Implementację metod delegata banera w aplikacji demonstracyjnej interfejsu API na iOS znajdziesz w przykładzie delegata reklamy.

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: do animowania banera reklamowego po jego zwróceniu, jak pokazano 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 śledzić, czy te zdarzenia były spowodowane reklamami, zarejestruj się w tych metodach GADBannerViewDelegate.

Aby przechwytywać wszystkie typy wyświetlania nakładek lub wywołań zewnętrznej przeglądarki, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać równoważnych metod w UIViewController lub UIApplication. W tej tabeli znajdziesz równoważne metody iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:

Metoda GADBannerViewDelegate Metoda iOS
bannerViewWillPresentScreen: viewWillDisappear: w UIViewController
bannerViewWillDismissScreen: viewWillAppear: w UIViewController
bannerViewDidDismissScreen: viewDidAppear: w 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 zwinięcie reklamy do mniejszego rozmiaru. Rozważ ich użycie, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w artykule Banery zwijane.

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. W przypadku aplikacji, które umieszczają banery reklamowe w treści z możliwością przewijania, zalecamy używanie wbudowanych banerów adaptacyjnych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule Wbudowane banery adaptacyjne

Przeglądaj inne tematy