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:

/21775744923/example/adaptive-banner

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 GAMBannerView

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

Automatycznie

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

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()
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ć AdManagerBannerView, 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.
GAMBannerView *bannerView = [[GAMBannerView 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ć GAMBannerView 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 Rozwiązywanie problemów z niewypełnionymi wyświetleniami w usłudze Ad Manager.

Wczytywanie reklamy

Gdy GAMBannerView 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 GAMRequest:

Swift

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

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:[GAMRequest request]];

Obiekty GAMRequest 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 Ad Managera. 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 Częstotliwość odświeżania reklam w aplikacjach mobilnych.

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 GAMBannerView 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:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

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

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

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

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

- (void)bannerViewDidDismissScreen:(GAMBannerView *)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 GAMBannerView 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:(GAMBannerView *)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:(GAMBannerView *)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

Ręczne zliczanie wyświetleń

Jeśli masz specjalne warunki dotyczące tego, kiedy wyświetlenie powinno zostać zarejestrowane, możesz ręcznie wysyłać pingi wyświetleń do Ad Managera. Można to zrobić, najpierw włączając GAMBannerView dla wyświetleń ręcznych przed wczytaniem reklamy:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Gdy ustalisz, że reklama została zwrócona i jest wyświetlana na ekranie, możesz ręcznie wywołać wyświetlenie:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Zdarzenia w aplikacji

Możesz nasłuchiwać zdarzeń w aplikacji związanych z Ad Managerem, używając GADAppEventDelegate. Te zdarzenia mogą wystąpić w dowolnym momencie cyklu życia reklamy, nawet przed wywołaniem metody bannerViewDidReceiveAd: obiektu GADBannerViewDelegate.

Aby zarejestrować zdarzenia w aplikacji, ustaw właściwość delegowania w GAMBannerView na obiekt, który implementuje protokół GADAppEventDelegate. Zwykle klasa, która implementuje banery reklamowe, działa też jako klasa delegowana. W takim przypadku właściwość delegowaną można ustawić na self.

Swift

// Set this property before making the request for an ad.
bannerView.appEventDelegate = self

Objective-C

// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;

Oto przykład pokazujący, jak zmienić kolor tła aplikacji, określając go w zdarzeniu w aplikacji:

Swift

func bannerView(
  _ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
  if name == "color" {
    if info == "green" {
      // Set background color to green.
      view.backgroundColor = UIColor.green
    } else if info == "blue" {
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    } else {
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else {
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Oto odpowiednia kreacja, która wysyła do appEventDelegate komunikaty o zdarzeniach w aplikacji dotyczące koloru:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Przykład implementacji zdarzeń w aplikacji w aplikacji demonstracyjnej interfejsu API na iOS znajdziesz w artykule o zdarzeniach w aplikacji w usłudze Ad Manager.

Swift Objective-C

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